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实现弹出层特效
Dec 22 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
js运动动画的八个知识点
Mar 12 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
详解javascript中的事件处理
Nov 06 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
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 sprintf()函数让你的sql操作更安全
2008/07/23 PHP
使用php来实现网络服务
2009/09/15 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
javascript 面向对象编程基础:继承
2009/08/21 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
python实现视频压缩功能
2020/12/18 Python
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
大学毕业登记表自我鉴定
2013/10/09 职场文书
新闻编辑自荐信
2013/11/03 职场文书
转让协议书范本
2014/04/15 职场文书
学校端午节活动方案
2014/08/23 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
玄武湖导游词
2015/02/05 职场文书
小学中队委竞选稿
2015/11/20 职场文书