小程序?qū)崿F(xiàn)計(jì)時(shí)器小功能
本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)計(jì)時(shí)器小功能的具體代碼,供大家參考,具體內(nèi)容如下
效果圖如下
布局(.wxml)
<view class="countTime">{{timecount}}</view> <button class="aaa" bindtap="start">開(kāi)始</button> <button class="aaa" bindtap="stop">暫停</button> <button class="aaa" bindtap="Reset">停止</button>
樣式(.css)
/* 小程序計(jì)時(shí)器 */ .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: { ? ? //小程序計(jì)時(shí)器 ? ? 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 ? ? }) ? } });
注意的點(diǎn): 在點(diǎn)擊啟動(dòng)定時(shí)器按鈕時(shí),多次連著點(diǎn)擊,會(huì)累加定時(shí)器,會(huì)造成定時(shí)器加速的效果,為了避免這種情況,應(yīng)該在每次點(diǎn)擊開(kāi)始前先清除一下定時(shí)器。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
原生JavaScript輪播圖實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了原生JavaScript輪播圖實(shí)現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08JavaScript計(jì)算字符串中每個(gè)字符出現(xiàn)次數(shù)的小例子
這篇文章介紹了在JS中計(jì)算字符串中每個(gè)字符出現(xiàn)的次數(shù),有需要的朋友可以參考一下2013-07-07用JavaScript實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了用JavaScript實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08JS+CSS實(shí)現(xiàn)類(lèi)似QQ好友及黑名單效果的樹(shù)型菜單
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)類(lèi)似QQ好友及黑名單效果的樹(shù)型菜單,涉及JavaScript結(jié)合鼠標(biāo)事件針對(duì)頁(yè)面元素CSS樣式的動(dòng)態(tài)操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09JavaScript實(shí)現(xiàn)無(wú)限級(jí)遞歸樹(shù)的示例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)無(wú)限級(jí)遞歸樹(shù)的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03JavaScript中處理數(shù)組,對(duì)象和正則的實(shí)用函數(shù)
本文主要分享一下最近項(xiàng)目中遇到的一些javascript的業(yè)務(wù)邏輯函數(shù),這些函數(shù)可以提成一個(gè)公用的工具函數(shù)以便于在以后的項(xiàng)目中進(jìn)行使用,希望對(duì)大家有所幫助2023-11-11JavaScript監(jiān)測(cè)ActiveX控件是否已經(jīng)安裝過(guò)的代碼
這是通用的方法,只需要把唯一的Activex的clsid和任意一個(gè)屬性或方法名傳進(jìn)來(lái)就可以判斷了。(找了兩個(gè)小時(shí)才找到 -_-!)2008-09-09