脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现计时器功能

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数

    JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数

    这篇文章主要介绍了JavaScript -- JSON.parse 函数 和 JSON.stringify 函数,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-12-12
  • JavaScript实现获取图片文件真实格式的示例代码

    JavaScript实现获取图片文件真实格式的示例代码

    每种格式的图片，都有自己特有的优缺点以及数据结构，本篇博文的目的就是基于不同格式的图像二进制数据，获取到图片的真实格式，感兴趣的可以了解一下
    2023-02-02
  • JavaScript中的console.profile()函数详细介绍

    JavaScript中的console.profile()函数详细介绍

    这篇文章主要介绍了JavaScript中的console.profile()函数详细介绍,本文讲解了console.profile()函数的浏览器支持情况、console.profile()的使用、Firebug中Profile按钮的使用等内容,需要的朋友可以参考下
    2014-12-12
  • 配置eslint规范项目代码风格

    配置eslint规范项目代码风格

    这篇文章主要介绍了配置eslint规范项目代码风格，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • JavaScript数据结构之链表的实现

    JavaScript数据结构之链表的实现

    链表是一种常见的数据结构。它是动态地进行存储分配的一种结构。本文主要介绍JavaScript数据结构中链表的实现，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript函数Call、Apply原理实例解析

    JavaScript函数Call、Apply原理实例解析

    这篇文章主要介绍了JavaScript函数Call、Apply原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • 经典的间隔时间滚动新闻（图片），可控制滚动

    经典的间隔时间滚动新闻（图片），可控制滚动

    经典的间隔时间滚动新闻（图片），可控制滚动 其实这个也挺多网站用到的，简单又实用。(
    2010-05-05
  • 小程序实现轮播图

    小程序实现轮播图

    这篇文章主要为大家详细介绍了小程序实现轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 前端防抖(Debounce)和节流(Throttle)的概念、区别、应用场景及实现方法

    前端防抖(Debounce)和节流(Throttle)的概念、区别、应用场景及实现方法

    这篇文章主要介绍了前端开发中常用的防抖（Debounce）和节流（Throttle）技术的相关资料,文章还提供了JavaScript的防抖和节流实现示例,并展示了如何在实际项目中结合使用这两种技术以达到最佳效果,需要的朋友可以参考下
    2025-01-01
  • 最全面的百度地图JavaScript离线版开发

    最全面的百度地图JavaScript离线版开发

    最全面的百度地图JavaScript离线版开发,这篇文章主要为大家详细介绍了JavaScript离线版开发的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09

最新评论