JS实现动态倒计时功能（天数、时、分、秒）
写在前面：
实现倒计时功能首先是得到目标时间，然后用当前时间减去目标时间，最后将时间差传化为天数、时、分、秒。由于得到的时间不能直接运算，可以采用object.getTime()方法转化成相同类型进行运算。
相关说明：
如果想要显示界面好看些，可以添加一下样式。
<script>
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;}
}
</script>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input{width:50px;height: 20px;border:1px solid black;}
.time1 span{display:inline-block;width:40px;height: 20px;}
</style>
</head>
<body>
<form>目的日期：
<input type="text" id="year"><span>年</span>
<input type="text" id="month"><span>月</span>
<input type="text" id="day"><span>日</span>
<input type="text" id="hour"><span>时</span>
<input type="text" id="minute"><span>分</span>
<input type="text" id="second"><span>秒</span>
<input type="button" value="确定" οnclick="show()">
</form>
<div class="time1">还剩时间：
<span id="1"></span>天
<span id="2"></span>时
<span id="3"></span>分
<span id="4"></span>秒
</div>
写在最后：倒计时的难点主要是时间格式和数字格式的转换，转换时除了object.getTime()方法还有Number(object)方法，大家可以尝试使用一下。
总结
以上所述是小编给大家介绍的JS实现动态倒计时功能（天数、时、分、秒），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
原生JS实现简单的倒计时功能示例
本文实例讲述了原生JS实现简单的倒计时功能.分享给大家供大家参考,具体如下: 1.第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> <div id="div"></div> <scr
-
js实现倒计时器自定义时间和暂停
js倒计时器可自定义时间和暂停,效果如下,点击start 开始计时,end结束计时 分别复制 H5 css js 代码即可实现,具体的算法在js控制函数中(都写了注释) css html,body{ width:100%;height:100%; } .content{ height:100%;width:100%; } .row-center{ display:flex;flex-direction:row;justify-content:center; align-items:center;
-
JS实现倒计时图文效果
本文实例为大家分享了JS实现倒计时图文效果的具体代码,供大家参考,具体内容如下 <body> <img src="images/0.png" alt="" id="h1"> <img src="images/0.png" alt="" id="h2"> <img src="images/second1.png" alt=&qu
-
详解JS实现简单的时分秒倒计时代码
本文实例为大家分享了JS时分秒倒计时的实现的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js简单时分秒倒计时</title> <script type="text/javascript"> function countTime() {
-
JS+HTML5实现获取手机验证码倒计时按钮
效果图如下所示: HTML: <input type="button" value="获取验证码"> CSS: input[type=button] width: 150px; height: 30px; background-color: #ff3000; border: 0; border-radius: 15px; color: #fff; } input[type=button].on { background-color: #eee; colo
-
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
本文实例讲述了JS实现的倒计时恢复按钮点击功能.分享给大家供大家参考,具体如下: 倒计时时间到后,恢复按钮点击,常用于阅读协议: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net 阅读协议倒计时</title> <script> var tim=9; function aaa(){ var btnn=docu
-
2种简单的js倒计时方式
一般倒计时的时间都是后台传来的然后渲染到页面,这里有2个简单的倒计时方式 //带天数的倒计时 function countDown(times){ var timer=null; timer=setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(times > 0){ day = Math.floor(times / (60 * 60 * 24)); hour = Math.floor(times / (
-
js实现一个页面多个倒计时的3种方法
本文实例为大家分享了js实现一个页面多个倒计时的具体代码,供大家参考,具体内容如下 说明: 方法1, 方法二是基础原理版,方法三升级版(参考for循环,定时器,闭包混合一块的那点事.) 方法一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时</title> </head> <b
-
JS实现动态倒计时功能（天数、时、分、秒）
写在前面: 实现倒计时功能首先是得到目标时间,然后用当前时间减去目标时间,最后将时间差传化为天数.时.分.秒.由于得到的时间不能直接运算,可以采用object.getTime()方法转化成相同类型进行运算. 相关说明: 如果想要显示界面好看些,可以添加一下样式. <script> function show(){ //获取目的日期 var myyear=document.getElementById("year").value; var mymonth=document.g
-
js计算两个时间差 天 时 分 秒 毫秒的代码
具体代码如下所述: // 计算两个时间差 dateBegin 开始时间 function timeFn(dateBegin) { //如果时间格式是正确的,那下面这一步转化时间格式就可以不用了 var dateEnd = new Date();//获取当前时间 var dateDiff = dateEnd.getTime() - dateBegin;//时间差的毫秒数 var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天
-
js操作时间（年-月-日 时-分-秒 星期几）
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,0代表星期天) myDate.getTime(); //获取当前时间(从1970.1.1开
-
jQuery 实现倒计时天,时,分,秒功能
1.HTML部分 <span class="joind">135</span>天<span class="joinh">7</span>时<span class="joinm">46</span>分<span class="joins">25</span>秒 2.js部分 <script src="https://c
-
Swift免费短信验证码实现及动态倒计时功能
今天给大家带来一个简单的免费短信验证码实现demo,采用mob的短信验证码SDK,到目前为止还是免费的,只需要简单的注册-->添加个人应用-->获取appkey集apSecret 即可实现. 具体怎么申请,添加个人应用这里就不累赘了,相信能搜索到本文的必然有能力完成上面的操作. 1.下载mob的免费短信验证SDK,解压后复制SMS_SDK到你的工程,因为此SDK采用OC编写的,在与Swift结合时,需要添加桥接文件,具体操作如下: 右键你的Swift工程,新建一个OC文件,名字随便起,这时会弹
-
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
利用js的Date()对象,将系统当前时间格式化为年-月-日 时:分:秒.也可以自己定义格式.(做项目时遇到这个问题.本来想百度一个用,哎,网上的结果太乱了,于是自己写一个) 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Time</title> </head> <body
-
jQuery pager.js 插件动态分页功能实例分析
本文实例讲述了jQuery pager.js 插件动态分页功能.分享给大家供大家参考,具体如下: pager.js 代码 function Page(opt){ var set = $.extend({num:null,startnum:1,elem:null,callback:null},opt||{}); if(set.startnum>set.num||set.startnum<1){ set.startnum = 1; } var n = 0,htm = ''; var clickpa
-
Javascript 倒计时源代码.(时.分.秒) 详细注释版
随便写写!闲着无聊!代码如有bug之处欢迎阁下强力拍砖! JS CODE 复制代码 代码如下: <script type="text/javascript" language="javascript"> //总时间,已分为单位 var time = 100; //小时 var h = parseInt(time / 60) > 0 ? parseInt(time / 60) : 0; //分 var m = time % 60; //秒 var s
-
Ionic + Angular.js实现验证码倒计时功能的方法
前言 之前跟大家分享了关于 Android 原生实现验证码倒计时,地址是这里,现在公司使用 Ionic 开发的 App 也要实现类似的功能,现在也记录下来,供大家参考: 效果图: 正文 首先介绍下与本文相关的概念 $interval $interval 是 window.setInterval 的 Angular 包装形式,函数如果在没有被取消的时候会无限执行.(取消使用 cancel(promise) ) 用法: $interval(fn,delay,[count],[invokeApply]
-
jquery 显示*天*时*分*秒实现时间计时器
1.用jquery实现时间计时器,从之前的某个时间段到现在距离多少天多少时多少分多少秒? html代码: 复制代码 代码如下: <div id="times_wrap" class="time_num"> 距离现在时间: <div class="time_w"> <span id="time_d" class="time"> </span >天 <spa