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调用
Jun 24 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
FCKeditor添加自定义按钮
2008/03/27 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
Angular路由简单学习
2016/12/26 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
跟老齐学Python之类的细节
2014/10/13 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
在python 中实现运行多条shell命令
2019/01/07 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
作文批改评语大全
2014/04/23 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技