js倒计时显示实例


Posted in Javascript onDecember 11, 2016

话不多说,请看实例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js倒计时显示-细数逝去的过往</title>
<style type="text/css">
#clock {
font: bold 24pt sans;
background-color: #f5f5f5;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
.demo {
position: absolute;
margin-left: 40%;
margin-top: 40%;
}
</style>
</head>
<body>
<div class="demo">
<center>
<h1>下班倒计时显示</h1>
</center>
<span id="clock"></span>
</div>
<script>
function displayTime() {
var elt = document.getElementById("clock");
if(leftTime < 0) {
elt.innerHTML = "Over";
} else {
var endTime = new Date("2016/11/21 18:00:00");
var now = new Date();
var leftTime = endTime.getTime() - now.getTime();
var ms = parseInt(leftTime % 1000).toString();
leftTime = parseInt(leftTime / 1000);
var o = Math.floor(leftTime / 3600);
var d = Math.floor(o / 24);
var m = Math.floor(leftTime / 60 % 60);
var s = leftTime % 60;
elt.innerHTML = o + "小时:" + m + "分:" + s + "秒:" + ms.charAt(0);
setTimeout(displayTime, 100);
}
}
displayTime();
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
基于jquery的监控数据是否发生改变
Apr 11 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
js实现继承的5种方式
Dec 01 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 #Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 #Javascript
JavaScript获取服务器时间的方法详解
Dec 11 #Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 #Javascript
AngularJS过滤器filter用法分析
Dec 11 #Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 #Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 #Javascript
You might like
解决中英文字符串长度问题函数
2007/01/16 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
jQuery示例收集
2010/11/05 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
python快速排序代码实例
2013/11/21 Python
Python实时获取cmd的输出
2015/12/13 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
Python 处理文件的几种方式
2019/08/23 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
党委书记个人对照检查材料
2014/09/15 职场文书
给校长的一封检讨书
2014/09/20 职场文书
自我检讨书范文
2015/01/28 职场文书
党员转正申请报告
2015/05/15 职场文书
导游词之唐山景点
2019/12/18 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
element tree树形组件回显数据问题解决
2022/08/14 Javascript
Python sklearn分类决策树方法详解
2022/09/23 Python