小程序实现投票进度条


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 相关文章推荐
在JavaScript中使用inline函数的问题
Mar 08 Javascript
javascript+xml技术实现分页浏览
Jul 27 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
Vue实现简单的留言板
Oct 23 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获取bing每日壁纸示例分享
2014/02/25 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
python的等深分箱实例
2019/11/22 Python
np.random.seed() 的使用详解
2020/01/14 Python
简述 Python 的类和对象
2020/08/21 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
商场消防演习方案
2014/02/12 职场文书
工程专业应届生求职信
2014/02/19 职场文书
2014小学植树节活动总结
2014/03/10 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
单位病假条范文
2015/08/17 职场文书
小学副班长竞选稿
2015/11/21 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
Python包argparse模块常用方法
2021/06/04 Python
总结Python变量的相关知识
2021/06/28 Python
python中pycryto实现数据加密
2022/04/29 Python
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript