文档章节

js实现循环体中的计时器

冉小喵
 冉小喵
发布于 2016/11/29 10:16
字数 304
阅读 136
收藏 0
<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
作品 0
私信 提问
总结:JavaScript异步、事件循环与消息队列、微任务与宏任务

前言 Philip Roberts 在演讲 great talk at JSConf on the event loop 中说:要是用一句话来形容 JavaScript,我可能会这样: “JavaScript 是单线程、异步、非阻塞、解释型脚本语言。” 单线...

正伟_
2018/11/12
0
0
来,哥教你提升逼格——EventLoop

开门见山,提升逼格从EventLoop开始!!! 毋庸置疑,大家都很了解js是一门单线程语言,这也就说明JS无法进行多线程,但是JS中异步的功能完全可以模拟多线程,而且效果还杠杠滴。当然,如果想...

小浪哥
2018/05/25
0
0
前端基本功(五):了解javascript的运行机制(单线程、任务队列、EventLoop、微任务、宏任务)

1. 单线程特点 单线程可以避免多线程操作带来的复杂的同步问题。 HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准...

大家都叫我四姨
06/13
0
0
通过 React Hooks 声明式地使用 setInterval

本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: 用起来没你想的简单。 Ryan Florence 在他的推文里面说到: 不少朋友跟我提起,setInterv...

腾讯云加社区
02/20
0
0
javascript引擎执行的过程的理解--执行阶段

一、概述 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍了语法分析和预编译阶段,那么我们先做个简单概括,如下: 1、语法分析: 分别对加载完成的代...

saucxs
05/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

双因素认证绕过的钓鱼工具

研究人员发布了两个工具——Muraen和NecroBrowser。它们可以自动绕过2FA进行钓鱼攻击,大多数防御措施都无法抵御它们。 渗透测试人员和攻击者为他们的武器库添加了一个新的工具,这种工具可以...

Linux就该这么学
24分钟前
1
0
java代码和js两种方式判断浏览器是否是IE11

java代码判断浏览器是否是IE11 HttpServletRequest request = ServletActionContext.getRequest();String agent = request.getHeader("User-Agent");//判断是IE浏览器而且不是IE11的时......

平凡三度
27分钟前
1
0
2019 Vue开发指南:你都需要学点啥?

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://dzone.com/articles/vue-development-in-2019-what-you-need-to-know 如果...

葡萄城技术团队
29分钟前
0
0
[gitlab]登录页定制

Administrator - 设置 https://blog.csdn.net/weixin_43606948/article/details/85222755 支持markdown,用###...

Danni3
38分钟前
2
0
IT兄弟连 Java语法教程 编写Java源代码

现在我们来一步一步的编写第一个Java程序,鼎鼎大名的“HelloWorld”。 编写Java源代码 编写Java源代码可以使用任何无格式的文本编辑器,在Windows操作系统上可以使用记事本、Edit Plus等程序...

老码农的一亩三分地
52分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部