html5在线天数计时器,JS实现动态倒计时功能(天数、时、分、秒)
写在前面:
实现倒计时功能首先是得到目标时间,然后用当前时间减去目标时间,最后将时间差传化为天数、时、分、秒。由于得到的时间不能直接运算,可以采用object.getTime()方法转化成相同类型进行运算。
相关说明:
如果想要显示界面好看些,可以添加一下样式。
function show(){
//获取目的日期
var myyear=document.getElementById("year").value;
var mymonth=document.getElementById("month").value-1;
var myday=document.getElementById("day").value;
var myhour=document.getElementById("hour").value;
var myminute=document.getElementById("minute").value;
var mysecond=document.getElementById("second").value;
var time=Number(new Date(myyear,mymonth,myday,myhour,myminute,mysecond));
// var time=new Date(myyear,mymonth,myday,myhour,myminute,mysecond).getTime();
//获取当前时间
var nowTime=Date.now();
// var nowTime=new Date().getTime();
//获取时间差
var timediff=Math.round((time-nowTime)/1000);
//获取还剩多少天
var day=parseInt(timediff/3600/24);
//获取还剩多少小时
var hour=parseInt(timediff/3600%24);
//获取还剩多少分钟
var minute=parseInt(timediff/60%60);
//获取还剩多少秒
var second=timediff%60;
//输出还剩多少时间
document.getElementById("1").innerHTML=day;
document.getElementById("2").innerHTML=hour;
document.getElementById("3").innerHTML=minute;
document.getElementById("4").innerHTML=second;
setTimeout(show,1000);
if(timediff==0){return;}
}
Document
input{width:50px;height: 20px;border:1px solid black;}
.time1 span{display:inline-block;width:40px;height: 20px;}
目的日期:
年
月
日
时
分
秒
天
时
分
秒
写在最后:倒计时的难点主要是时间格式和数字格式的转换,转换时除了object.getTime()方法还有Number(object)方法,大家可以尝试使用一下。
总结
以上所述是小编给大家介绍的JS实现动态倒计时功能(天数、时、分、秒),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
时间: 2019-12-10
html5在线天数计时器,JS实现动态倒计时功能(天数、时、分、秒)相关推荐
- JS获取日期(年/月/日/时/分/秒)格式转化
因为用到JS倒计时,所以就把网上搜到的各种关于日期的整理了一下,有个印象,以后再用到,可以直接看自己的,方便很多. var myDate = new Date(); 以下都是在myDate的基础上得到 ...
- JS获取日期(年/月/日/时/分/秒)以及完整格式转化(补0)
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位 ...
- 简单几行javascript代码,实现动态倒计时功能
2019独角兽企业重金招聘Python工程师标准>>> js实现动态倒计时功能 * a是从后台接收到的时间戳,需转换成毫秒单位 <div>距明年还有:<span i ...
- JS实现倒计时精确到天数,时,分,秒或者精确到时、分、秒(小时数累加)
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>JS ...
- (常用代码)原声JS 实现倒计时的效果。分/秒/毫秒/
(常用代码)原声JS 实现倒计时的效果.分/秒/毫秒/ 第一步:构建HTML 结构和样式 <!-- 构建 HTML --> <div class="timing" ...
- js将当前时间格式化为年-月-日 时:分:秒
利用js的Date()对象,将系统当前时间格式化为年-月-日 时:分:秒.也可以自己定义格式.(做项目时遇到这个问题.本来想百度一个用,哎,网上的结果太乱了,于是自己写一个) 代码如下: <!D ...
- 使用js定时器实现倒计时功能
先看看效果图: 倒计时使用的技术主要就是js中的定时器. 首先还是先理一下思路,先要确定一个具体的时间,你想从哪个时间到哪个时间,我这个就是从现在的时间到2022年过年,然后使用data对象获取天.小 ...
- js版的倒计时(月-日-时-分-秒-毫秒)
大早上好瞌睡,爬起来接着写. 今天做的倒计时用了三种方法 过程和思路: 设置未来的时间.(使用在new Date()后面直接设置时间的方法) 获取当前的时间( newDate() ) 用未来时间减去现 ...
- 小程序实现天/时/分/秒倒计时效果
一.普通倒计时 <view><view class="start-time"><view class="day">{{day ...
最新文章
- ACMNO.19 C语言-对角求和 求一个3×3矩阵对角线元素之和。 输入 矩阵 输出 主对角线 副对角线 元素和 样例输入 1 2 3 1 1 1 3 2 1 样例输出 3 7
- gitpythonapi_GitPython 使用基础
- python 中float 的语法_python语法和基本数据类型
- Linux Mysql 1130错误解决
- memcpy和strcpy的区别 ?
- jooq映射原理_JOOQ事实:从JPA批注到JOOQ表映射
- 【HDU - 3714 】Error Curves (三分)
- 13 计算机组成原理第七章 输入/输出系统 I/O方式 I/O接口
- shell脚本执行oracle删除表,shell脚本操作oracle删除表空间、创建表空间、删除用户...
- 苹果春季发布会:绝不玩别人玩剩下的!
- 网络流——基础,Dinic和Sap(Gap优化)算法
- 南京邮电大学网络攻防训练平台-逆向-Py交易
- 多媒体个人计算机能处理什么,多媒体信息处理
- Python生成九宫格图片
- 软件开发中的 Kata 模型是什么,和精益有什么关系?
- 李宏毅机器学习作业6-使用GAN生成动漫人物脸
- 晶闸管输出光耦合器TLP541参数及应用实例
- Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇
- 芯片行业名词简写——来自实操小白经验积累1.0
- 二、四维拟合股市理论的时空哲学