微信小程序?qū)崿F(xiàn)簡單秒表設(shè)計
更新時間：2022年09月09日 14:47:37 作者：不想學(xué)習(xí)只想玩
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡單秒表設(shè)計，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)簡單秒表的具體代碼，供大家參考，具體內(nèi)容如下
my.js部分
data: {
? ? hidden:true,
? ? num:num,
? ? hour:hour,
? },
? show:function(){
? ? this.setData({hidden:false});
? ? },
? ? onLoad: function (options) {
? ? ? setTimeout(()=>{this.show()},2000);
? ? ? ? },
timer:function(){
? if(num<'59'){
? //this.setData({num:++num});
? if(num<9){
? ? ++num
? ? this.setData({num:'0'+num})
? }
? else{
? ? this.setData({num:++num});
? }
? ?}
? ?else if(num>='59'){
? ? ?num='00'
? ? this.setData({num:num})
? ? ?}
?},
?hourr:function(){
? //this.setData({hour:++hour});
? if(hour<9){
? ? ++hour
? ? this.setData({hour:'0'+hour})
? }
? else{
? ? this.setData({hour:++hour});
? }
?},
?start:function(){
? timeID=setInterval(this.timer,1000);
? hourid=setInterval(this.hourr,60000);
? },
? stop:function(){
? ? clearTimeout(timeID);
? ? clearInterval(hourid);
? ? },my.wxss
.time{
? width: 90%;
? line-height: 200px;
? background-color: yellow;
? font-size: 100px;
color: red;
text-align: center;
border: 1px solid silver;
border-radius: 30px;
margin: 15px;
}
.btnLayout{
? display: flex;
? flex-direction: row;
}
button{
? width: 45%;
}my.wxml
<!--pages/my/my.wxml-->
<view class="box2" hidden="{{hidden}}">
<view class="title">計時器</view>
<view class="time">{{hour}}:{{num}}</view>
<view class="btnLayout">
<button bindtap="start">開始計數(shù)</button>
<button bindtap="stop">停止計數(shù)</button>
</view>
</view>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
js中雖然沒有傳統(tǒng)面向?qū)ο蟮木幊陶Z言里子類訪問父類的特殊語法，但是我們可以根據(jù)需要造一個，接下來本文給大家分享在JavaScript中子對象訪問父對象的方式,需要的朋友可以參考下2016-09-09
利用純js + transition動畫實現(xiàn)移動端web輪播圖詳解
這篇文章主要給大家介紹了利用純js + transition動畫實現(xiàn)移動端web輪播圖的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
這篇文章主要為大家詳細(xì)介紹了關(guān)于Bootstrap基本模板的使用和理解的學(xué)習(xí)記錄，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
可拖拽排序的菜單效果大家想必都很熟悉，本次我們通過一個可拖拽排序的九宮格案例來演示其實現(xiàn)原理，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-05-05
Bootstrap Multiselect 常用組件實現(xiàn)代碼
bootstrap-multiselect插件是一款基于bootstrap的下拉框美化插件，我們一般用來請求后臺返回具有l(wèi)abel和text對象的json數(shù)組即可渲染。接下來通過本文給大家分享Bootstrap Multiselect 常用組件實現(xiàn)代碼，感興趣的朋友一起看看吧2017-07-07
編碼規(guī)范就是指導(dǎo)如何編寫和組織代碼的一系列標(biāo)準(zhǔn)，下面通過本文給大家?guī)砹? 種JavaScript編碼規(guī)范，需要的朋友參考下2018-01-01
這篇文章主要介紹了比較 JavaScript 對象的四種方式，對js對象感興趣的同學(xué)，可以參考下2021-04-04
javascript DOM 操作基礎(chǔ)知識小結(jié)
經(jīng)常用到j(luò)avascript對dom，喜歡這方便的朋友也很多，要想更好的對dom進行操作，這些基礎(chǔ)一定要知道的。2010-04-04
這篇文章主要介紹了通過js實現(xiàn)的，當(dāng)鼠標(biāo)移到圖片上變大顯示而不是放大鏡效果,需要的朋友可以參考下2014-06-06
JS解決回調(diào)地獄為什么需要Promise來優(yōu)化異步編程
這篇文章主要為大家介紹了JS解決回調(diào)地獄為什么需要Promise來優(yōu)化異步編程原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10