微信小程序——秒表组件

最新推荐文章于 2024-04-30 16:18:42 发布

玩烂小程序

最新推荐文章于 2024-04-30 16:18:42 发布

阅读量2.4k

点赞数

文章标签：秒表组件小程序

本文链接：https://blog.csdn.net/WeiHan_Seven/article/details/104901008

版权

这是一个小程序秒表组件，效果如下：
在这里插入图片描述
体验：
组件代码：
js

Component({
  properties: {
    startTime: {
      type: Number,
      value: 0
    }
  },
  data: {
    text: '00:00.00',
    text1:'0 天 0 时'
  },
  ready() {
    this.setData({
      startTime: this.properties.startTime
    })
    this.convertTimeStampToString(Date.now() - this.properties.startTime)
  },
  methods: {
    start: function () {
      var startTime = this.properties.startTime
      var self = this
      this._interval = setInterval(function () {
        self.convertTimeStampToString(Date.now() - startTime)
      }, 33)
    },
    stop: function () {
      clearInterval(this._interval)
    },
    convertTimeStampToString:function(ts){
      var ms = String(Math.floor((1000 + Math.floor(ts) % 1000) / 10)).slice(1)
      // console.log("毫秒", ms)
      var s = String(100 + Math.floor(ts / 1000) % 60).slice(1)
      // console.log("秒", s)
      var m = Math.floor(ts / 60000) % 60
      // console.log("分钟", m)
      var h = Math.floor(ts / (60 * 60 * 1000)) % 24
      // console.log("小时", h)
      var d = Math.floor(ts / (24 * 60 * 60 * 1000))
      // console.log("天", d)
      if (m < 10) m = '0' + m
      this.setData({
        text: m + ':' + s + '.' + ms,
        text1:d+" 天 "+h+" 时"
      })
    }
  }
})

json

{
  "component": true,
  "usingComponents": {}
}

wxml

{{text1}}
{{text}}