使用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 相关文章推荐
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
npm qs模块使用详解
Feb 07 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
php2html php生成静态页函数
2008/12/08 PHP
php 验证码制作(网树注释思想)
2009/07/20 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
js实现表格筛选功能
2017/01/18 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
详解vue axios二次封装
2018/07/22 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
实例讲解python函数式编程
2014/06/09 Python
python循环监控远程端口的方法
2015/03/14 Python
python同时给两个收件人发送邮件的方法
2015/04/30 Python
python matplotlib拟合直线的实现
2019/11/19 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
Python内置函数及功能简介汇总
2020/10/13 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
考核工作实施方案
2014/03/30 职场文书
初中中等生评语
2014/12/29 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS