开发学院网页设计 JavaScript 通过MVC模式将Web视图和逻辑代码分离阅读

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

　2010-09-14 13:10:44　来源：WEB开发网　　　

核心提示： 在本文中给出了一个小例子来演示一下如何通过动态的方法将V和M分离，这个例子是通过<div>实现的10个小方块，通过MVC模式将Web视图和逻辑代码分离(3)，点击其中的某一个，会将相应的数字追加到下方的文本框架中，相应的文本框和数字的颜色也会随机发生变化，界面效果如图1所示，并

在本文中给出了一个小例子来演示一下如何通过动态的方法将V和M分离。这个例子是通过<div>实现的10个小方块，点击其中的某一个，会将相应的数字追加到下方的文本框架中，并且加入了一些用javascript实现的效果，如以一定间隔随机更新方块和数字的颜色，直接在文本框中输入数字后，相应的文本框和数字的颜色也会随机发生变化。界面效果如图1所示。

图1

下面先来实现View。先看看如下的代码：

numberKeys.html 　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 　<html> 　　　<head> 　　　　　<title></title> 　　　　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 　　　　　<link　rel="stylesheet"　type="text/css" href="my.css"/> 　　　　　<script type="text/javascript" src="addevents.js"> 　　　　　</script> 　　　</head> 　　　<body> 　　　　　<input id ="changeColor" type="button" value="开始变换颜色" /> 　　　　　<br/><br/> 　　　　　<div id ="nubmerKeys" class="numberKeys"　>　　　　　　　</div> 　　　　　<br/><br/> 　　　　　<br/><br/> 　　　　　<input id="numbers" type="text" size="80"/> 　　　</body> 　</html>　　