使用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 相关文章推荐
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 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
Syphon 秘笈
2021/03/03 冲泡冲煮
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
python基础教程项目四之新闻聚合
2018/04/02 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
python中return如何写
2020/06/18 Python
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
自荐信不宜过于夸大
2013/11/06 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
珍惜水资源建议书
2014/03/12 职场文书
创业融资计划书
2014/04/25 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
荒岛余生观后感
2015/06/09 职场文书
新员工入职感想
2015/08/07 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL