微信小程序实现简单秒表设计
更新时间:2022年09月09日 14:47:37 作者:不想学习只想玩
这篇文章主要为大家详细介绍了微信小程序实现简单秒表设计,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现简单秒表的具体代码,供大家参考,具体内容如下
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
这篇文章主要介绍了JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法,需要的朋友可以参考下2016-08-08深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
这篇文章主要介绍了深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)的相关资料,需要的朋友可以参考下2015-12-12bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
这篇文章主要介绍了bootstrap-treeview实现多级树形菜单,后台JSON格式如何组织,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2019-07-07zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Swipe JS 是一个轻量级的移动滑动组件,支持 1:1 的触摸移动,阻力以及防滑性能都不错,可以让移动web应用展现更多的内容,能解决我们对于移动Web对滑动的需求。下面小编给大家介绍zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题,需要朋友可以参考下2015-08-08
最新评论