web开发中常用的javascript .
这些代码片段展示了如何在网页中使用JavaScript来实现各种功能。以下是对每个代码片段的简要解释:
测试页面
<html> <head> <title>Test Page</title> </head> <body> <script type="text/javascript"> function testFunction() { alert("Hello, World!"); } </script> <button onclick="testFunction()">Click Me</button> </body> </html>这个页面包含一个按钮,当点击按钮时会弹出一个警告框显示 "Hello, World!"。
回车键换行
<form onsubmit="return handleEnter(this, event)"> <input type="text" onkeypress="return handleEnter(this, event)" size="30"> <input type="text" onkeypress="return handleEnter(this, event)" size="30"> <textarea></textarea> </form> <script type="text/javascript"> function handleEnter(field, event) { var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; if (keyCode == 13) { var i; for (i = 0; i < field.form.elements.length; i++) if (field == field.form.elements[i]) break; i = (i + 1) % field.form.elements.length; field.form.elements[i].focus(); return false; } else return true; } </script>这个页面包含一个表单,当用户在输入框中按下回车键时,焦点会自动转移到下一个输入框。
确认后提交
<form name="lnman" method="post" action=""> <p><input type="text" name="textfield" value="确认后提交"></p> <p><input type="button" name="Submit" value="提交" onclick="msg();"></p> </form> <script language="JavaScript"> function msg() { if (confirm("你确认要提交嘛!")) document.lnman.submit() } </script>这个页面包含一个表单,当用户点击提交按钮时,会弹出一个确认框,如果用户确认,则表单会被提交。
改变表格的内容
<select onchange="zz.cells[this.selectedIndex].innerHTML=arr[this.selectedIndex]"> <option value=a>改变第一格</option> <option value=b>改变第二格</option> <option value=c>改变第三格</option> </select> <table id=zz border=1> <tr height=20> <td width=150>第一格</td> <td width=150>第二格</td> <td width=150>第三格</td> </tr> </table> <script language="JavaScript"> var arr = new Array(); arr[0] = "一一一一一"; arr[1] = "二二二二二"; arr[2] = "三三三三三"; </script>这个页面包含一个下拉菜单和一个表格,当用户选择不同的选项时,表格中的相应单元格内容会改变。
这些代码片段展示了JavaScript在网页开发中的多种应用,包括事件处理、表单操作和动态内容更新。