实现页面的多个倒计时效果


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery实现页面的多个倒计时title>
head>
<body>
<script src="jquery-1.7.1.min.js" type="text/javascript" charset="utf-8">script>
<script>
$(function(){
	updateEndTime();
});
function updateEndTime(){
   var NowTime = new Date();
   var time = NowTime.getTime(); 
 $(".settime").each(function(I){
 var endDate =this.getAttribute("endTime"); //结束时间字符串
 //转换为时间日期类型
 var endDate1 = eval('new Date(' + endDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');
 var endTime = endDate1.getTime(); //结束时间毫秒数
 var lag = (endTime - time) / 1000; //当前时间和结束时间之间的秒数
if(lag > 0){
 var second = Math.floor(lag % 60);     
 var minite = Math.floor((lag / 60) % 60);
 var hour = Math.floor((lag / 3600) % 24);
 var day = Math.floor((lag / 3600) / 24);
 $(this).html(day+"天"+hour+"时"+minite+"分"+second+"秒");
}else{
 $(this).html("时间到了!!!");
}
});
   setTimeout("updateEndTime()",1000);
}
script>

<div class="settime" endTime="2016-04-08 17:36:00">div>
可以写在循环里,只要保持跟上面的ID一致就可以啦
<div class="settime" endTime="2016-04-10 00:00:00">div>
body>
html>

此为时分秒:::
<script src="jquery-1.7.1.min.js" type="text/javascript" charset="utf-8">script>
<script>
$(function(){
	updateEndTime();
});

function updateEndTime(){
   var NowTime = new Date();
   var time = NowTime.getTime(); 
 $(".settime").each(function(I){
 var endDate =this.getAttribute("endTime"); 
 var endDate1 = eval('new Date(' + endDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');
 var endTime = endDate1.getTime(); 
var lag =Math.floor((endTime - time) / 1000); 
if(lag > 0){var h = Math.floor(lag / 3600);var d = Math.floor(h/24);var m = Math.floor(lag/60%60);var s = lag%60;$(this).html(h +":"+m+":"+s);
}else{
	$(this).html("时间到");
}});
setTimeout("updateEndTime()",1000);}
script>

原生实现倒计时

	<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 显示倒计时时间 -->
    <div class="box"></div>

    <script>
        // 未来时间
        // 当前时间
        // 时间差
        // 转换天:时:分:秒
        function tm() {
            var timeEnd = new Date("2019/8/27 16:08:0");
            var timeStart = new Date();
            var t = Math.floor((timeEnd - timeStart) / 1000);
            // var d = Math.floor(t / 60 / 60 / 24);
            var h = Math.floor(t / 60 / 60 % 24);
            var m = Math.floor(t / 60 % 60);
            var s = Math.floor(t % 60);
            if (t > 0) {
                // var str = d + "天" + h + "时" + m + "分" + s + "秒";
                var str = h + "时" + m + "分" + s + "秒";
                document.querySelector(".box").innerHTML = str;
            }else{
                document.querySelector(".box").innerHTML = "活动结束。。。";
            }
        }
        // 倒计时
        setInterval(function () {
            tm()
        }, 1000)

    </script>


</body>

</html>

打赏作者:
实现页面的多个倒计时效果_第1张图片

你可能感兴趣的:(JS)