小程序?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)文章
js實(shí)現(xiàn)控制整個(gè)頁(yè)面滾動(dòng)條的位置
這篇文章主要介紹了js實(shí)現(xiàn)控制整個(gè)頁(yè)面滾動(dòng)條的位置,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10viewer.js一個(gè)強(qiáng)大的基于jQuery的圖像查看插件(支持旋轉(zhuǎn)、縮放)
這篇文章主要介紹了Viewer這一款強(qiáng)大的 jQuery 圖像瀏覽插件,在信息詳情頁(yè)面實(shí)現(xiàn)點(diǎn)擊圖片可以預(yù)覽,腳本之家也是用的這個(gè)js,這里為分享一下使用方法,需要的朋友可以參考下2020-04-04JS代碼實(shí)現(xiàn)百度地圖 畫(huà)圓 刪除標(biāo)注
這篇文章主要介紹了JS代碼實(shí)現(xiàn)百度地圖 畫(huà)圓 刪除標(biāo)注的相關(guān)資料,實(shí)現(xiàn)此功能的設(shè)計(jì)思路非常明確,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友參考下吧2016-10-10Javascript調(diào)用函數(shù)方法的幾種方式介紹
這篇文章主要介紹了Javascript調(diào)用函數(shù)方法的幾種方式介紹,本文講解了func()、(function(arg){})(window)、func.bind(sth)()、func.call()、func.apply()等5種方式,需要的朋友可以參考下2015-03-03JS利用window.print()實(shí)現(xiàn)網(wǎng)頁(yè)打印功能
print作為瀏覽已經(jīng)比較成熟的技術(shù)可以經(jīng)常被用來(lái)打印頁(yè)面的部分內(nèi)容。本文將在JS中調(diào)用window.print()方法實(shí)現(xiàn)網(wǎng)頁(yè)打印功能,感興趣的可以跟隨小編一起學(xué)習(xí)一下2022-04-04javascript通過(guò)class來(lái)獲取元素實(shí)現(xiàn)代碼
javascript獲取元素有很多的方法,本文簡(jiǎn)單的介紹下通過(guò)class獲取元素的實(shí)現(xiàn)代碼,感興趣的朋友可以參考下,希望本文知識(shí)點(diǎn)可以幫助到你2013-02-02JS面向?qū)ο缶幊虒?shí)現(xiàn)的拖拽功能案例詳解
這篇文章主要介紹了JS面向?qū)ο缶幊虒?shí)現(xiàn)的拖拽功能,結(jié)合具體案例形式詳細(xì)對(duì)比分析了JS面向過(guò)程與面向?qū)ο髮?shí)現(xiàn)的拖拽功能相關(guān)操作技巧,需要的朋友可以參考下2020-03-03概述如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的瀏覽器端js模塊加載器
本文主要對(duì)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的js加載器的步驟進(jìn)行介紹--主要可以分為解析路徑、下載模塊、解析模塊依賴(lài)、解析模塊四個(gè)步驟。需要的朋友來(lái)看下吧2016-12-12