使用javascript做时间倒数读秒功能的实例


Posted in Javascript onJanuary 23, 2019

某个试卷在线考试需要读秒。网上找了一会就是没找到我想要的。只好自己改改网上的,这也用用,那也用用。

其他代码不贴了。贴相关的:

html页面代码:

<a class="btn btn-default" onclick="StartExamine();">开始</a> 
<div id="TimeClock" class="col-md-4" ><span class="text-danger hour">00</span> <span class="text-danger minute">00</span> <span class="text-danger seconds">00</span></div>

作为一个显示倒数的div层

javascript 代码:

var gEaminePapeId = 'dfdfad33434342';
    var gExaminePapeTime = '100';    
    var gHour = gExaminePapeTime / 60;    
    var gMinute = gExaminePapeTime % 60; 
    var gSeconds = gExaminePapeTime * 60;
    var hour_elem = $("#TimeClock").find('.hour');
    var minute_elem = $("#TimeClock").find('.minute');
    var second_elem = $("#TimeClock").find('.seconds');
    function StartExamine() { 
      //开始计时      
      var timeClik = setInterval('ShowClock()', 1000);
   }
   function ShowClock() {    
     if (gSeconds > 1) {
       gSeconds -= 1;
       var hour = Math.floor((gSeconds / 3600) % 24);
       var minute = Math.floor((gSeconds / 60) % 60);
       var second = Math.floor(gSeconds % 60);
       $(hour_elem).text(hour < 10 ? "0" + hour+":" : hour+":"); //计算小时
       $(minute_elem).text(minute < 10 ? "0" + minute+":" : minute+":"); //计算分钟
       $(second_elem).text(second < 10 ? "0" + second : second); //计算秒杀
     }
     else {
       clearInterval(timeClik);
       //做题时间到
        ForceSubmit();
     }
   }   
    function ForceSubmit() {
      //强制提交答题
  }

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
前端 javascript 实现文件下载的示例
Nov 24 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 #Javascript
javascript json字符串到json对象转义问题
Jan 22 #Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 #Javascript
微信小程序实现九宫格抽奖
Apr 15 #Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 #Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 #Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 #Javascript
You might like
PHP个人网站架设连环讲(二)
2006/10/09 PHP
用PHP实现维护文件代码
2007/06/14 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
python list转矩阵的实例讲解
2018/08/04 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
管道维修工岗位职责
2013/12/27 职场文书
户外宣传策划方案
2014/05/25 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
法人代表资格证明书
2015/06/18 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
新学期家长寄语2016
2015/12/03 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python