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


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类
Sep 08 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
jquery获得keycode的示例代码
Dec 30 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
js实现验证码干扰(动态)
Feb 23 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
Python操作Word批量生成文章的方法
2015/07/28 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
使用Python实现音频双通道分离
2020/12/25 Python
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
成人教育自我鉴定
2013/11/01 职场文书
村干部培训方案
2014/05/02 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
2015年科普工作总结
2015/07/23 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android