通过MVC模式将Web视图和逻辑代码分离

核心提示： getRandomColor通过getRandomArbitary函数获得了三个十进制的随机数（0-255），并将其转换为16进制，通过MVC模式将Web视图和逻辑代码分离(6)，并返回最终结果，buttonOnClick函数这个函数是<div>标签的onclick事件函数，这

getRandomColor通过getRandomArbitary函数获得了三个十进制的随机数（0-255），并将其转换为16进制，并返回最终结果。

buttonOnClick函数

这个函数是<div>标签的onclick事件函数，实现代码如下：

function buttonOnClick()
{
　　var text = document.getElementById("numbers");　　
　　if(typeof this.innerText == "#ff0000")
　　　　text.value = text.value + this.textContent;　　
　　else
　　　　text.value = text.value + this.innerText;　　
　　this.style.backgroundColor = getRandomColor();　　　　　　　
　　this.style.color =　getRandomColor();
}

这个函数实现很简单，它的功能是将相应<div>标签中的数字追加到numbers文本框中。只是考虑了firefox和ie的不同。在firefox中，获得<div>中的文本要使用textContext，而在ie中要使用innerText。最后再将当前点击的<div>和数字的颜色再次变换。

到现在为止，还有两个事件函数代码没有给出，这两个事件函数是onKeyup和stopAndStartTimer。

onKeyup函数

当numbers文本框输入一个字符后，发生这个事件，实现代码如下：

function onKeyup()
{
　　var value = this.value;
　　if(value.length == 0) return;
　　var i = value.toString().substr(value.length - 1, 1);
　　if(isNaN(i) == false)
　　{　　
　　　　var div = getNumberKeysDiv();　　
　　　　if(div)
　　　　{
　　　　　　var button = div.childNodes[i];
　　　　　　button.style.backgroundColor = getRandomColor();　　　　　　　
　　　　　　button.style.color =　getRandomColor();
　　　　}
　　}
}