📄 8-2.html

📁 文件是《精通Javascript+jQuery》的书中实例

💻 HTML

字号:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>访问不存在的变量</title>
<style>
<!--
#popup{
	position:absolute; width:202px;
	color:#004a7e; font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	left:41px; top:25px;
}
#popup.show{border:1px solid #004a7e;}
#popup.hide{border:none;}
li.mouseOver{
	background-color:#004a7e;
	color:#FFFFFF;
}
li.mouseOut{
	background-color:#FFFFFF;
	color:#004a7e;
}
-->
</style>
<script language="javascript">
var oInputField;
var oPopDiv;
var oColorsUl;
var aColors = ["red","green","blue","magenta","yellow","cornfloewrblue"];
function clearColors(){
	for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
		oColorsUl.removeChild(oColorsUl.childNodes[i]);
	oPopDiv.className = "hide";
}
function setColors(the_clors){
	oInputField = document.forms["myForm1"].colors;
	oPopDiv = document.getElementById("popup");
	oColorsUl = document.getElementById("colors_ul");
	clearColors();
	oPopDiv.className = "show";
	var oLi;
	for(var i=0;i<aColors.length;i++){
		oLi = document.createElement("li");
		oColorsUl.appendChild(oLi);
		oLi.appendChild(document.createTextNode(the_colors[i]));

		oLi.onmouseover = function(){
			this.className = "mouseOver";
		}
		oLi.onmouseout = function(){
			this.className = "mouseOut";
		}
		oLi.onclick = function(){
			oInputField.value = this.firstChild.nodeValue;
			clearColors();
		}
	}
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeyup="setColors(aColors);" />
</form>
<div id="popup">
	<ul id="colors_ul"></ul>
</div>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -