js实现循环体中的计时器
js实现循环体中的计时器
冉小喵 发表于1年前
js实现循环体中的计时器
  • 发表于 1年前
  • 阅读 134
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】买域名送云解析+SSL证书+建站!>>>   

<c:forEach var="teacher" items="${teacherList}">
    <p class="lecture_name">学生姓名${teacher.createName}<span>(${teacher.gradeName})</span></p>
    <p class="lecture_student_num">已用时:<span id="time_${teacher.guid}"></span></p>  //此处显示计时器
    <input type="hidden" class="guid_hidden" value="${teacher.guid}">  //用来标志循环体内每个不同的值
    <input type="hidden" id="time_hidden_${teacher.guid}" value="${teacher.createTime}">   //初始时间
    <script type="text/javascript">
        var myVar;
        startTimer();
        function startTimer(){    // setInterval() 间隔指定的毫秒数不停地执行指定的代码
            myVar=setInterval(function(){myTimer()},1000);  //1000为1秒执行一次,3000为3秒执行一次
        }
        function myTimer(){    //执行函数
            var now_time = Date.parse(new Date());   //结束时间,此处取系统时间
            var guids = $(".guid_hidden");   //获取所有循环体内的标志,并循环加以使用
            for(var i=0;i<guids.length;i++){
                var guid = $(guids[i]).val();
                var create_time = $("#time_hidden_" + guid).val();
                var time = (now_time - create_time)/1000;        //计时的时间计算,用时间戳/1000
                var s = time % 60; // 秒
                var m = ((time - s) / 60 )% 60; // 分钟
                var h =  (((time - s) / 60 - m ) / 60 )% 24; // 小时
                var d =  (((time - s) / 60 - m ) / 60 - h ) / 24 // 天
                if(d == 0){    //判断,为0不显示,页面美观
                    if(h == 0){
                        if(m == 0){
                            document.getElementById("time_" + guid).innerHTML=s + "秒";
                            continue;
                        }
                        document.getElementById("time_" + guid).innerHTML= m + "分" + s + "秒";
                        continue;
                     }
                     document.getElementById("time_" + guid).innerHTML= h + "小时" + m + "分" + s + "秒";
                     continue;
                 }
                 document.getElementById("time_" + guid).innerHTML=d + "天" + h + "小时" + m + "分" + s + "秒";
            }
      }
      </script>             
</c:forEach>
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 12
码字总数 2140
×
冉小喵
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: