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 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
原生js实现放大镜
Feb 20 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 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时间戳使用实例代码
2008/06/07 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
使用Python求解最大公约数的实现方法
2015/08/20 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
python复制文件到指定目录的实例
2018/04/27 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
django云端留言板实例详解
2019/07/22 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
电脑专业个人求职信范文
2014/02/04 职场文书
创业女性典型材料
2014/05/02 职场文书
创先争优承诺书
2015/01/20 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
工会工作个人总结
2015/03/03 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS