小程序实现投票进度条


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 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
JS 遮照层实现代码
Mar 31 Javascript
Javascript 面试题随笔
Mar 31 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
Javascript中replace()小结
Sep 30 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
Js的Array数组对象详解
Feb 22 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
今天,小程序正式支持 SVG
Apr 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
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 #Javascript
You might like
PHP 采集程序 常用函数
2008/12/18 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
用javascript实现画板的代码
2007/09/05 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
详解a++和++a的区别
2017/08/30 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python实现各种插值法(数值分析)
2019/07/30 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
超市端午节活动方案
2014/01/23 职场文书
教师节商场活动方案
2014/02/13 职场文书
工程索赔意向书
2014/08/30 职场文书
2014年资料员工作总结
2014/11/18 职场文书