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 编程引入命名空间的方法
Jun 29 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 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 多维数组排序实现代码
2009/08/05 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
班组长的岗位职责
2013/12/09 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
爱心倡议书范文
2014/05/12 职场文书
具结保证书
2015/01/17 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
一篇文章带你复习java知识点
2021/06/28 Java/Android