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 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
JavaScript关于select的相关操作说明
Jan 13 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
PHP常用代码
2006/11/23 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
php中error与exception的区别及应用
2014/07/28 PHP
php网页病毒清除类
2014/12/08 PHP
php建立Ftp连接的方法
2015/03/07 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
Python中splitlines()方法的使用简介
2015/05/20 Python
python实现下载文件的三种方法
2017/02/09 Python
基于python绘制科赫雪花
2018/06/22 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
python实现图片批量压缩程序
2018/07/23 Python
python框架中flask知识点总结
2018/08/17 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
婚礼主持词开场白
2014/03/13 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
小学新教师个人总结
2015/02/05 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书