使用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 相关文章推荐
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 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
简单的过滤字符串中的HTML标记
2006/12/25 PHP
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
js实现密码强度检验
2017/01/15 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
C#中的验证控件有几种
2014/03/08 面试题
Java程序开发中如何应用线程
2016/03/03 面试题
农民工创业典型事迹
2014/01/25 职场文书
大学生村官演讲稿
2014/04/25 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL