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 select下拉框操作的一些说明
Apr 02 Javascript
js Event对象的5种坐标
Sep 12 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
vue实现在线翻译功能
Sep 27 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 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发电子邮件
2006/10/09 PHP
PHP操作文件方法问答
2007/03/16 PHP
mac下安装nginx和php
2013/11/04 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
js opener的使用详解
2014/01/11 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
js常用DOM方法详解
2017/02/04 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
在Django框架中编写Contact表单的教程
2015/07/17 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
小区门卫工作职责
2013/12/14 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
反腐倡廉标语
2014/06/24 职场文书
生日答谢词
2015/01/05 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
浅谈Python魔法方法
2021/06/28 Java/Android