使用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 相关文章推荐
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
小程序自动化测试的示例代码
Aug 11 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
大转盘抽奖小程序版 转盘抽奖网页版
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模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
php实现将Session写入数据库
2015/07/26 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
toString()一个会自动调用的方法
2010/02/08 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
浅析JS运动
2015/12/28 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
python操作 hbase 数据的方法
2016/12/18 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
numpy.where() 用法详解
2019/05/27 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
python切割图片的示例
2020/11/12 Python
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
销售实习自我鉴定
2013/12/07 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
停水通知
2015/04/16 职场文书
2015年新教师工作总结
2015/04/28 职场文书
幼儿园见习总结
2015/06/23 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python