Axure怎么設計點贊的百分比進度條?
我要評論在投票類的網頁中，點擊“支持”按鍵后，不僅增加“被支持”一方的“投票”數(shù)量，還顯示“投票”比例，該怎么制作這類的網頁呢？具體效果圖如下，詳細操作請看下文詳細介紹。
“進度條”的基本制作原理，可先參考以下鏈接，是個基礎，這里不再累述部分代碼原理~
在axure中，按以下圖示，設置組件布局：
先設置”按鍵1“的交互動作：
動作1：
設置”參數(shù)1“的數(shù)值，即點擊“支持”后，數(shù)值加1
設置"參數(shù)1"的“元件文字”為局部變量LVAR1
所以”參數(shù)1“的數(shù)值為：[[LVAR1+1]]
動作2：
1.觸發(fā)"顏色進度條1"的"載入時"動作
2.觸發(fā)"顏色進度條2"的"載入時"動作
然后看下“顏色進度條1”的“載入時”的交互動作：
動作1：
設置”總量1“的內容，即“進度條1”的比率數(shù)值，這是一個臨時的過渡數(shù)值
設置"參數(shù)1"的“元件文字”為局部變量LVAR1
設置"參數(shù)2"的“元件文字”為局部變量LVAR2
所以所需的”比率數(shù)值“的公式為：[[LVAR1/(LVAR1+LVAR2)*100]]
（*100是為了百分比格式化方便些）
動作2：
設置”顏色進度條2“的寬度
設置"總量1"的“元件”為局部變量LVAR1
所以”顏色進度條2“的寬度為：[[LVAR1.text*LVAR1.width/100]]
（/100是抵消百分比擴大的數(shù)額）
動作3：
設置”百分比1“的內容，這個數(shù)值需要格式化（保留2為小數(shù)）
設置"總量1"的“元件文字”為局部變量LVAR1
所以”百分比1“的格式化后的內容：（[[LVAR1.toFixed(2)]]%）
”按鍵2“及”顏色進度條2“的交互方式與”按鍵2“及”顏色進度條2“的交互相同，這里不再累述，可以通過復制代碼的方式便捷操作，需要注意的時，參數(shù)的賦值需要修正~
”按鍵2“的交互代碼：
”顏色進度條2“的交互代碼：
到這里就設置結束了，設置還算簡單……
一切設置正確，效果就如下：
以上就是Axure設計點贊的百分比進度條的教程，希望大家喜歡，請繼續(xù)關注腳本之家。
相關推薦：
相關文章
axure網頁原型怎么預覽和生成原型文件？axure中設計好的文件原型想要預覽并生成，該怎么預覽呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-09-25
axure原型無法簽出怎么辦? axure不能簽出的解決辦法
axure原型無法簽出怎么辦、？axure中設計網頁原型很方便，設計完成以后發(fā)現(xiàn)無法簽出，該怎么辦呢？下面我們就來看看axure不能簽出的解決辦法，需要的朋友可以參考下2017-09-24
Axure怎么新建元件庫？想要把常用的組件制作一個元件，放到自己的元件庫中，該怎么操作呢？下面我們就來看看Axure元件庫的使用方法，需要的朋友可以參考下2017-09-13
axure中的單元格怎么合并？axure制作的網頁原型中插入了表格，想要將表格中的單元格合并呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-09-08
axure8怎么給網頁制作Tabpage頁效果？axure8中想要給網頁設計一個tab標簽效果，該怎么設計呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-08-29
Axure RP8怎么設計倒計時獲取短信驗證碼效果？經常能見到帶有短信驗證的網頁，該怎么設計出這個交互效果呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-08-25
Axure RP怎么給網頁添加滾動字幕？看到很多網頁有滾動字幕，想要在Axure RP中制作滾動字幕效果，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-08-15
Axure RP怎么設計一款導航菜單？Axure RP中設計網頁的時候需要設計一款導航菜單，該怎么設計恩？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-08-11
axure怎么給下拉框/列表框和元件文本添加內容？axure中有很多元件，今天我們就來看看給下拉框/列表框和元件文本添加內容的方法，需要的朋友可以參考下2017-07-25
Axure怎么繪制一幅生產產品圖？Axure中想要設計一個生產產品圖，該怎么設置呢？下面我們就來看看詳細的教程，很簡單，需要的朋友可以參考下2017-07-25
