小程序?qū)崿F(xiàn)計時器功能
更新時間：2022年07月17日 09:06:38 作者：今天星期八
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)計時器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了小程序?qū)崿F(xiàn)計時器功能的具體代碼，供大家參考，具體內(nèi)容如下
效果圖如下
布局（.wxml）
<view class="countTime">{{timecount}}</view>
<button class="aaa" bindtap="start">開始</button>
<button class="aaa" bindtap="stop">暫停</button>
<button class="aaa" bindtap="Reset">停止</button>樣式（.css）
/* 小程序計時器 */
.countTime{
? height:200px;
? font-size:30px;
? line-height:200px;
? text-align: center;
}
.aaa{
? width:150px;
? background:rgb(7, 193, 96);
? color:#fff;
? margin-bottom:8px;
}效果（.js）
var init;
Page({
? data: {
? ? //小程序計時器
? ? hour:0,
? ? minute:0,
? ? second:0,
? ? millisecond:0,
? ? timecount:'00:00:00',
? ? cost:0,
? ? flag:1,
? ? endtime:"",
? },
? start:function(){
? ? clearInterval(init);
? ? var that=this;
? ? that.setData({
? ? ? hour:0,
? ? ? minute:0,
? ? ? second:0,
? ? ? millisecond:0
? ? })
? ? init=setInterval(function(){
? ? ? that.timer()
? ? },50);
? },
? stop:function(){
? ? clearInterval(init);
? },
? Reset:function(){
? ? var that=this;
? ? clearInterval(init);
? ? that.setData({
? ? ? hour:0,
? ? ? minute:0,
? ? ? second:0,
? ? ? millisecond:0,
? ? ? timecount:'00:00:00'
? ? })
? },
? timer:function(){
? ? var that = this;
? ? console.log(that.data.millisecond)
? ? that.setData({
? ? ? millisecond:that.data.millisecond+5
? ? })
? ? if(that.data.millisecond>=100){
? ? ? that.setData({
? ? ? ? millisecond:0,
? ? ? ? second:that.data.second + 1
? ? ? })
? ? }
? ? if(that.data.second >= 60){
? ? ? that.setData({
? ? ? ? second:0,
? ? ? ? minute:that.data.minute+1
? ? ? })
? ? }
? ? if(that.data.minute>=60){
? ? ? that.setData({
? ? ? ? minute:0,
? ? ? ? hour:that.data.hour+1
? ? ? })
? ? }
? ? that.setData({
? ? ? timecount:that.data.hour+":"+that.data.minute+":"+that.data.second+":"+that.data.millisecond
? ? })
? }
});注意的點： 在點擊啟動定時器按鈕時，多次連著點擊，會累加定時器，會造成定時器加速的效果，為了避免這種情況，應該在每次點擊開始前先清除一下定時器。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要講解了JavaScript異步解決處理方案，文章中有詳細的解決方案和代碼示例，需要的朋友參考一下2023-04-04
基于JS實現(xiàn)二維碼圖片固定在右下角某處并跟隨滾動條滾動
這篇文章主要介紹了基于JS實現(xiàn)二維碼圖片固定在右下角某處并跟隨滾動條滾動,代碼簡單易懂非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
javascript的alert box在java中如何顯示多行
這篇文章主要介紹了javascript的alert box在java中如何顯示多行,需要的朋友可以參考下2014-05-05
本篇文章主要主要介紹了基于webpack2.x的vue2.x的多頁面站點 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-08-08
微信小程序開發(fā)之數(shù)據(jù)存儲 參數(shù)傳遞 數(shù)據(jù)緩存
本文主要介紹了微信小程序開發(fā)之數(shù)據(jù)存儲、參數(shù)傳遞、數(shù)據(jù)緩存的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
js中foreach是用于遍歷數(shù)組的方法,將遍歷到的元素傳遞給回調(diào)函數(shù),遍歷的數(shù)組不能是空的要有值,下面這篇文章主要給大家介紹了關(guān)于JavaScript中forEach的錯誤用法,需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細介紹了一個值得分享的bootstrap table實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
頁面滾動加載事件，獲取元素在頁面里的top值根據(jù)滾動條的位置判斷何時顯示圖片；獲取元素集合 加載過的圖片從集合里刪除，具體實現(xiàn)如下，感興趣的朋友各位可以參考下哈2013-06-06
在每年的10月24日,我們都會慶祝程序員節(jié),這是一個向所有辛勤工作、創(chuàng)造出無數(shù)令人驚嘆應用和系統(tǒng)的程序員們致敬的日子,為了紀念這個特殊的日子,我們將通過編寫一個簡單的1024小游戲來向所有程序員們表示敬意,本文將詳細解釋如何使用JavaScript編寫這個小游戲2023-10-10
ant design中實現(xiàn)table的表格行的拖拽
這篇文章主要介紹了ant design中實現(xiàn)table的表格行的拖拽，文章圍繞table表格行拖拽實現(xiàn)的相關(guān)資料展開詳細的代碼內(nèi)容，具有一定的參考價值，需要的小伙伴可以參考一下2022-03-03