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 对话框和状态栏使用说明
Oct 25 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 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 加密解密内部算法
2010/04/22 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
js date 格式化
2017/02/15 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
Python reduce函数作用及实例解析
2020/05/08 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
电大自我鉴定
2013/10/27 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
个人违纪检讨书
2014/09/15 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
法院答辩状格式
2015/05/22 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
2019大学生实习报告
2019/06/21 职场文书
优秀大学生申请书
2019/06/24 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
解决xampp安装后Apache无法启动
2022/03/21 Servers