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 相关文章推荐
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 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
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
PHP导入导出Excel代码
2015/07/07 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Python subprocess库的使用详解
2018/10/26 Python
python中update的基本使用方法详解
2019/07/17 Python
python递归下载文件夹下所有文件
2019/08/31 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
电子商务专业个人的自我评价
2013/11/19 职场文书
学校后勤人员职责
2013/12/27 职场文书
迎元旦广播稿
2014/02/22 职场文书
高三家长寄语
2014/04/03 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
主持人演讲稿
2014/05/13 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书