快捷導(dǎo)航

JavaScript實(shí)現(xiàn)學(xué)生在線做題計(jì)時(shí)器功能

更新時(shí)間：2018年12月05日 08:35:49 作者：believe__sss

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)學(xué)生在線做題計(jì)時(shí)器功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近在項(xiàng)目中實(shí)現(xiàn)了一個(gè)學(xué)生在線做題的功能，其中需要記錄學(xué)生的答題時(shí)間，所以就在前臺(tái)寫了個(gè)計(jì)時(shí)器

效果如下：

HTML部分：

<div class="panel panel-default">
 <label>答題計(jì)時(shí)：</label><input type="text" name=""
 readonly="readonly" id="timer" style="border: none;">
</div>

JS部分：

<script type="text/javascript">
var n_timer = timer();
//計(jì)算學(xué)生的做題時(shí)間
 var ele_timer = document.getElementById("timer");
 var n_sec = 0; //秒
 var n_min = 0; //分
 var n_hour = 0; //時(shí)
 
 //60秒 === 1分
 //60分 === 1小時(shí)
 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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript 中 JSON.parse 函數(shù) 和 JSON.stringify 函數(shù)
這篇文章主要介紹了JavaScript -- JSON.parse 函數(shù) 和 JSON.stringify 函數(shù),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-12-12
JavaScript實(shí)現(xiàn)獲取圖片文件真實(shí)格式的示例代碼
每種格式的圖片，都有自己特有的優(yōu)缺點(diǎn)以及數(shù)據(jù)結(jié)構(gòu)，本篇博文的目的就是基于不同格式的圖像二進(jìn)制數(shù)據(jù)，獲取到圖片的真實(shí)格式，感興趣的可以了解一下
2023-02-02
JavaScript中的console.profile()函數(shù)詳細(xì)介紹
這篇文章主要介紹了JavaScript中的console.profile()函數(shù)詳細(xì)介紹,本文講解了console.profile()函數(shù)的瀏覽器支持情況、console.profile()的使用、Firebug中Profile按鈕的使用等內(nèi)容,需要的朋友可以參考下
2014-12-12
配置eslint規(guī)范項(xiàng)目代碼風(fēng)格
這篇文章主要介紹了配置eslint規(guī)范項(xiàng)目代碼風(fēng)格，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-03-03
JavaScript數(shù)據(jù)結(jié)構(gòu)之鏈表的實(shí)現(xiàn)
鏈表是一種常見的數(shù)據(jù)結(jié)構(gòu)。它是動(dòng)態(tài)地進(jìn)行存儲(chǔ)分配的一種結(jié)構(gòu)。本文主要介紹JavaScript數(shù)據(jù)結(jié)構(gòu)中鏈表的實(shí)現(xiàn)，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-03-03
JavaScript函數(shù)Call、Apply原理實(shí)例解析
這篇文章主要介紹了JavaScript函數(shù)Call、Apply原理實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
經(jīng)典的間隔時(shí)間滾動(dòng)新聞（圖片），可控制滾動(dòng)
經(jīng)典的間隔時(shí)間滾動(dòng)新聞（圖片），可控制滾動(dòng) 其實(shí)這個(gè)也挺多網(wǎng)站用到的，簡(jiǎn)單又實(shí)用。(
2010-05-05
小程序?qū)崿F(xiàn)輪播圖
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
前端防抖(Debounce)和節(jié)流(Throttle)的概念、區(qū)別、應(yīng)用場(chǎng)景及實(shí)現(xiàn)方法
這篇文章主要介紹了前端開發(fā)中常用的防抖（Debounce）和節(jié)流（Throttle）技術(shù)的相關(guān)資料,文章還提供了JavaScript的防抖和節(jié)流實(shí)現(xiàn)示例,并展示了如何在實(shí)際項(xiàng)目中結(jié)合使用這兩種技術(shù)以達(dá)到最佳效果,需要的朋友可以參考下
2025-01-01
最全面的百度地圖JavaScript離線版開發(fā)
最全面的百度地圖JavaScript離線版開發(fā),這篇文章主要為大家詳細(xì)介紹了JavaScript離線版開發(fā)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09