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 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 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
ThinkPHP框架实现数据增删改
2017/05/07 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
python中defaultdict的用法详解
2017/06/07 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
C++面试题目
2013/06/25 面试题
教师师德教育的自我评价
2013/10/31 职场文书
医学院护理专业应届生求职信
2013/11/12 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
信访维稳工作汇报
2014/10/27 职场文书
追悼会悼词大全
2015/06/23 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python