使用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 相关文章推荐
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
document.forms用法示例介绍
Jun 26 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
大转盘抽奖小程序版 转盘抽奖网页版
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中的实现trim函数代码
2007/03/19 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
JavaScript 函数式编程的原理
2009/10/16 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
微信小程序 rich-text的使用方法
2017/08/04 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
Python 操作文件的基本方法总结
2017/08/10 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
Python json转字典字符方法实例解析
2020/04/13 Python
爱游人:Travelliker
2017/09/05 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
大专毕业生自我鉴定
2013/11/21 职场文书
生物制药自我鉴定
2014/01/25 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
医德医风演讲稿
2014/05/20 职场文书
医者仁心观后感
2015/06/17 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电