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


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 相关文章推荐
javascript 写类方式之六
Jul 05 Javascript
网页中的图片的处理方法与代码
Nov 26 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 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
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
JSONP跨域请求
2017/03/02 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python转换摩斯密码示例
2014/02/16 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
TensorFlow实现模型评估
2018/09/07 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
Python地图绘制实操详解
2019/03/04 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
Python测试线程应用程序过程解析
2019/12/31 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
python环境下安装opencv库的方法
2020/03/05 Python
什么是python的自省
2020/06/21 Python
windows支持哪个版本的python
2020/07/03 Python
Python 创建TCP服务器的方法
2020/07/28 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
18岁生日感言
2014/01/12 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
高中物理教学反思
2014/02/08 职场文书
项目建议书范文
2014/05/12 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
Python访问Redis的详细操作
2021/06/26 Python
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers