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