文档章节

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 是单线程、异步、非阻塞、解释型脚本语言。” 单线...

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

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

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

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

第三方支付接口
2014/11/30
0
0
[翻译]理解异步JavaScript

写在文章前 这篇文章是翻译自Sukhjinder Arora的 Understanding Asynchronous JavaScript。这篇文章描述了异步和同步JavaScript是如何在运行环境中,使用调用栈,消息队列,作业队列,以及事...

YukiSong
昨天
0
0
javascript计时器的工作原理解析

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

0000001
2011/05/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

微服务分布式事务实现

https://www.processon.com/view/link/5b2144d7e4b001a14d3d2d30

WALK_MAN
今天
2
0
《大漠烟尘》读书笔记及读后感文章3700字

《大漠烟尘》读书笔记及读后感文章3700字: 在这个浮躁的社会里,你有多久没有好好读完一本书了? 我们总觉得自己和别人不一样,所以当看到别人身上的问题时,很少有“反求诸己”,反思自己。...

原创小博客
今天
3
0
大数据教程(9.5)用MR实现sql中的jion逻辑

上一篇博客讲解了使用jar -jar的方式来运行提交MR程序,以及通过修改YarnRunner的源码来实现MR的windows开发环境提交到集群的方式。本篇博主将分享sql中常见的join操作。 一、需求 订单数据表...

em_aaron
今天
3
0
十万个为什么之什么是resultful规范

起源 越来越多的人开始意识到,网站即软件,而且是一种新型的软件。这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency)、高并发等特点...

尾生
今天
3
0
Terraform配置文件(Terraform configuration)

Terraform配置文件 翻译自Terraform Configuration Terraform用文本文件来描述设备、设置变量。这些文件被称为Terraform配置文件,以.tf结尾。这一部分将讲述Terraform配置文件的加载与格式。...

buddie
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部