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之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
vue渲染方式render和template的区别
Jun 05 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中正确的使用json
2013/08/06 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
微信小程序联网请求的轮播图
2017/07/07 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
jQuery解析json格式数据示例
2018/09/01 jQuery
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
用JS实现选项卡
2020/03/23 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
python使用xmlrpc实例讲解
2013/12/17 Python
Python ldap实现登录实例代码
2016/09/30 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
python web框架中实现原生分页
2019/09/08 Python
python如何实现word批量转HTML
2020/09/30 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
软件缺陷的分类都有哪些
2014/08/22 面试题
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
小班下学期评语
2014/05/04 职场文书
专题组织生活会方案
2014/06/15 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
深入浅析React中diff算法
2021/05/19 Javascript
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏