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


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参数列表集合
Apr 06 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
Vue-cli3项目引入Typescript的实现方法
Oct 18 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
Python常用随机数与随机字符串方法实例
2015/04/09 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
python3实现点餐系统
2019/01/24 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
新闻专业应届生求职信
2013/10/31 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
培训通知书模板
2015/04/17 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang