简单的jquery倒计时案例完整代码

<!doctype html> <html> <head> <meta charset="utf-8"> <title>通俗易懂的jquery倒计时</title> <script src="http://libs.baidu.com/jquery/1.11.3/j...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通俗易懂的jquery倒计时</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
body {
background-color:black;
}
#box1 {
color:#fff;
font-size:30px;
text-align:center;
}
</style>
</head>
<body>
<!-- 放置定时器的盒子 -->
<div id="box1"></div>

<script>
$(function() {
    setInterval(timer, 1000);
    function timer() {
        //设置结束的时间
        var endtime = new Date("2080/04/22 00:00:00");
        //设置当前时间
        var now = new Date();
        //得到结束与当前时间差 : 毫秒
        var t = endtime.getTime() - now.getTime();
        if (t > 0) {
            //得到剩余天数
            var tian = Math.floor(t / 1000 / 60 / 60 / 24);
            //得到还剩余的小时数(不满一天的小时)
            var h = Math.floor(t / 1000 / 60 / 60 % 24);
            //得到分钟数
            var m = Math.floor(t / 1000 / 60 % 60);
            //得到的秒数
            var s = Math.floor(t / 1000 % 60);
            var str = "距离2080年04月22号:" + tian + " 天 " + h + " 小时  " + m + " 分 " + s + " 秒 ";
            $("#box1").html(str);
        } else {
            clearInterval(timer1); //这里可以添加倒计时结束后需要执行的事件 
            $("#box1").html("元旦已经结束");
        }
    }
});
</script>

</body>
</html>

attachments-2020-06-qhKRBLAv5ef6cbbdea3f4.png

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章