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 相关文章推荐
关于JavaScript的gzip静态压缩方法
Jan 05 Javascript
tbody元素支持嵌套的注意方法
Mar 24 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
python利用datetime模块计算时间差
2015/08/04 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
python实现猜单词小游戏
2020/05/22 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
wxPython实现绘图小例子
2019/11/19 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
J2EE面试题大全
2016/08/06 面试题
便利店投资的创业计划书
2014/01/12 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
2015年新教师工作总结
2015/04/28 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS
Element实现动态表格的示例代码
2021/08/02 Javascript
浅谈如何保证Mysql主从一致
2022/03/13 MySQL