js實現(xiàn)簡易計數(shù)器功能

更新時間：2022年08月08日 17:18:16 作者：小智RE0

這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)計數(shù)器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)簡易計數(shù)器功能的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)簡易計數(shù)器

可進(jìn)行三個操作,開始計數(shù),暫停計數(shù),復(fù)位操作

(使用計時函數(shù)事件)

<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>簡易計數(shù)練習(xí)</title>
?? ??? ?<style type="text/css">
?? ??? ??? ?/* 取消瀏覽器默認(rèn)屬性 */
?? ??? ??? ?*{
?? ??? ??? ??? ?margin: 0px;
?? ??? ??? ??? ?padding: 0px;
?? ??? ??? ?}
?? ??? ??? ?/* 設(shè)置span標(biāo)簽位置 */
?? ??? ??? ?#inputID{
?? ??? ??? ??? ?width: 300px;
?? ??? ??? ??? ?height: 60px;
?? ??? ??? ??? ?/* 字體居中 */
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?/* 字體大小*/
?? ??? ??? ??? ?font-size: 50px;
?? ??? ??? ??? ?/*字體顏色*/
?? ??? ??? ??? ?color: coral;
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?<script type="text/javascript">
?? ??? ??? ? //計數(shù);
?? ??? ??? ? var num=0;
?? ??? ??? ? function count(){
?? ??? ??? ??? ? //獲取輸入框?qū)ο?
?? ??? ? ? ? ? ? var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ? inputobj.value=num;
?? ??? ??? ??? ? num++;
?? ??? ??? ? }
?? ??? ??? ? //計時器變量;
?? ??? ??? ? var timing;
?? ??? ??? ?//開始計數(shù);
?? ??? ??? ?function start(){
?? ??? ??? ??? ?//設(shè)置計時器, 1 秒執(zhí)行一次計數(shù)函數(shù)count();
?? ??? ??? ??? ?timing=setInterval("count()",1000);
?? ??? ??? ?}
?? ??? ??? ?//停止計數(shù);
?? ??? ??? ?function stop(){
?? ??? ??? ??? ?//停止執(zhí)行計時器;
?? ??? ??? ? ? ?clearInterval(timing);
?? ??? ??? ?}
?? ??? ??? ?//復(fù)位(即將輸入框的內(nèi)容值變?yōu)樵瓉淼臄?shù)值);
?? ??? ??? ?function restoration(){
?? ??? ??? ??? ?//停止執(zhí)行計時器;
?? ??? ??? ??? ?clearInterval(timing);
?? ??? ??? ??? ?var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ?//將輸入框的值復(fù)位為0;
?? ??? ??? ??? ?inputobj.value=0;
?? ??? ??? ??? ?//將計數(shù)的num值也復(fù)位;
?? ??? ??? ??? ?num=0
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ??? ?<!--使用只讀的輸入框顯示計數(shù)-->
?? ??? ??? ?<h3>簡易計數(shù)器</h3>
?? ??? ??? ?<input type="text" id="inputID" value="0" readonly="readonly" /><hr/>
?? ??? ??? ?<input type="button" value="開始計數(shù)" onclick="start()" style="font-size: 20px;"/>
?? ??? ??? ?<input type="button" value="停止計時" onclick="stop()" ?style="font-size: 20px;"/>
?? ??? ??? ?<input type="button" value="復(fù)位" ? ?onclick="restoration()" style="font-size: 20px;"/>
?? ?</body>
</html>

效果：

優(yōu)化計數(shù)練習(xí)

為了防止重復(fù)點(diǎn)擊開始按鈕;而造成計數(shù)器重復(fù)操作,出現(xiàn)時間間隔問題;在點(diǎn)擊開始按鈕后,就禁用開始按鈕組件;當(dāng)點(diǎn)擊停止按鈕或者復(fù)位按鈕時,恢復(fù)開始按鈕組件.

<html>
<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>簡易計數(shù)練習(xí)</title>
?? ??? ?<style type="text/css">
?? ??? ??? ?/* 取消瀏覽器默認(rèn)屬性 */
?? ??? ??? ?*{
?? ??? ??? ??? ?margin: 0px;
?? ??? ??? ??? ?padding: 0px;
?? ??? ??? ?}
?? ??? ??? ?/* 設(shè)置span標(biāo)簽位置 */
?? ??? ??? ?#inputID{
?? ??? ??? ??? ?width: 300px;
?? ??? ??? ??? ?height: 60px;
?? ??? ??? ??? ?/* 字體居中 */
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?/* 字體大小*/
?? ??? ??? ??? ?font-size: 50px;
?? ??? ??? ??? ?color: coral;
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?<script type="text/javascript">
?? ??? ??? ? //計數(shù);
?? ??? ??? ? var num=0;
?? ??? ??? ? function count(){
?? ??? ??? ??? ? //獲取輸入框?qū)ο?
?? ??? ? ? ? ? ? var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ? inputobj.value=num;
?? ??? ??? ??? ? num++;
?? ??? ??? ? }
?? ??? ??? ? //計時器變量;
?? ??? ??? ? var timing;
?? ??? ??? ?//開始計數(shù);
?? ??? ??? ?function start(){
?? ??? ??? ??? ?//設(shè)置計時器, 1 秒執(zhí)行一次計數(shù)函數(shù)count();
?? ??? ??? ??? ?timing=setInterval("count()",1000);
?? ??? ??? ??? ?//點(diǎn)擊開始后,禁用開始按鈕;
?? ??? ??? ??? ?document.getElementById("startbtn").disabled=true;
?? ??? ??? ?}
?? ??? ??? ?//停止計數(shù);
?? ??? ??? ?function stop(){
?? ??? ??? ??? ?//停止執(zhí)行計時器;
?? ??? ??? ? ? ?clearInterval(timing);
?? ??? ??? ??? ?//點(diǎn)擊停止時;恢復(fù)開始按鈕的使用;
?? ??? ??? ??? ?document.getElementById("startbtn").disabled=false;
?? ??? ??? ?}
?? ??? ??? ?//復(fù)位(即將輸入框的內(nèi)容值變?yōu)樵瓉淼臄?shù)值);
?? ??? ??? ?function restoration(){
?? ??? ??? ??? ?//停止執(zhí)行計時器;
?? ??? ??? ??? ?clearInterval(timing);
?? ??? ??? ??? ?var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ?//將輸入框的值復(fù)位為0;
?? ??? ??? ??? ?inputobj.value=0;
?? ??? ??? ??? ?//將計數(shù)的num值也復(fù)位;
?? ??? ??? ??? ?num=0
?? ??? ??? ??? ?//點(diǎn)擊復(fù)位按鈕后,同時也恢復(fù)開始按鈕的使用;
?? ??? ??? ??? ?document.getElementById("startbtn").disabled=false;
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ??? ?<!--使用只讀的輸入框顯示計數(shù)-->
?? ??? ??? ?<h3>簡易計數(shù)器</h3>
?? ??? ??? ?<input type="text" id="inputID" value="0" readonly="readonly" /><hr/>
?? ??? ? ? ?<input type="button" id="startbtn" value="開始計數(shù)" onclick="start()" style="font-size: 20px;"/>
?? ??? ??? ?<input type="button" value="停止計數(shù)" onclick="stop()" ?style="font-size: 20px;"/>
?? ??? ??? ?<input type="button" value="復(fù)位" ? ?onclick="restoration()" style="font-size: 20px;"/>
?? ?</body>
</html>

效果：

將開始按鈕與停止按鈕布局在同一個位置

<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>簡易計數(shù)練習(xí)</title>
?? ??? ?<style type="text/css">
?? ??? ??? ?/* 取消瀏覽器默認(rèn)屬性 */
?? ??? ??? ?*{
?? ??? ??? ??? ?margin: 0px;
?? ??? ??? ??? ?padding: 0px;
?? ??? ??? ?}
?? ??? ??? ?/* 設(shè)置span標(biāo)簽位置 */
?? ??? ??? ?#inputID{
?? ??? ??? ??? ?width: 300px;
?? ??? ??? ??? ?height: 60px;
?? ??? ??? ??? ?/* 字體居中 */
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?/* 字體大小*/
?? ??? ??? ??? ?font-size: 50px;
?? ??? ??? ??? ?color: coral;
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?<script type="text/javascript">
?? ??? ??? ? //計時器變量;
?? ??? ??? ? var timing;
?? ??? ??? ?//開始計數(shù);
?? ??? ??? ?function start(){
?? ??? ??? ??? ?//獲取開始按鈕的對象;
?? ??? ??? ??? ?var startobj=document.getElementById("startbtn");
?? ??? ??? ??? ?//對按鈕的內(nèi)容進(jìn)行判斷;
?? ??? ??? ??? ?if(startobj.value=="開始計數(shù)"){
?? ??? ??? ??? ?//設(shè)置計時器, 1 秒執(zhí)行一次計數(shù)函數(shù)count();
?? ??? ??? ??? ?timing=setInterval("count()",1000);
?? ??? ??? ??? ?//將按鈕值變?yōu)橥Ｖ?
?? ??? ??? ??? ?startobj.value="暫停計數(shù)";
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?//當(dāng)按鈕值為暫停時;停止計數(shù);
?? ??? ??? ??? ??? ?clearInterval(timing);
?? ??? ??? ??? ??? ?//將按鈕值變?yōu)殚_始;
?? ??? ??? ??? ??? ?startobj.value="開始計數(shù)";
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ? //計數(shù);
?? ??? ??? ? var num=0;
?? ??? ??? ? function count(){
?? ??? ??? ??? ? //獲取輸入框?qū)ο?
?? ??? ? ? ? ? ? var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ? inputobj.value=num;
?? ??? ??? ??? ? num++;
?? ??? ??? ? }
?? ??? ??? ?
?? ??? ??? ?//復(fù)位(即將輸入框的內(nèi)容值變?yōu)樵瓉淼臄?shù)值);
?? ??? ??? ?function restoration(){
?? ??? ??? ??? ?var inputobj=document.getElementById("inputID");
?? ??? ??? ??? ?//將輸入框的值復(fù)位為0;
?? ??? ??? ??? ?inputobj.value=0;
?? ??? ??? ??? ?//將計數(shù)的num值也復(fù)位;
?? ??? ??? ??? ?num=0
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ??? ?<!--使用只讀的輸入框顯示計數(shù)-->
?? ??? ??? ?<h3>簡易計數(shù)器</h3>
?? ??? ??? ?<input type="text" id="inputID" value="0" readonly="readonly" /><hr/>
?? ??? ??? ?<input type="button" value="開始計數(shù)" id="startbtn" onclick="start()" style="font-size: 20px;"/>
?? ??? ??? ?<input type="button" value="復(fù)位" ? ?onclick="restoration()" style="font-size: 20px;"/>
?? ?</body>
</html>

效果：