编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。 【实例名称】 下拉菜单JS代码怎么写 【实例描述】 分类下拉菜单可以尽可能地显示网站的导航信息。本例学习如何制作下拉式的导航菜单。 【实例代码】 <html>
<head>
<TITLE>下拉菜单-本站(www.xue51.com)</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript">
//为各个菜单项定义鼠标事件
startList = function()
{
if (document.all&&document.getElementById) {
navRoot = document.getElementById("mynav");
//找到菜单根目录
for (i=0; i<navRoot.childNodes.length; i++)
{
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over"; }
node.onmouseout=function() {
this.className=this.className.replace(" over", ""); }
}
}
}
}
window.onload=startList;
</script> 需要在body中添加一些菜单项,注意菜单项根目录的ID必须为“mynav”代码如下所示: <style type="text/css">
body
{ font: normal 11px verdana; }
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
ul li
{ position: relative; }
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
} /* 菜单项的样式 */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
li:hover ul, li.over ul { display: block; }
</style> </head>
<body>
<ul id="mynav">
<li><a href="#">首页</a></li>
<li><a href="#">帮助</a>
<ul>
<li><a href="#">历史</a></li>
<li><a href="#">团队</a></li>
<li><a href="#">办公室</a></li>
</ul>
</li>
<li><a href="#">客服</a>
<ul>
<li><a href="http://www.google.com">网页设计</a></li>
<li><a href="#">网络销售</a></li>
<li><a href="#">站点服务</a></li>
<li><a href="#">区域服务</a></li>
</ul>
</li>
<li><a href="#">联系方式</a>
<ul>
<li><a href="#">国家</a></li>
<li><a href="#">城市</a></li>
<li><a href="#">地址</a></li>
<li><a href="#">电话</a></li>
</ul>
</li>
</ul>
</body>
</html>
【运行效果】 【难点剖析】 本例在设计时使用了“ul”和“li”元素完成菜单项的设计:使用JavaScript中的“childNodes”属性来获取每一个菜单项。注意“childNodes”是JavaScriptDOM的重要组成部分,在Ajax应用中起了关键作用。 【源码下载】 如果你不愿复制代码及提高代码准确性,你可以点击:下拉菜单 进行本实例源码下载
使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。 |