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


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 相关文章推荐
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
小程序实现投票进度条
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注销代码(session注销)
2012/05/31 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
php读取本地json文件的实例
2018/03/07 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
用js编写留言板
2020/03/17 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
python使用cPickle模块序列化实例
2014/09/25 Python
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
python实现Windows电脑定时关机
2018/06/20 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
中专三年学习的个人自我评价
2013/12/12 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
企业法人代表任命书
2014/06/06 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
办公用品质量保证书
2015/05/11 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
如何通过一篇文章了解Python中的生成器
2022/04/02 Python