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 相关文章推荐
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
JS严格模式知识点总结
Feb 27 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
如何正确理解vue中的key详解
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 insert语法详解
2008/06/07 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python装饰器使用方法实例
2013/11/21 Python
python编写的最短路径算法
2015/03/25 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
python中提高pip install速度
2020/02/14 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
python speech模块的使用方法
2020/09/09 Python
公司请假条格式
2014/04/11 职场文书
八一建军节演讲稿
2014/09/10 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
幼师自荐信范文
2015/03/06 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android