使用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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 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 download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
js中小数转换整数的方法
2014/01/26 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
Django admin美化插件suit使用示例
2017/12/12 Python
Python实现端口检测的方法
2018/07/24 Python
python感知机实现代码
2019/01/18 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
python学习笔记之多进程
2020/08/06 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
社区志愿者活动总结
2014/06/26 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
Python爬虫基础讲解之请求
2021/05/13 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers