使用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中Eval函数的使用说明
Oct 11 Javascript
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
php图片验证码代码
2008/03/27 PHP
php 文章采集正则代码
2009/12/28 PHP
关于crontab的使用详解
2013/06/24 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
JS实现图片翻书效果示例代码
2013/09/09 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
JS实现百度搜索框
2021/02/25 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
使用python实现tcp自动重连
2017/07/02 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
python读取mysql数据绘制条形图
2020/03/25 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
Python csv文件记录流程代码解析
2020/07/16 Python
python如何爬取网页中的文字
2020/07/28 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
村委会贫困证明
2014/01/14 职场文书
教育学习自我评价
2014/02/03 职场文书
化妆品店促销方案
2014/02/24 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
教师思想工作总结2015
2015/05/13 职场文书
行政申诉状范文
2015/05/20 职场文书