使用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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
vue监听dom大小改变案例
Jul 29 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防止sql注入之过滤分页参数实例
2014/11/03 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
web 页面分页打印的实现
2009/06/22 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
使用pip发布Python程序的方法步骤
2018/10/11 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
Python timeit模块的使用实践
2020/01/13 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
利用python绘制正态分布曲线
2021/01/04 Python
深入探究HTML5的History API
2015/07/09 HTML / CSS
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
人力资源主管岗位职责
2014/01/29 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
公司放假通知怎么写
2015/04/15 职场文书
乒乓球比赛通知
2015/04/27 职场文书
秋菊打官司观后感
2015/06/03 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
KVM基础命令详解
2022/04/30 Servers