使用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 相关文章推荐
使用变量动态设置js的属性名
Oct 19 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
微信小程序全局变量功能与用法详解
Jan 22 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 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实现的封装验证码类详解
2013/06/18 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
分享php邮件管理器源码
2016/01/06 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
JavaScript中常见陷阱小结
2010/04/27 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
Javascript中的 “&amp;” 和 “|” 详解
2017/02/02 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
详解Python if-elif-else知识点
2018/06/11 Python
Django如何自定义分页
2018/09/25 Python
python找出完数的方法
2018/11/12 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python实现简单井字棋游戏
2020/03/04 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
个人简历自我评价八例
2013/10/31 职场文书
技术学校毕业生求职信分享
2013/12/02 职场文书
代办委托书怎么写
2014/08/01 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
走近毛泽东观后感
2015/06/04 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
Vue如何清空对象
2022/03/03 Vue.js