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 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
微信小程序自定义胶囊样式
Dec 27 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
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
Python操作MongoDB详解及实例
2017/05/18 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
通俗讲解python 装饰器
2020/09/07 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
汽修专业自荐信
2014/07/07 职场文书
社会实践的活动方案
2014/08/22 职场文书
小学生校园广播稿
2014/09/28 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
小学生作文批改评语
2014/12/25 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
公司给客户的感谢信
2015/01/23 职场文书
微信搭讪开场白
2015/05/28 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
如何利用python实现列表嵌套字典取值
2022/06/10 Python