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 相关文章推荐
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
JS中Attr的用法详解
Oct 09 Javascript
vue实现树形菜单效果
Mar 19 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 Javascript
吃通javascript正则表达式
Apr 21 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
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
php跨服务器访问方法小结
2015/05/12 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
Three.js基础学习教程
2017/11/16 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
vue实现文件上传功能
2018/08/13 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
pyqt4教程之widget使用示例分享
2014/03/07 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
python 文件操作删除某行的实例
2017/09/04 Python
python最长回文串算法
2018/06/04 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
Python如何操作docker redis过程解析
2020/08/10 Python
python3判断IP地址的方法
2021/03/04 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
后勤人员自我鉴定
2013/10/20 职场文书
争论的故事教学反思
2014/02/06 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
感谢信怎么写
2015/01/21 职场文书
违纪检讨书范文
2015/01/27 职场文书
展览会邀请函
2015/02/02 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android