js实现时分秒倒计时


Posted in Javascript onDecember 03, 2019

本文实例为大家分享了js实现时分秒倒计时的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js时分秒毫秒倒计时</title>
</head>
<body>
<div class="active_time" id="active_time"></div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
 //js部分
 function countTime(value) {
 //获取当前时间
 var date = new Date();
 var now = date.getTime();

 //设置截止时间
 //在pc端浏览器可以这样写
 var endDate = new Date("2019-12-03 00:00:00");
 //移动端必须这样写,因为ios不支持日期中间是-链接,会报错
 //var endDate = new Date("2019/7/22 00:00:00");
 var end = endDate.getTime();
 //时间差
 var differTime = end - now;
 //定义变量,h,m,s保存倒计时的时间
 var h, m, s;
 if (differTime >= 0) {
 h = Math.floor(differTime / 1000 / 60 / 60);
 m = Math.floor(differTime / 1000 / 60 % 60);
 s = Math.floor(differTime / 1000 % 60);
 h = h < 10 ? ("0" + h) : h;
 m = m < 10 ? ("0" + m) : m;
 s = s < 10 ? ("0" + s) : s;
 var timeDom = "倒计时:" + h + "小时" + m + "分" + s + "秒";
 $("#active_time").text(timeDom);
 //递归调用函数所以是延时器不是定时器
 setTimeout(function () {
 countTime(value)
 }, 1000);
 } else {
 var timeDom ="00小时 00分 00秒";
 $("#active_time").text(timeDom);
 }}
 countTime()
</script>
</body>
</html>

更多关于倒计时的文章请查看专题: 《倒计时功能》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
toString()一个会自动调用的方法
Feb 08 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
详解webpack打包vue时提取css
May 26 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
浅谈React碰到v-if
Nov 04 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 Javascript
uniapp开发小程序的经验总结
Apr 08 Javascript
react 路由Link配置详解
Nov 11 Javascript
Vue实现验证码功能
Dec 03 #Javascript
JS实现压缩上传图片base64长度功能
Dec 03 #Javascript
js实现AI五子棋人机大战
May 28 #Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 #Javascript
JavaScript的console命令使用实例
Dec 03 #Javascript
JavaScript实现京东放大镜效果
Dec 03 #Javascript
微信小程序实现图片压缩
Dec 03 #Javascript
You might like
用PHP和ACCESS写聊天室(三)
2006/10/09 PHP
php图片验证码代码
2008/03/27 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
ucenter通信原理分析
2015/01/09 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python标准库与第三方库详解
2014/07/22 Python
Python 常用string函数详解
2016/05/30 Python
Python封装原理与实现方法详解
2018/08/28 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
你对IPv6了解程度
2016/02/09 面试题
Unix控制后台进程都有哪些进程
2016/09/22 面试题
测量工程专业求职信
2014/02/24 职场文书
进口业务员岗位职责
2014/04/06 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
优秀党支部申报材料
2014/12/24 职场文书
职工培训工作总结
2015/08/10 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
python中的3种定义类方法
2021/11/27 Python
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python
Redis主从复制操作和配置详情
2022/09/23 Redis