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

日期：2020-06-27 栏目：前端经验浏览：次

<!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>

转载注明出处：http://www.duanlonglong.com/qdjy/282.html

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

相关推荐