js倒计时显示实例
更新时间：2016年12月11日 14:37:47 作者：细数逝去的过往
本文分享了js倒计时显示的实例，需要的朋友可以参考借鉴，下面就跟小编一起来看看吧
话不多说，请看实例代码
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
首屏加载时间是一个衡量网页性能和用户体验的关键指标,这个问题无论是在面试中还是在项目开发中都占有极其高的权重,本文为大家整理了几种JS中优化首屏加载时间的方法,希望对大家有所帮助2024-02-02
怎么样让多个输入框中的内容同时变化？一般又要兼容IE与firefox2010-01-01
这篇文章主要介绍了JS实现IE状态栏文字缩放效果代码,涉及JavaScript针对浏览器的相关调用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要为大家详细介绍了五步轻松实现JavaScript HTML时钟效果的代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
两种方法的不同之处在于控件隐藏后是否还在页面上占位，详细的示例代码如下，大家可以感受下2013-10-10
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
这篇文章主要介绍了基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js的源码和使用方法，并附上一个使用ImageView.js的实例，这里分享给大家，有需要的小伙伴参考下。2015-03-03
要从列表框同时删除多个项目只能从下向上删除，这样就不会出现索引号乱变的问题了，下面有个不错的示例，大家可以感受下2013-10-10
推荐js实现商品分类到搜索栏友好提示（人机交互）...2007-05-05
随着async/await正式纳入ES7标准，越来越多的人开始研究据说是异步编程终级解决方案的 async/await。下面这篇文章主要给大家介绍了关于Js中async/await执行顺序的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-09-09
在本篇文章中我们给大家分享了关于javascript动态创建对象的属性的相关知识点以及代码分享，需要的朋友们参考学习下。2018-11-11
最新评论