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 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
php对象在内存中的存在形式分析
2015/02/03 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
javascript实现数独解法
2015/03/14 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
python局部赋值的规则
2013/03/07 Python
python中去空格函数的用法
2014/08/21 Python
python实现封装得到virustotal扫描结果
2014/10/05 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
设备管理实施方案
2014/05/31 职场文书