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 相关文章推荐
Opacity.js
Jan 22 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
Jquery-data的三种用法
Apr 18 jQuery
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
Python分类测试代码实例汇总
2020/07/23 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
Linux如何压缩可执行文件
2014/03/27 面试题
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
音乐专业自荐信
2014/02/07 职场文书
社会实践评语
2014/04/28 职场文书
促销活动总结范文
2014/04/30 职场文书
催款律师函范文
2015/05/27 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript