javascript实例学习二
状态栏显示鼠标位置
捕获事件，并且从事件中获取需要的信息的方法
<script language=javascript> //移动鼠标的方法 function move(e){ if (document.layers) { var x=e.pageX; var y=e.pageY; } if (document.all) { var x=event.x; var y=event.y; } status="x:"+x+" y:"+y; //组合鼠标的x,y坐标 } document.onmousemove = move; //鼠标移动时绑定move方法 if (document.layers) document.captureEvents(Event.MOUSEMOVE); </script>
鼠标移动到图片上时显示另一张图片
移除后还可以变回来
<SCRIPT LANGUAGE="JavaScript"> function changeSrc(obj) { obj.src="LOGO2.gif";//改变图像地址 } function changeBack(obj) { obj.src="LOGO1.gif";//改变图像地址 } </script> <body> <img src="LOGO1.gif" onMouseOver="changeSrc(this)" onMouseOut="changeBack(this)"/> //鼠标进入和移出分别调用一个函数 </body>
还有一种简单的写法：
<img src="LOGO1.gif" onMouseOver=src="LOGO2.gif" onMouseOut=src="LOGO1.gif" />
用同样的思路可以做出一些其他的效果：
鼠标到下拉框时全部打开，移开之后收起
<select onmouseover="javascript:this.size=this.length" onmouseout="javascript:this.size=1"> <option>世界第一等</option> <option>亚洲第一山</option> <option>世界第一海</option> </select>
实现两个select框的互相同步
<select id="selA" onChange="selB.options[selectedIndex].selected=true"> <option>testA1</option> <option>testA2</option> </select> <select id="selB" onChange="selA.options[selectedIndex].selected=true"> <option>testB1</option> <option>testB2</option> </select>
获取列表框的选择
双击列表框中的某项以调用函数
<script LANGUAGE="JavaScript"> function mySelect() { var mysel=document.getElementById("select1"); //获取文档中的下拉框 var txt=mysel.options[mysel.options.selectedIndex].text; //获取下拉框显示的文本 var valu=mysel.options[mysel.options.selectedIndex].value;//获取下拉框的值 alert("您选择的是"+ valu+" "+txt); //显示的文本和值可能是不一样的 } </script> <body> <select size="10" ondblclick="mySelect()" id="select1"> <option value="大中城市">大城市</option> <option value="国际化大都市">国际城市</option> </select> </body>
可以调整的列表框
实现一个很常用的功能，修改列表框中的项目，逻辑很简单，是操作列表框的综合应用
<head> <title>标题页</title> <script language="javascript"> function move(listItem,listObj) { //列表项添加的方法 var i = 0; if(listItem.value != "") { //如果列表项不为空 var newOp = new Option(); //创建一个列表项 newOp.value = listItem.value; //设置列表项的值 newOp.text = listItem.value; //设置列表项的文本 listObj.options[listObj.options.length] = newOp; //添加新项到列表框中 listItem.value = ""; //注意清空 不然下回就无法添加了 } } function remove(listObj) { //列表框的删除方法 for(var i=0; i<listObj.options.length; i++) { if(listObj.options[i].selected && listObj.options[i] != "") { listObj.options[i].value = ""; //清除选定项的值 listObj.options[i].text = ""; //清除选定项的文本 } } delAfter(listObj); //删除后的排序处理 } function delAfter(alistObj) { for(var i = 0; i < alistObj.options.length; i++) { if(alistObj.options[i].value == "") { //值为空的会被清除 for(var j = i; j < alistObj.options.length - 1; j++) { alistObj.options[j].value = alistObj.options[j + 1].value; //重新排列顺序 alistObj.options[j].text = alistObj.options[j + 1].text; } var ln = i; break; } } if(ln < alistObj.options.length) { alistObj.options.length -= 1; delAfter(alistObj); } } function Moveup(listObj) { //将列表项往上移动 for(var i = 0; i < listObj.options.length; i++) { //遍历列表项 if (listObj.options[i].selected && listObj.options[i] != "" && listObj.options[i] != listObj.options[0]) { var tmpval1 = listObj.options[i].value; //获取当前项的值 var tmpval12 = listObj.options[i].text; //获取当前项的文本 listObj.options[i].value = listObj.options[i - 1].value; //获取上一项的值 listObj.options[i].text = listObj.options[i - 1].text //获取上一项的文本 listObj.options[i-1].value = tmpval1; //实现上下值的互换 listObj.options[i-1].text = tmpval12; //实现上下文本的互换 } } } function Movedown(listObj) { //将列表项往下移动 for(var i = 0; i < listObj.options.length; i++) { if (listObj.options[i].selected && listObj.options[i] != "" && listObj.options[i+1] != listObj.options[listObj.options.length]) { var tmpval1 = listObj.options[i].value; //获取当前项的值 var tmpval12 = listObj.options[i].text; //获取当前项的文本 listObj.options[i].value = listObj.options[i+1].value; //获取下一项的值 listObj.options[i].text = listObj.options[i+1].text //获取下一项的文本 listObj.options[i+1].value = tmpval1; //实现上下值的互换 listObj.options[i+1].text = tmpval12; //实现上下文本的互换 } } } </script> </head> <body> <form> <input type="text" name="listItem1" value=""><br /> <input type="button" value="添加" onClick="move(this.form.listItem1,this.form.listView1)" name="btnAdd"> <input type="button" value="删除" onClick="remove(this.form.listView1)" name="btnDel"> <input type="button" value="上移" onClick="Moveup(this.form.listView1)" name="btnUp"> <input type="button" value="下移" onClick="Movedown(this.form.listView1)" name="btnDown"><br /> <select multiple size=10 name="listView1" style="width:120px"> <option value="one">第一</option> <option value="two">第二</option> <option value="three">第三</option> <option value="four">第四</option> <option value="five">第五</option> <option value="six">第六</option> </select> </form> </body>
下拉框式的网站导航
根据在下拉框中的选择在文本框中显示相应的信息
<head> <title>标题页</title> <SCRIPT LANGUAGE="JavaScript"> var messages = new Array(6); //显示的信息数组 messages[0] = ""; messages[1] = "这里查询所有的健康咨询，学习如何保护自己的身体，如何正确饮食！"; messages[2] = "是刚注册的用户吗？还不知道如何浏览本站吧，从这里进入即可！"; messages[3] = "要下载常用软件吗/本站的某些页面打不开吗?从这里进去看看!"; messages[4] = "不管你有什么想说的,都可以来这里发泄! "; messages[5] = "这里有所有资深会员的经验之谈,近来看看吧!"; function messageReveal() //这个函数是关键 { var messageindex = document.messageForm.messagePick.selectedIndex //获取用户选择的列表索引 document.messageForm.messageField.value = messages[messageindex]; //显示指定的信息 } </SCRIPT> </head> <body> <form name="messageForm"> <select name="messagePick" OnChange="messageReveal()"> <option value="0">网站导航条 <option>健康杂谈 <option>新用户帮助 <option>下载软件 <option>灌水论坛 <option>老手经验 </select> <br><p> <textarea name="messageField" rows=6 cols=50 wrap=virtual></textarea> </form> </body>
根据输入的信息发起连接
结果是打开相应的网页
<body> <form Name="InputForm"> <div align="center"><center><p> <script language="JavaScript"> var FirstForm; function StartSearch() { //使用隐藏控件保存用户输入的查询参数 document.forms[FirstForm+document.InputForm.SearchSelect. selectedIndex].elements[0].value=document.InputForm.SearchWords.value; //提交查询参数到指定网站 document.forms[FirstForm+document.InputForm.SearchSelect.selectedIndex].submit(); } </script> <span style="font-size: 9pt">查找内容:</span> <input name="SearchWords" type="text" size="21" style=" margin-left: 1px"><br> <span style="font-size: 9pt">搜索引擎:</span> <select Name="SearchSelect" size="1" > <option selected>英文Yahoo</option> <option value="Google搜索">中文Google</option> <option value="百度搜索">百度中文搜索</option> </select><br> <input type="button" value=" 开始查找 " onClick="StartSearch()"> <script language="JavaScript"> FirstForm=document.forms.length </script></p> </center></div> </form> <form action="http://search.yahoo.com/bin/search" method="get"> <input type="hidden" name="p" value> </form> <form action="http://www.google.com/search"> <input type="hidden" name="q" value> </form> <form action="http://www.baidu.com/s"> <input type="hidden" name="wd" value> </form> </body>
这节内容跟表单相关比较多，跟我下一步的工作相关的还挺多，接下去可以参考
