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 去字符串空格终极版(支持utf8)
Nov 14 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 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
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
Python探索之修改Python搜索路径
2017/10/25 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
蔻驰法国官网:COACH法国
2018/11/14 全球购物
求职简历推荐信范文
2013/12/02 职场文书
读书之星事迹材料
2014/05/12 职场文书
技术股东合作协议书
2014/12/02 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
小学教师读书笔记
2015/07/01 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
学生病假条怎么写
2015/08/17 职场文书
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL