广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >小程序实现计时器功能
  • 153
分享到

小程序实现计时器功能

2024-04-02 19:04:59 153人浏览 泡泡鱼
摘要

本文实例为大家分享了小程序实现计时器功能的具体代码,供大家参考,具体内容如下 效果图如下 布局(.wxml) <view class="countTime">{{tim

本文实例为大家分享了小程序实现计时器功能的具体代码,供大家参考,具体内容如下

效果图如下

布局(.wxml)

<view class="countTime">{{timecount}}</view>
<button class="aaa" bindtap="start">开始</button>
<button class="aaa" bindtap="stop">暂停</button>
<button class="aaa" bindtap="Reset">停止</button>

样式(.CSS


.countTime{
  height:200px;
  font-size:30px;
  line-height:200px;
  text-align: center;
}

.aaa{
  width:150px;
  background:rgb(7, 193, 96);
  color:#fff;
  margin-bottom:8px;
}

效果(.js

var init;
Page({
  data: {
    //小程序计时器
    hour:0,
    minute:0,
    second:0,
    millisecond:0,
    timecount:'00:00:00',
    cost:0,
    flag:1,
    endtime:"",
  },
  start:function(){
    clearInterval(init);
    var that=this;
    that.setData({
      hour:0,
      minute:0,
      second:0,
      millisecond:0
    })
    init=setInterval(function(){
      that.timer()
    },50);
  },
  stop:function(){
    clearInterval(init);
  },
  Reset:function(){
    var that=this;
    clearInterval(init);
    that.setData({
      hour:0,
      minute:0,
      second:0,
      millisecond:0,
      timecount:'00:00:00'
    })
  },
  timer:function(){
    var that = this;
    console.log(that.data.millisecond)
    that.setData({
      millisecond:that.data.millisecond+5
    })
    if(that.data.millisecond>=100){
      that.setData({
        millisecond:0,
        second:that.data.second + 1
      })
    }
    if(that.data.second >= 60){
      that.setData({
        second:0,
        minute:that.data.minute+1
      })
    }
    if(that.data.minute>=60){
      that.setData({
        minute:0,
        hour:that.data.hour+1
      })
    }
    that.setData({
      timecount:that.data.hour+":"+that.data.minute+":"+that.data.second+":"+that.data.millisecond
    })
  }
});

注意的点: 在点击启动定时器按钮时,多次连着点击,会累加定时器,会造成定时器加速的效果,为了避免这种情况,应该在每次点击开始前先清除一下定时器。

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

--结束END--

本文标题: 小程序实现计时器功能

本文链接: https://www.lsjlt.com/news/164410.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 小程序实现计时器小功能
    本文实例为大家分享了小程序实现计时器小功能的具体代码,供大家参考,具体内容如下 效果图如下 布局(.wxml) <view class="countTime">{{ti...
    99+
    2022-11-13
  • 小程序实现计时器功能
    本文实例为大家分享了小程序实现计时器功能的具体代码,供大家参考,具体内容如下 效果图如下 布局(.wxml) <view class="countTime">{{tim...
    99+
    2022-11-13
  • 小程序如何实现计时器功能
    这篇文章主要介绍“小程序如何实现计时器功能”,在日常操作中,相信很多人在小程序如何实现计时器功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序如何实现计时器功能”的疑惑有所帮助!接下来,请跟着小编一起来...
    99+
    2023-07-02
  • 小程序怎么实现倒计时功能
    本文小编为大家详细介绍“小程序怎么实现倒计时功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“小程序怎么实现倒计时功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。  倒计时功能是一个比较常见的功能,比如用户获...
    99+
    2023-06-26
  • 小程序实现计算器功能
    本文实例为大家分享了小程序实现计算器功能的具体代码,供大家参考,具体内容如下 实现模拟手机上的计算器,输入即可运算 本页面是做一个计算收款的页面,如果不需要下面的内容可以删除掉 w...
    99+
    2022-11-12
  • 微信小程序实现计算器小功能
    微信小程序现在越来越火爆了,我也看到很多在校大学生都在自学了,那些专门从事APP开发,网页开发的工作者更是看到了小程序的前景,在小程序领域也掺上一脚,本人也是自学小程序的,初期跟很多...
    99+
    2022-11-12
  • 微信小程序实现简单倒计时功能
    本文实例为大家分享了微信小程序实现简单倒计时的具体代码,供大家参考,具体内容如下 任务描述: 计时器 任务要求: 案例描述:设计一个实现倒计时功能的小程序,小程序运行后,首先显示空白...
    99+
    2022-11-13
  • 微信小程序实现计算器功能
    本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下 一、微信小程序开发工具界面 二、目录结构 第一次进到页面它的目录结构如下: 三、需要注意的问题 ...
    99+
    2022-11-12
  • 小程序怎么实现计算器功能
    本篇内容介绍了“小程序怎么实现计算器功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!实现模拟手机上的计算器,输入即可运算本页面是做一个计算...
    99+
    2023-06-08
  • 微信小程序实现计时器开始和结束功能
    本文实例为大家分享了微信小程序实现计时器开始和结束的具体代码,供大家参考,具体内容如下 1、微信小程序计时功能,点击开始计时 2、wxml <view class='tip'...
    99+
    2022-11-13
  • 微信小程序如何实现计算器小功能
    这篇文章主要介绍微信小程序如何实现计算器小功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!微信小程序现在越来越火爆了,我也看到很多在校大学生都在自学了,那些专门从事APP开发,网页开发的工作者更是看到了小程序的前景...
    99+
    2023-06-20
  • 用微信小程序实现计算器功能
    本文是用微信小程序写的一个简单的计算器,有兴趣的小伙伴可以了解一下。 页面部分 <view class='box'> <view class='txt...
    99+
    2022-11-12
  • 微信小程序自定义计时器功能
    最近想在在做的微信小程序加一个计时器功能,就是可以设置一个时间,可以开始倒计时,暂停,最终实现结果(图1,2所示),可能这个配色及样式有点糟糕毕竟css太难了 ,可以在这个基础上进行...
    99+
    2022-11-13
  • 微信小程序如何实现简单倒计时功能
    本篇内容介绍了“微信小程序如何实现简单倒计时功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!任务描述:计时器任务要求:案例描述:设计一个实...
    99+
    2023-06-30
  • 小程序实现实时聊天IM功能
    随着小程序的发展,给公司带来了不错的收益,但是有件比较苦恼的事情是,由于小程序没有即时聊天功能,这给公司的客服带来不少的麻烦,导致沟通没有时效性。通过更智能的企达第三方小程序IM,可以实现更多多维度的操作!主动邀请对话当用户进入小程序后,可...
    99+
    2023-06-05
  • 微信小程序实现计时器
    本文实例为大家分享了微信小程序实现计时器的具体代码,供大家参考,具体内容如下 微信小程序点击事件触发计时器 1.wxml <view class="button" bindt...
    99+
    2022-11-13
  • Vue实现倒计时小功能
    很多项目中都需要实现倒计时功能,例:发送验证码。现在举例实现一个简单的倒计时按钮功能。简单布局,简单操作,简单效果,最主要的是思路和倒计时步骤理解!!! 例、代码如下: 要求:点击提...
    99+
    2022-11-12
  • 微信小程序实现简单计算器功能
    微信小程序:简单计算器,供大家参考,具体内容如下 对于才接触小程序不久的人来说,想要直接上手一个实用性强的项目难度很大,想要快速熟悉小程序的使用,我们可以先尝试着做一个简单的计算器。...
    99+
    2022-11-12
  • 微信小程序实现简易计算器功能
    本文实例为大家分享了微信小程序实现简易计算器的具体代码,供大家参考,具体内容如下 实现代码: <!--pages/computer.wxml--> <view c...
    99+
    2022-11-13
  • 微信小程序实现简易的计算器功能
    一个初入IC的硅农,硬件编程经验3个月。偶然接触了微信小程序编程,然后自己写了一个计算器,希望得到改进意见。 功能: 1、计算 + - * /和%; 2、主要是当得出结果的时候,可以...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作