小程序?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-08
JavaScript計(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-08
JS+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-09
JavaScript實(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-03
JavaScript中處理數(shù)組,對(duì)象和正則的實(shí)用函數(shù)
本文主要分享一下最近項(xiàng)目中遇到的一些javascript的業(yè)務(wù)邏輯函數(shù),這些函數(shù)可以提成一個(gè)公用的工具函數(shù)以便于在以后的項(xiàng)目中進(jìn)行使用,希望對(duì)大家有所幫助2023-11-11
JavaScript監(jiān)測(cè)ActiveX控件是否已經(jīng)安裝過(guò)的代碼
這是通用的方法,只需要把唯一的Activex的clsid和任意一個(gè)屬性或方法名傳進(jìn)來(lái)就可以判斷了。(找了兩個(gè)小時(shí)才找到 -_-!)2008-09-09

