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

不想学习只想玩 4616 阅读 0 评论 0 点赞

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

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>