js实现循环体中的计时器

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

转载于:https://my.oschina.net/u/3024515/blog/795834

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值