小程序实现投票进度条


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 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
加载 Javascript 最佳实践
2011/10/30 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
Python向excel中写入数据的方法
2019/05/05 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
Python学习之os模块及用法
2020/06/03 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
员工自我鉴定范文
2013/10/06 职场文书
关于爱情的广播稿
2014/01/16 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
委托书格式要求
2015/01/28 职场文书
储备店长岗位职责
2015/04/14 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python