文档章节

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
来,哥教你提升逼格——EventLoop

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

小浪哥
05/25
0
0
JavaScript的计时器的工作原理

最近都在看一些JavaScript原理层面的文章,恰巧看到了jQuery的作者的一篇关于JavaScript计时器原理的解析,于是诚惶诚恐地决定把原文翻译成中文,一来是为了和大家分享,二来是为了加深自己对...

第三方支付接口
2014/11/30
0
0
javascript计时器的工作原理解析

代码使用方法: 说明:这篇文章节选自John Resig 的《Secrets of the JavaScript Ninja》一书,本人翻译只是供大家学习,翻译不足之处,请斧正。 这篇文章主要从下面几个方面解读计时器: 计...

0000001
2011/05/13
0
0
Javascript 异步实现机制

Javascript 单线程指的是在一个浏览器进程中只存在一个 Javascript 执行线程,所以任务需要顺序排列等待执行,而不能像 Java 等多线程语言一样并发执行。但是这种单线程模型在处理耗时的异步...

木头先生
2017/12/11
0
0
Javascript 定时器篇 setTimeout和setInterval

标题定时器,让我想起了年代久远的VB,那时候也有个定时器,长的跟闹钟一样()相信跟我一样用过VB的人都不陌生。很基础的东西,但是作用却很大。记得那时候我还不太会用,忘记是用来做动画了...

九阁网趣
2015/03/06
0
1

没有更多内容

加载失败,请刷新页面

加载更多

Mac OS X下Maven的安装与配置

Mac OS X 安装Maven: 下载 Maven, 并解压到某个目录。例如/Users/robbie/apache-maven-3.3.3 打开Terminal,输入以下命令,设置Maven classpath $ vi ~/.bash_profile 添加下列两行代码,之后...

TonyStarkSir
今天
3
0
关于编程,你的练习是不是有效的?

最近由于工作及Solution项目的影响,我在重新学习DDD和领域建模的一些知识。然后,我突然就想到了这个问题,以及我是怎么做的? 对于我来说,提升技能的项目会有四种: 纯兴趣驱动的项目。即...

问题终结者
今天
3
0
打开eclipse出现an error has occurred see the log file

解决方法: 1,打开eclipse安装目录下的eclipse.ini文件; 2,打开的文本文件最后添加一行 --add-modules=ALL-SYSTEM 3,保存重新打开Eclipse。...

任梁荣
昨天
4
0
搞定Northwind示例数据库,无论哪个版本的SQLServer都受用

Northwind数据库 从这里可以找到突破口: http://social.msdn.microsoft.com/Forums/zh-CN/Vsexpressvb/thread/8490a1c6-9018-40c9-aafb-df9f79d29cde 下面是MSDN: http://msdn2.microsoft......

QQZZFT
昨天
1
0
mysql主从同步,安装配置操作

准备 两台mysql服务,我这里准备了如下: 主库:192.168.176.128 从库:192.168.176.131 如何在Linux上安装mysql服务,请看https://blog.csdn.net/qq_18860653/article/details/80250499 操作...

小致dad
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部