JavaScript实现学生在线做题计时器功能
更新时间：2018年12月05日 08:35:49 作者：believe__sss
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于微信小程序扫描普通二维码跳转到小程序指定页面操作的相关资料,为了分享方便,或者制作宣传海报之类的,经常需要用到微信小程序指定页面的二维码,让用户扫码直达页面,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了JavaScript中变量提升和函数提升的详解，文章通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
跟我学习javascript的循环，本文不仅针对javascript循环进行讲解，还对prototype补充了几点小tips，欢迎大家阅读。2015-11-11
这篇文章主要为大家详细介绍了js实现京东秒杀倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
最近接到需求,在小程序内部长按识别二维码添加个人微信,下面这篇文章主要给大家分析介绍了关于微信小程序长按识别二维码的几种情况,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了怎样用Javascript实现单例模式，想学习设计模式的同学，可以参考下2021-04-04
这篇文章主要介绍了详解处理bootstrap4不支持远程静态框问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了JS相册图片抖动放大展示效果的示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要为大家详细介绍了js轮盘抽奖实例，分析js轮盘抽奖实现原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
二维码作为现代信息传递的重要工具,其黑白色调一直是其标志性特征,然而,有时我们可能希望个性化定制二维码的颜色,以适应特定设计需求或提高可识别性,在这篇文章中,我们将深入探讨如何使用Canvas技术修改二维码的颜色,为二维码添加更多创意和个性2023-11-11
最新评论