小程序实现投票进度条


Posted in Javascript onNovember 20, 2019

本文实例为大家分享了小程序投票进度条的具体代码,供大家参考,具体内容如下

示例图:

小程序实现投票进度条

上代码:

index.wxml:

<view class='clo_jdt'>
 <view style='width:{{width}}'></view>
 </view>
 <view>进度
 <text>{{width}}</text>
 </view>
 <view>当前票数
 <text>{{quorumvotes}}</text>
</view>

index.wxss

.clo_jdt {
 width: 100%;
 border: 1px solid #6c9c2c;
 height: 25px;
 border-radius: 10px;
}
 
.clo_jdt view { 
 background: #95ca0d;
 float: left;
 height: 100%;
 text-align: center;
 line-height: 150%;
 border-radius: 10px 0 0 10px;
}

index.js

Page({
 data: {
 quorumvotes: 50,//当前票数
 width: "0%",//投票进度
 votes: 500 //最多可投票数
 },
 
 onLoad: function() {
 //获取总票数
 var votes = this.data.votes;
 //获取当前票数
 var quorumvotes = this.data.quorumvotes;
 //进度
 var speed = quorumvotes/votes*100+"%";
 console.log(speed)
 this.setData({
 width: speed,
 });
 
})

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

Javascript 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
JS input 数字验证代码
Jul 30 Javascript
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
javascript+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
VUE前后端学习tab写法实例
Aug 06 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
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 #Javascript
You might like
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHP图片加水印实现方法
2016/05/06 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
对于Python中线程问题的简单讲解
2015/04/03 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
Python连接字符串过程详解
2020/01/06 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
Shell如何接收变量输入
2012/09/24 面试题
成品仓管员岗位职责
2013/12/11 职场文书
副总经理岗位职责
2014/03/16 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
Flink 侧流输出源码示例解析
2022/09/23 Servers