中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

1.繪制基本原件

（1）在滑動塊中一共由三部分組成：

• 滑動的按鈕
• 左側隨滑塊變化的進度條
• 右側逐漸減少的進度條。

先創建這三個組件：

按鈕套入動態面板中，命名為“button”，左側增加的進度也套入動態面板中，命名為“plan”，底色不用動態面板直接命名為“base”。

（2）添加滑動效果

縮短“plan”面板的長度（注意：面板內的矩形長度不改變），原件從上向下順序依次是“button”“plan”“base”。

然后，我們對滑塊“button”添加用例：

這里我采用的是坐標定位，因為滑塊是橫向滑動，所以設置X軸坐標的變化。（用TotaldrapX函數時來回快速拖會有bug，而這樣不會）

思路：計算出滑塊“button”在X軸拖動的距離來改變動態面板“plan”的長度。

完成這一步，就可以左右滑動來設置進度了。

2.設置拖動滑塊顯示進度的值

這里我們添加一個顯示數值的文本框，命名為“number”，為了美觀把邊框隱藏了。

接著之前的步驟再添加一個拖動“button”改變“number”文本框數值的用例。在之前用的是坐標定位，這里我用了原件寬度的函數來定位，這樣看起來麻煩一些，但是有利于之后的調整。（也可以直接寫寬度的數值）

不要被這一大坨唬住了，一點一點看：

• LVAR1.width/(LVAR2.width-30) 這一段是計算“plan”在“base”長度上的占比，因為“button”本身有寬度，所以減去30；
• toFixed(2)函數是固定小數點后保留兩位；100和后面的%抵消，將小數轉化為百分數。

到這一步，在瀏覽器中就可以拖動滑塊，顯示比例了。

3.拖動滑塊設置日期

如果僅僅是拖動滑塊來改變百分比，這個小元件實在沒什么意思，但是在很多情況下可以拖動滑塊了設置時間。比如在眾籌的產品內，發布項目時需要設置籌款周期，這個原件就派上用場了。我們繼續往下看：

將剛才的樣式稍微修改一下：

然后將用例修改一下：

這里我設置本月天數為31天，如果想要通過判定來獲取某月的天數可以參考上學時做的判斷某一年是否是閏年的思路。

math.ceil()函數是向上取整，及滑動到15.5天時顯示為16天。

然后添加日期，依次添加三個文本框，命名為“year”“month”“date”，方便之后的賦值：

給文本框賦初值，獲取本地時間：

給“button”添加用例，拖動時設置“date”文本框的值為今天的日期now.getdate（）加上“number”的數值

但是這樣有一個問題就是，超過31天之后應該是往月份進1的，沒關系，繼續看：

我們為文本框“date”添加用例，當文本改變時：

思路：當日期大于31時間去31，月份加1。

是不是到這里就完了呢？不是的，如果這樣就結束的話向右拖之后再向左往回拖，月份可不會自己變回去哦~

所以我們繼續在“date”文本框下添加用例：

思路：日期的值大于今天的日期&&小于等于31時 說明月份的值是本月。

就這樣大功告成~~~233333，歡迎小伙伴們告訴我更多更簡便的方法~

下載鏈接: http://pan.baidu.com/s/1migy00w 密碼: sb2c

作者：浩程君（微信號HAO_chengjun），歡迎交流。

本文由 @浩程君 原創發布于人人都是產品經理。未經許可，禁止轉載。