JavaScript实现学生在线做题计时器功能


Posted in Javascript onDecember 05, 2018

最近在项目中实现了一个学生在线做题的功能,其中需要记录学生的答题时间,所以就在前台写了个计时器

效果如下:

JavaScript实现学生在线做题计时器功能

HTML部分:

<div class="panel panel-default">
 <label>答题计时:</label><input type="text" name=""
 readonly="readonly" id="timer" style="border: none;">
</div>

JS部分:

<script type="text/javascript">
var n_timer = timer();
//计算学生的做题时间
 var ele_timer = document.getElementById("timer");
 var n_sec = 0; //秒
 var n_min = 0; //分
 var n_hour = 0; //时
 
 //60秒 === 1分
 //60分 === 1小时
 function timer() {
 return setInterval(function () {
 
 var str_sec = n_sec;
 var str_min = n_min;
 var str_hour = n_hour;
 if (n_sec < 10) {
 str_sec = "0" + n_sec;
 }
 if (n_min < 10) {
 str_min = "0" + n_min;
 }
 
 if (n_hour < 10) {
 str_hour = "0" + n_hour;
 }
 
 var time = str_hour + ":" + str_min + ":" + str_sec;
 ele_timer.value = time;
 n_sec++;
 if (n_sec > 59) {
 n_sec = 0;
 n_min++;
 }
 if (n_min > 59) {
 n_min = 0;
 n_hour++;
 }
 
 }, 1000);
 }
 
 
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 字符编码规则
May 04 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
详解angular element()方法使用
Apr 08 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 #Javascript
详解vue中async-await的使用误区
Dec 05 #Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 #Javascript
使用FormData实现上传多个文件
Dec 04 #Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 #Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 #Javascript
vue实现的双向数据绑定操作示例
Dec 04 #Javascript
You might like
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
python基于multiprocessing的多进程创建方法
2015/06/04 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
Python字典遍历操作实例小结
2019/03/05 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
Python接口开发实现步骤详解
2020/04/26 Python
python 实现音频叠加的示例
2020/10/29 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
幼儿园大班毕业感言
2014/02/06 职场文书
成立公司计划书
2014/05/07 职场文书
质检员岗位职责范本
2015/04/07 职场文书
辞职信格式范文
2015/05/13 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
HttpClient实现表单提交上传文件
2022/08/14 Java/Android