先來看下最終效果：
git源：https://git.oschina.net/dotton/CountDown
分步驟-性子急的朋友，可以直接看最後那段代碼。
wxml文件放個text
<text>second: {{second}} micro second:{{micro_second}}</text>
在js文件中調用
function countdown(that) {
var second = that.data.second
if (second == 0) {
// console.log("Time Out...");
that.setData({
second: "Time Out..."
});
return ;
}
var time = setTimeout(function(){
that.setData({
second: second - 1
});
countdown(that);
}
,1000)
}
Page({
data: {
second: 3
},
onLoad: function() {
countdown(this);
}
});
運行驗證下，從10走到1s，然後顯示時間到。
於是繼續將毫秒完善，注意毫秒的步長受限於係統的時間頻率，於是我們精確到0.01s即10ms
js
/* 秒級倒計時 */
function countdown(that) {
var second = that.data.second
if (second == 0) {
that.setData({
second: "Time out!",
micro_second: "micro_second too."
});
clearTimeout(micro_timer);
return ;
}
var timer = setTimeout(function(){
that.setData({
second: second - 1
});
countdown(that);
}
,1000)
}
/* 毫秒級倒計時 */
// 初始毫秒數，同時用作歸零
var micro_second_init = 100;
// 當前毫秒數
var micro_second_current = micro_second_init;
// 毫秒計時器
var micro_timer;
function countdown4micro(that) {
if (micro_second_current <= 0) {
micro_second_current = micro_second_init;
}
micro_timer = setTimeout(function(){
that.setData({
micro_second: micro_second_current - 1
});
micro_second_current--;
countdown4micro(that);
}
,10)
}
Page({
data: {
second: 2,
micro_second: micro_second_init
},
onLoad: function() {
countdown(this);
countdown4micro(this);
}
});
wxml文件
<text style="display: block;">second: {{second}}s</text>
<text>{{micro_second}}</text>
如此，當秒級運行完畢時，毫秒級timer即clearTimeout，並將字本顯示為'micro_second too'
再添加一個countdown4micro方法，使得顯示剩餘 0:3:19 89這樣形式的倒數
function dateformat(second) {
var dateStr = "";
var hr = Math.floor(second / 3600);
var min = Math.floor((second - hr * 3600) / 60);
var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;
dateStr = hr + ":" + min + ":" + sec;
return dateStr;
}
目前有2個時鍾，影響性能，合並下去掉countdown，於是countdown4micro變成以下的樣子：
function countdown4micro(that) {
var loop_second = Math.floor(loop_index / 100);
// 得知經曆了1s
if (cost_micro_second != loop_second) {
// 賦予新值
cost_micro_second = loop_second;
// 總秒數減1
total_second--;
}
// 每隔一秒，顯示值減1; 渲染倒計時時鍾
that.setData({
clock:dateformat(total_second - 1)
});
if (total_second == 0) {
that.setData({
// micro_second: "",
clock:"時間到"
});
clearTimeout(micro_timer);
return ;
}
if (micro_second_current <= 0) {
micro_second_current = micro_second_init;
}
micro_timer = setTimeout(function(){
that.setData({
micro_second: micro_second_current - 1
});
micro_second_current--;
// 放在最後++，不然時鍾停止時還有10毫秒剩餘
loop_index ++;
countdown4micro(that);
}
,10)
}
如此這般，毫秒與時分秒是分別運行渲染的，再次改造，程序可讀性更好。dateformat針對於毫秒操作，而不接受秒為數。同時還省卻了計算100次為1s的運算
/**
* 需要一個目標日期，初始化時，先得出到當前時間還有剩餘多少秒
* 1.將秒數換成格式化輸出為XX天XX小時XX分鍾XX秒 XX
* 2.提供一個時鍾，每10ms運行一次，渲染時鍾，再總ms數自減10
* 3.剩餘的秒次為零時，return，給出tips提示說，已經截止
*/
// 定義一個總毫秒數，以一分鍾為例。TODO，傳入一個時間點，轉換成總毫秒數
var total_micro_second = 2 * 1000;
/* 毫秒級倒計時 */
function countdown(that) {
// 渲染倒計時時鍾
that.setData({
clock:dateformat(total_micro_second)
});
if (total_micro_second <= 0) {
that.setData({
clock:"已經截止"
});
// timeout則跳出遞歸
return ;
}
setTimeout(function(){
// 放在最後--
total_micro_second -= 10;
countdown(that);
}
,10)
}
// 時間格式化輸出，如3:25:19 86。每10ms都會調用一次
function dateformat(micro_second) {
// 秒數
var second = Math.floor(micro_second / 1000);
// 小時位
var hr = Math.floor(second / 3600);
// 分鍾位
var min = Math.floor((second - hr * 3600) / 60);
// 秒位
var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;
// 毫秒位，保留2位
var micro_sec = Math.floor((micro_second % 1000) / 10);
return hr + ":" + min + ":" + sec + " " + micro_sec;
}
Page({
data: {
clock: ''
},
onLoad: function() {
countdown(this);
}
});
經過如上優化，代碼量減少一半，運行效率也高了。
二：LXStepper組件-商品數量加減：適用於購物車商品數量的加減
翻看了個文檔，微信沒有提供現成的組件，於是寫了這個小widget。
總體思路：
最左邊框，最右邊框由最後外層的容器的border-left與border-right設定；中間2段由input來設定；左右按鈕不設邊框，圓角效果由最外麵容器來設定，這樣剛好實現了一個耳熟能詳的stepper樣式。
布局：
1.1 準備一個容器view，設置它的寬為width: 70px;height: 21px;邊框顏色為#ccc灰色；圓角3px;
1.2 內置3個組件，分別是左text，中input，右text，之所以不用button是因為係統自帶的button帶了樣式，為了遵守設計規範，不去重寫button的樣式。其中input的默認高度是21px。寬度分別為19px，30px，19px，之所以是19px，是因為容器帶了左右邊距，共占據了2px。
1.3 3個組件都是文字居中，text-align: center實現；垂直居中使用line-height: 21px來實現
1.4 3個組件都是向左浮動，由於我們計算好3個組件的寬度絕對值，於是不必設定加號按鈕的浮動float: right
布局文件代碼
<!-- Stepper容器 -->
<view class="stepper">
<!-- 減號 -->
<text>-</text>
<!-- 數值 -->
<input type="number" value="{{num}}" />
<!-- 加號 -->
<text>+</text>
</view>
樣式表代碼
/*stepper容器*/
.stepper {
border: 1px solid #ccc;
border-radius: 3px;
width: 70px;
height: 21px;
margin:0 auto;
}
/*加號與減號*/
.stepper text {
width: 19px;
height: 28px;
line-height: 21px;
text-align: center;
float: left;
}
/*數值*/
.stepper input {
float: left;
margin: 0 auto;
width: 30px;
text-align: center;
font-size: 12px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
綁定事件
2.1 準備兩個按鈕樣式分別對應普通與禁用狀態
/*普通樣式*/
.stepper .normal{
color: black;
}
/*禁用樣式*/
.stepper .disabled{
color: #ccc;
}
還要準備一個data的值對象，用於監測數值與狀態的改變：
data: {
num: 1,
minusStatus: 'disabled'
}
2.2 加號與減號事件
2.2.1 綁定text事件bindtap，分別是bindMinus，bindPlus。按如下處理：取出data中的num值後作自增與自減，對於自減操作要先判斷是否大於1才做自減操作，也就是說已經是1的時候，就不要自減了
2.2.2 當num已經為1的時候，我們將減號按鈕設置為disabled樣式，一旦大於1，又變回normal狀態，加減事件均要如此處理，不然到了臨界值1的時候，回不到normal狀態
js代碼：
bindMinus: function() {
var num = this.data.num;
// 如果隻有1件了，就不允許再減了
if (num > 1) {
num --;
}
// 隻有大於一件的時候，才能normal狀態，否則disable狀態
var minusStatus = num <= 1 ? 'disabled' : 'normal';
// 將數值與狀態寫回
this.setData({
num: num,
minusStatus: minusStatus
});
},
效果如圖，注意減號是灰色的#ccc
2.3 文本框輸入事件
2.3.1 在wxml文件中的\<input\>監聽值變更事件bindchange="bindManual"。注：bindchange是失去焦點才會調用一次的，而bininput是每當有值有改變會有調用一次，敲打123，則會產生值1，12，123三次，比較適合於輸入驗證。
2.3.2 實現bindManual
bindManual: function(e) {
var num = e.detail.value;
// 將數值與狀態寫回
this.setData({
num: num
});
}
這個步驟看似多餘，實則為了num個數同步，以作為提交到網絡數據時是真正的data.num，而不是input手工改寫的數值
服務項目
網站首頁
TEL：021-61554458
立即谘詢