javascript 實現(xiàn)一個簡單的帶毫秒的倒計時

Amos 發(fā)布于2019-08-21 10:35 / 1343人閱讀

摘要：最近做的一個微信端小游戲，通過搖一搖獲得金幣，這里有一個倒計時的幾秒鐘時間限制，帶有毫秒。把時間看成是不斷減少的數(shù)字，設(shè)定一個時間總數(shù)，如需要秒，總數(shù)就為，每隔毫秒減少分鐘為總數(shù)除以得到的整數(shù)，毫秒為當(dāng)前總數(shù)減去分鐘數(shù)乘以

最近做的一個微信端小游戲，通過搖一搖獲得金幣，這里有一個倒計時的幾秒鐘時間限制，帶有毫秒。

設(shè)計圖毫秒采用小數(shù)點后三位，我覺得兩位比較好看，所以改成了兩位的。
實現(xiàn)之前，我還是先在網(wǎng)上搜索了一下各種實現(xiàn)方法，有很多，常見的都是利用日期時間對象來解決。
所以我覺得這種有些過于繁瑣，畢竟這種小游戲時間單位數(shù)量級只有秒，就試著寫了一種簡單的方法。

https://jsfiddle.net/g35s9oy1/embedded/result,js,html,css/

這里使用了按鈕觸發(fā)，實際頁面是檢測手機搖晃觸發(fā)，因此也不需要暫停、恢復(fù), 有需要可以再添加。

思路解釋一下：
1. 1000毫秒為1秒，我這里是分鐘后面毫秒有兩位數(shù)，所以定時器間隔時間就設(shè)為10毫秒。
2. 把時間看成是不斷減少的數(shù)字，設(shè)定一個時間總數(shù)，如需要5秒，總數(shù)就為500，每隔10毫秒減少1
3. 分鐘為總數(shù)除以100得到的整數(shù)，毫秒為當(dāng)前總數(shù)減去分鐘數(shù)乘以100.

云服務(wù)器 GPU云服務(wù)器簡單的倒計時 js毫秒倒計時效果 js毫秒數(shù)倒計時簡單的javascript

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85820.html

相關(guān)文章

setTimeout 或者 setInterval，關(guān)于 Javascript 計時器：你需要知道的

摘要：所以，我們可以將理解為計時結(jié)束是執(zhí)行任務(wù)的必要條件，但是不是任務(wù)是否執(zhí)行的決定性因素。的意思是，必須超過毫秒后，才允許執(zhí)行。先來回答一下下面這個問題：對于 setTimeout(function() { console.log(timeout) }, 1000) 這一行代碼，你從哪里可以找到 setTimeout 的源代碼（同樣的問題還會是你從哪里可以看到 setInterval 的...

Warren 2019-08-26 10:55 評論0 收藏0
Javascript學(xué)習(xí)總結(jié) - JS基礎(chǔ)系列三

摘要：案例每隔毫秒調(diào)用函數(shù)并顯示時間。當(dāng)點擊按鈕時，停止時間代碼如下計時器每隔毫秒調(diào)用函數(shù)，并將返回值賦值給計時器計時器，在載入后延遲指定時間后去執(zhí)行一次表達式僅執(zhí)行一次。該值標識要取消的延遲執(zhí)行代碼塊。簡述本系列將持續(xù)更新Javascript基礎(chǔ)部分的知識，誰都想掌握高端大氣的技術(shù)，但是我覺得沒有一個扎實的基礎(chǔ)，我認為一切高階技術(shù)對我來講都是過眼云煙，要成為一名及格的前端工程師，必須把...

zlyBear 2019-08-19 17:07 評論0 收藏0
JS 異步的實現(xiàn)

摘要：由于引擎同一時間只執(zhí)行一段代碼這是由單線程的性質(zhì)決定的，所以每個代碼塊阻塞了其它異步事件的進行。這意味著瀏覽器將等待著一個新的異步事件發(fā)生。異步的任務(wù)執(zhí)行的順序是不固定的，主要看返回的速度。我們經(jīng)常說JS是單線程的，比如node.js研討會上大家都說JS的特色之一是單線程的，這樣使JS更簡單明了，可是大家真的理解所謂JS的單線程機制嗎？單線程時，基于事件的異步機制又該當(dāng)如何，這些知識...

sihai 2019-08-22 11:14 評論0 收藏0
javascript日期類型(Date)與php日期類型詳解

摘要：注意客戶端與服務(wù)器日期進行傳輸?shù)臅r候一般都是用大整數(shù)時間戳進行傳輸。前言一個網(wǎng)站的開發(fā)需要要UI、前端、后端三種工程師?，F(xiàn)在的企業(yè)在招聘前端工程師的時候一般都要求其了解或者掌握一些后端的知識。因此，此文章主要介紹javascript的日期類型，也粗略的介紹一下php的日期類型，以及二者是如何交互數(shù)據(jù)的。時間戳什么是時間戳時間戳是從格林威治時間1970年1月1日(00:0...

chemzqm 2019-08-22 11:09 評論0 收藏0
javascript日期類型(Date)與php日期類型詳解

摘要：注意客戶端與服務(wù)器日期進行傳輸?shù)臅r候一般都是用大整數(shù)時間戳進行傳輸。前言一個網(wǎng)站的開發(fā)需要要UI、前端、后端三種工程師。現(xiàn)在的企業(yè)在招聘前端工程師的時候一般都要求其了解或者掌握一些后端的知識。因此，此文章主要介紹javascript的日期類型，也粗略的介紹一下php的日期類型，以及二者是如何交互數(shù)據(jù)的。時間戳什么是時間戳時間戳是從格林威治時間1970年1月1日(00:0...

BDEEFE 2019-06-28 13:46 評論0 收藏0