微信小程序实现时间进度条功能


Posted in Javascript onNovember 17, 2020

关于答题类,或者一些游戏环节的小程序需要用到时间进度条,该功能怎么实现?看下面源码

<view class='out' style='margin-top:10px'>
 <view class='in' style='width:{{progressWidth}}%'></view>
</view>
<view class='caozuo'>
 <text>{{progressTime}}秒</text>
 <text bindtap='playbtn' data-change='1'>{{playPausetips}}</text>
</view>

CSS:

.out {margin-left:auto;margin-right:auto;width:250px;height:20px;border:1px solid red;border-radius:20px;overflow:hidden;}
.in {height:100%;background-color:red;}
.caozuo{font-size:14px;color:#333;margin-left:auto;margin-right:auto;width:250px;margin-top:10px;display: flex;justify-content:space-between}

JS:

Page({
 data: {
 progressWidth:0,
 progressTime:60,
 mark:true,
 playPausetips:"开始"
 },
 playbtn() {
 let that = this;
 let mark = that.data.mark;
 if (mark){
  that.timer = setInterval(that.run, 1000); //that.timer关键点
  wx.showToast({
  title: '开始',
  })
  that.setData({
  mark:false,
  playPausetips:"暂停"
  })
 }else{
  clearInterval(that.timer);
  wx.showToast({
  title: '暂停',
  })
  that.setData({
  mark: true,
  playPausetips: "开始"
  })
 }
 },
 run(){
 let that = this;
 let totalProgressTime = 60 //秒
 let progressWidth = that.data.progressWidth; //显示进度
 let progressTime = that.data.progressTime; //时间
 
 if (progressWidth === 100) {
  wx.showToast({
  title: '结束回调处理',
  })
  clearInterval(that.timer);
  that.setData({
  progressTime: totalProgressTime, //进度条需要总时间s
  progressWidth: 100, //进度100%
  progressTime: 60
  })
  return;
 }
 progressTime--;
 progressWidth = (totalProgressTime - progressTime) * (100 / 60)
 that.setData({
  progressWidth: progressWidth,
  progressTime: progressTime
 })
 }
 
})

微信小程序实现时间进度条功能

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
JS 树形递归实例代码
May 18 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
小程序实现投票进度条
Nov 20 #Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 #Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 #Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 #Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 #Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 #Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 #Javascript
You might like
在php MYSQL中插入当前时间
2008/04/06 PHP
一段实用的php验证码函数
2016/05/19 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
python3让print输出不换行的方法
2020/08/24 Python
详解python with 上下文管理器
2020/09/02 Python
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
班干部竞选演讲稿
2014/04/24 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书