|
|
在第四講的最后的一個(gè)例子中，我們從文本輸入框獲取RGB值，然后使用它們來(lái)改變頁(yè)面背景色，今天我們首先來(lái)看看那個(gè)例子的部分代碼，并以此展開(kāi)我們這一講。
rgbToHex()
從技術(shù)上講，rgbToHex()方法實(shí)際上是屬于Array集合的。由于它是一個(gè)來(lái)處理數(shù)字的數(shù)組方法，我們今天來(lái)學(xué)習(xí)一下這個(gè)方法。從功能上來(lái)講，rgbToHex()使用起
來(lái)很簡(jiǎn)單：
參考代碼：
復(fù)制代碼 代碼如下:
function changeColor(red_value, green_value, blue_value){
var color = [red_value, green_value, blue_value].rgbToHex();
alert('Converts to : ' + color);
}
這很正常很完美，因?yàn)榧t色、綠色和藍(lán)色的值都是數(shù)字。試試，如果當(dāng)你傳入了一些其他意外的東西：
在這個(gè)結(jié)果的最后你看到了一個(gè)“NaN”，NaN代表不是一個(gè)數(shù)字（
Not a Number）。如果你把顏色的值作為硬編碼寫(xiě)在代碼里面，這種情況可能不會(huì)出現(xiàn)。但是如果你是從一個(gè)輸入表單獲得的這
個(gè)值，那么你很可能會(huì)碰到這樣的情況，你需要去處理這樣一些不符合要求的輸入值。
toInt()
因此，現(xiàn)在我們需要一種方式確保傳給rgbToHex()方法的參數(shù)都是數(shù)字――這里就需要使用toInt()方法了。toInt()是另一個(gè)相對(duì)簡(jiǎn)單的函數(shù)。你可以在一個(gè)變量上調(diào)用它，那么它將盡可能地將它轉(zhuǎn)換成一個(gè)整數(shù)。
參考代碼：
復(fù)制代碼 代碼如下:
var toIntDemo = function(make_me_a_number){
var number = make_me_a_number.toInt();
alert ('Best Attempt : ' + number);
}
正如你說(shuō)看到的，toInt()方法并不能處理所有你可以想到的情況，不過(guò)幸虧有了MooTools里面另外一個(gè)很酷的方法叫做$type()，我們也可以很好地處理那個(gè)問(wèn)題。
$type()
$type()是另外一個(gè)來(lái)自MooTools的令人不可思議的簡(jiǎn)單和有用的東西。它可以檢查你傳入的無(wú)論什么變量，然后返回一個(gè)字符串，告訴你這個(gè)變量是什么類型：
參考代碼：
復(fù)制代碼 代碼如下:
var checkType = function(variable_to_check){
var variable_type = $type(variable_to_check);
alert("Variable is a : " + variable_type);
}
那里還有許多$type()方法可以檢測(cè)的類型――你可以在這個(gè)
Core.$type()文檔中找到一個(gè)完整的列表。不過(guò)現(xiàn)在，我們真正關(guān)心的是怎么檢測(cè)整數(shù)。如果我們?cè)?
toIntDemo()方法中使用$type()方法，那么我們就可以很容易地處理那些toInt()不能處理的輸入了：
參考代碼：
復(fù)制代碼 代碼如下:
var toIntDemo = function(make_me_a_number){
//Try to make the input number
var number = make_me_a_number.toInt();
//If That didn't work, set number to 0
if ($type(number) != 'number'){number = 0;}
alert('Best Attempt : ' + number);
}
當(dāng)我們把它們和changeColor()方法組合起來(lái)，我們就可以得到一個(gè)幾乎接近完美的解決方案了：
參考代碼：
復(fù)制代碼 代碼如下:
var changeColor_2 = function(red_value, green_value, blue_value){
//Try to make sure everything is an integer
red_value = red_value.toInt();
green_value = green_value.toInt();
blue_value = blue_value.toInt();
//Set default values on anything thats Not a Number
if ($type(red_value) != 'number'){red_value = 0;}
if ($type(green_value) != 'number'){green_value = 0;}
if ($type(blue_value) != 'number'){blue_value = 0;}
//Calculate hex value
var color = [red_value, green_value, blue_value].rgbToHex();
alert('Converts to : ' + color);
}
最后一個(gè)方法中傳給rgbToHex()方法的數(shù)字超過(guò)了RGB允許值0-255的范圍，這個(gè)值還是被忠實(shí)地轉(zhuǎn)換成了它的十六進(jìn)制值。不幸的是，這意味著我們接受了一個(gè)超過(guò)那個(gè)范圍的數(shù)字，我們將不能得到一個(gè)有效的十六進(jìn) 制顏色值。幸運(yùn)的是，MooTools中哎呦另外一個(gè)方法，我們可以用來(lái)處理這個(gè)問(wèn)題。
limit()
MooTools中的limit()方法也是非常簡(jiǎn)單直接的。你可以在一個(gè)數(shù)字上面調(diào)用這個(gè)方法，傳入一個(gè)這個(gè)數(shù)字允許的最小值和一個(gè)允許的最大值作為參
數(shù)，它會(huì)自動(dòng)地進(jìn)行舍入處理。你還需要牢記這一點(diǎn)：limit方法需要傳入整數(shù)參數(shù)，因此一般在使用limit方法之前先對(duì)你要指定為數(shù)字的東西（或者其他在數(shù)字集合（
Number Collection）里面的東西）使用toInt()方法。
參考代碼： 復(fù)制代碼 代碼如下:
var limitDemo = function(number_to_limit){
//Do our best to get an integer
number_to_limit = number_to_limit.toInt();
//Get the limited value
var limited_number = number_to_limit.limit(0, 255);
alert("Number Limited To : " + limited_number);
}
示例代碼
把上面的方法和我們剛才的changeColor()方法混合起來(lái)試試：
參考代碼：
復(fù)制代碼 代碼如下:
var changeColor = function(red_value, green_value, blue_value){
//Try to make sure everything is an integer
red_value = red_value.toInt();
green_value = green_value.toInt();
blue_value = blue_value.toInt();
//Set default values on anything thats Not a Number
if ($type(red_value) != 'number'){red_value = 0;}
if ($type(green_value) != 'number'){green_value = 0;}
if ($type(blue_value) != 'number'){blue_value = 0;}
//Limit Everything to the RGB Scale (0 - 255)
red_value = red_value.limit(0, 255);
green_value = green_value.limit(0, 255);
blue_value = blue_value.limit(0, 255);
//Calculate hex value
var color = [red_value, green_value, blue_value].rgbToHex();
alert('Converts to : ' + color);
}
更多學(xué)習(xí)
下載一個(gè)包含你開(kāi)始所需要的全部東西的zip包
- 標(biāo)準(zhǔn)的數(shù)字（Number）處理功能函數(shù)
- Mootools的數(shù)字（Number）處理功能函數(shù)
- Mootools的數(shù)組（Array）處理功能函數(shù)
JavaScript技術(shù)：Mootools 1.2教程 輸入過(guò)濾第一部分（數(shù)字），轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
