您现在的位置是:网站首页> 编程资料编程资料
微信小程序实现简单秒表设计_javascript技巧_
2023-05-24
367人已围观
简介 微信小程序实现简单秒表设计_javascript技巧_
本文实例为大家分享了微信小程序实现简单秒表的具体代码,供大家参考,具体内容如下
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
计时器 {{hour}}:{{num}}


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- 微信小程序实现答题倒计时_javascript技巧_
- 微信小程序实现计时器_javascript技巧_
- React Hooks之usePolymerAction抽象代码结构设计理念_React_
- 绘制flowable 流程图的Vue 库使用详解_vue.js_
- 微信小程序自定义计时器功能_javascript技巧_
- Vue中子组件的显示与隐藏方式_vue.js_
- 微信小程序实现利息计算器_javascript技巧_
- vue使用iview的modal弹窗嵌套modal出现格式错误的解决_vue.js_
- JS 中在严格模式下 this 的指向问题_javascript技巧_
- 微信小程序实现简单搜索框_javascript技巧_
