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 相关文章推荐
javascript 继承实现方法
Aug 26 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
js实现模拟购物商城案例
May 18 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数组去重比较快的实现方式
2016/01/19 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
使用js显示当前时间示例
2014/03/02 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
django使用xadmin的全局配置详解
2019/11/15 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
详解Python模块化编程与装饰器
2021/01/16 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
两年的个人工作自我评价
2014/01/10 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
结婚通知短信大全
2015/04/17 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL