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实现禁止后退的方法
Dec 27 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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脚本数据库功能详解(上)
2006/10/09 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
jQuery的学习步骤
2011/02/23 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
Mac下安装vue
2018/04/11 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
Python WEB应用部署的实现方法
2019/01/02 Python
python动态进度条的实现代码
2019/07/03 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
演讲稿怎么写才完美
2014/01/02 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
医院护士工作检讨书
2014/10/26 职场文书
2014年变电站工作总结
2014/12/19 职场文书
Nginx进程调度问题详解
2021/09/25 Servers
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记