微信小程序实现简单秒表设计

本文实例为大家分享了微信小程序实现简单秒表的具体代码，供大家参考，具体内容如下

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">开始计数</button>
<button bindtap="stop">停止计数</button>
</view>
</view>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现简单秒表设计的详细内容...