jquery 实现同一页面，多个倒计时时间显示

恰好

已于 2025-02-14 17:22:26 修改

阅读量159

点赞数 2

文章标签： javascript

于 2025-02-14 17:21:53 首次发布

本文链接：https://blog.csdn.net/goolean/article/details/145638156

版权

废话不说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  
</head>
<body>



	<div class="timeStyle">剩余时间 <span class="count-down" data-share_time="75"></span></div>
	<div class="timeStyle">剩余时间 <span class="count-down" data-share_time="85"></span></div>
	<div class="timeStyle">剩余时间 <span class="count-down" data-share_time="35"></span></div>
<script>
$(document).ready(function() {
	order_expire_time();
});

// 倒计时计数
function checkTime(i){
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
// 获取所有的倒计时订单
function order_expire_time() {
    $('.timeStyle').each(function () {
       var _this = $(this).find('.count-down')
        var left_time_int =_this.data('share_time');
        _this.innerHTML="";
        _this.html(_this.innerHTML);
        console.log('初始时间',left_time_int)
        var setTimer = window.setInterval(function(){
            if(left_time_int >=0){
                //var dd = parseInt(left_time_int / 60 / 60 / 24, 10);//计算剩余的天数
               // var hh = parseInt(left_time_int / 60 / 60 % 24, 10);//计算剩余的小时数
                var mm = parseInt(left_time_int / 60 % 60, 10);//计算剩余的分钟数
                var ss = parseInt(left_time_int % 60, 10);//计算剩余的秒数
                //dd = checkTime(dd);
                //hh = checkTime(hh);
                mm = checkTime(mm);
                ss = checkTime(ss);
                //_this.innerHTML= dd + "天" + hh + "时" + mm + "分" + ss + "秒";
				_this.innerHTML= mm + ":" + ss + "";
                _this.html(_this.innerHTML)
                left_time_int = left_time_int - 1;
            }else{　　// 这里如果时间到了0，清除定时器
                clearInterval(setTimer);
	_this.innerHTML="0";

            }
         
        }, 1000); //间隔函数，1秒执行
    })
}
</script>
</body>
</html>