js倒计时显示实例

2019-11-26,,,

话不多说,请看实例代码

<!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实现倒计时(天数、时、分、秒)
  • PHP+JS实现的商品秒杀倒计时用法示例
  • js实现倒计时及时间对象
  • JS实现根据用户输入分钟进行倒计时功能
  • JS实现用户注册时获取短信验证码和倒计时功能
  • js制作支付倒计时页面
  • JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
  • 最全面的JS倒计时代码
  • js发送短信倒计时的简单实现方法
  • 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)

《js倒计时显示实例.doc》

下载本文的Word格式文档,以方便收藏与打印。