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

核心提示： addButton函数的基本实现原理是先将<div>中的所有元素删除，再向其中加入10个<div>标签，通过MVC模式将Web视图和逻辑代码分离(5)，在addButton函数中有几个关键的函数需要讲解一下，getNumberKeysDiv函数这个函数用于获得叫nu

addButton函数的基本实现原理是先将<div>中的所有元素删除，再向其中加入10个<div>标签。在addButton函数中有几个关键的函数需要讲解一下。

getNumberKeysDiv函数

这个函数用于获得叫numberKeys的<div>标签，实现代码如下：

function getNumberKeysDiv()
{
　　var divs = document.getElementsByTagName("div");
　　if(divs)
　　{
　　　　for(var i = 0; i < divs.length; i++)
　　　　{
　　　　　　var div = divs[i];
　　　　　　if(div.className.toString().indexOf("numberKeys", 0) > -1)
　　　　　　{　
　　　　　　　　return div;　　　　　　　　
　　　　　　}
　　　　}
　　}
}

这个函数并不是直接通过<div>的id找到这个<div>，而是通过<div>的class属性，这样可能更灵活，因为如果通过id找<div>，就必须要求美工必须将这个<div>命名为numberKeys，而如果通过查找包含numberKeys的class属性的<div>会对美工的限制更少。因为，只有这个<div>才会使用css中的numberKeys。

getRandomColor方法

这个方法获得了一个随机的演示，返回了字符串类型，格式#FFFFFF。实现代码如下：

function getRandomArbitary(min, max)
{　　
　　return Math.round(Math.random() * (max - min) + min);
}
function getRandomColor()
{
　　var red = getRandomArbitary(0, 255).toString(16);　　
　　var green = getRandomArbitary(0, 255).toString(16);
　　var blue = getRandomArbitary(0, 255).toString(16);
　　if(red.length == 1) red = "0" + red;
　　if(green.length == 1) green = "0" + green;
　　if(blue.length == 1) blue = "0" + blue;
　　return "#" + red.toString(16) + green.toString(16) + blue.toString(16);
}