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

 更新时间: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>

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

您可能感兴趣的文章:

相关文章

  • JavaScript中子对象访问父对象的方式详解

    JavaScript中子对象访问父对象的方式详解

    js中虽然没有传统面向对象的编程语言里子类访问父类的特殊语法,但是我们可以根据需要造一个,接下来本文给大家分享在JavaScript中子对象访问父对象的方式,需要的朋友可以参考下
    2016-09-09
  • 利用纯js + transition动画实现移动端web轮播图详解

    利用纯js + transition动画实现移动端web轮播图详解

    这篇文章主要给大家介绍了利用纯js + transition动画实现移动端web轮播图的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09
  • Bootstrap基本模板的使用和理解1

    Bootstrap基本模板的使用和理解1

    这篇文章主要为大家详细介绍了关于Bootstrap基本模板的使用和理解的学习记录,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript实现拖拽排序的方法详解

    JavaScript实现拖拽排序的方法详解

    可拖拽排序的菜单效果大家想必都很熟悉,本次我们通过一个可拖拽排序的九宫格案例来演示其实现原理,感兴趣的小伙伴可以跟随小编一起学习一下
    2022-05-05
  • Bootstrap Multiselect 常用组件实现代码

    Bootstrap Multiselect 常用组件实现代码

    bootstrap-multiselect插件是一款基于bootstrap的下拉框美化插件,我们一般用来请求后台返回具有label和text对象的json数组即可渲染。接下来通过本文给大家分享Bootstrap Multiselect 常用组件实现代码,感兴趣的朋友一起看看吧
    2017-07-07
  • 5 种JavaScript编码规范

    5 种JavaScript编码规范

    编码规范就是指导如何编写和组织代码的一系列标准,下面通过本文给大家带来了5 种JavaScript编码规范,需要的朋友参考下
    2018-01-01
  • 比较JavaScript对象的四种方式

    比较JavaScript对象的四种方式

    这篇文章主要介绍了比较 JavaScript 对象的四种方式,对js对象感兴趣的同学,可以参考下
    2021-04-04
  • javascript DOM 操作基础知识小结

    javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的。
    2010-04-04
  • 鼠标移到图片上变大显示而不是放大镜效果

    鼠标移到图片上变大显示而不是放大镜效果

    这篇文章主要介绍了通过js实现的,当鼠标移到图片上变大显示而不是放大镜效果,需要的朋友可以参考下
    2014-06-06
  • JS解决回调地狱为什么需要Promise来优化异步编程

    JS解决回调地狱为什么需要Promise来优化异步编程

    这篇文章主要为大家介绍了JS解决回调地狱为什么需要Promise来优化异步编程原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10

最新评论