位置：首页>> 网络编程>> JavaScript>> Mootools 1.2教程(4)——函数（3）

Mootools 1.2教程(4)——函数（3）

作者：Fdream　来源：Fdream博客　发布时间：2008-11-18 15:36:00　

标签：mootools,函数,教程,javascript

代码示例

为了刺激你明天的食欲（和弥补今天对MooTools的缺少），我写了一个没有什么意义的函数，可以让你随意改变这个页面的背景：

参考代码：

var changeColor = function(){
    // 用来从输入框中获得颜色值
    // （请参考：
    // http://docs.mootools.net/Element/Element#Element:get）
    var red   = $('red').get('value');
    var green = $('green').get('value');
    var blue = $('blue').get('value');

    // 确保每一个东西都是整数
    // （请参考：
    // http://docs.mootools.net/Native/Number#Number:toInt）
    red   = red.toInt();
    green = green.toInt();
    blue = blue.toInt();

    // 确保每一个数字都在1到255之间
    // 如果有需要则取整
    // （请参考：
    // http://docs.mootools.net/Native/Number#Number:limit）
    red   = red.limit(1, 255);
    green = green.limit(1, 255);
    blue = blue.limit(1, 255);

    // 取得十六进制代码
    // （请参考：
    // http://docs.mootools.net/Native/Array/#Array:rgbToHex）
    var color = [red, green, blue].rgbToHex();

    // 设置为该页面的背景色
    // （请参考：
    // http://docs.mootools.net/Element/Element.Style#Element:setStyle）
    $('body_wrap').setStyle('background', color);

}

var resetColor = function(){
    // 重新设置页面的背景色为白色
    // （请参考：
    // http://docs.mootools.net/Element/Element.Style#Element:setStyle）
    $('body_wrap').setStyle('background', '#fff');
}

window.addEvent('domready', function(){
    // 为按钮添加点击事件（明天我们会讲这个）
    // （请参考：
    // http://docs.mootools.net/Element/Element.Event#Element:addEvent）
    $('change').addEvent('click', changeColor);
    $('reset').addEvent('click', resetColor);
});