使用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 学习笔记(十二) dom
Jan 21 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
详解Js模块化的作用原理和方案
Apr 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
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
python爬虫之百度API调用方法
2017/06/11 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
幼儿园父亲节活动方案
2014/03/11 职场文书
科技馆观后感
2015/06/08 职场文书
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
Python必备技巧之函数的使用详解
2022/04/04 Python
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL