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的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
Vue如何将页面导出成PDF文件
Aug 17 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
PDO防注入原理分析以及注意事项
2015/02/25 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
JavaScript Date对象应用实例分享
2017/10/30 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
matplotlib设置legend图例代码示例
2017/12/19 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
人事专员岗位职责范本
2014/03/04 职场文书
家长对孩子的感言
2014/03/10 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
颐和园的导游词
2015/01/30 职场文书
党员身份证明材料
2015/06/19 职场文书
汽车销售员工作总结
2015/08/12 职场文书