6．表单验证
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用户注册信息</title>
<style type="text/css">
<!--
.bg{
width:100px;
height:33px;
border:0;
background-image:url(注册.gif);
background-color:#FFFFFF;
cursor:hand;
color:#006600;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<!--弹出成功页面,显示注册信息-->
<script language="javascript">
<!--
function reg()
{
//todo:验证
var username=document.regFrm.username.value;
var age=document.regFrm.age.value;
var sexGroup=document.regFrm.sex;
var sex;
//关于性别
for(var i=0;i<sexGroup.length;i++)
{
if(sexGroup[i].checked)
{
sex=sexGroup[i].value;
break;
}
}
//关于爱好
var fg=document.regFrm.fav;
var aihao="";
for(var i=0;i<fg.length;i++)
{
if(fg[i].checked)
{
aihao=aihao+" "+fg[i].value+" ";
}
}
//民族
var mz=document.regFrm.mz.value;
var sw=window.open("success.htm","成功","width=500,height=600");
sw.document.write(" <div style='background-color:#006666'>");
sw.document.write("<center>恭喜你,注册成功</center>");
sw.document.write("<br>您的姓名:"+username);
sw.document.write("<br>您的年龄:"+age);
sw.document.write("<br>您的性别:"+sex);
sw.document.write("<br>您的爱好:"+aihao);
sw.document.write("<br>您的民族:"+mz+"</div>");
}
-->
</script>
</head>
<body>
<form name="regFrm" method="post" action="">
<table width="403" height="261" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#0000CC">
<tr>
<td align="left" valign="middle">用户名:
<input name="username" type="text" id="username"></td>
</tr>
<tr>
<td> 年龄:
<input name="age" type="text" id="age"></td>
</tr>
<tr>
<td>性别:
<input name="sex" type="radio" value="1" checked>
男
<input type="radio" name="sex" value="0">
女</td>
</tr>
<tr>
<td>爱好:
<input name="fav" type="checkbox" id="fav" value="eat">
吃饭
<input name="fav" type="checkbox" id="fav" value="sleep">
睡觉
<input name="fav" type="checkbox" id="fav" value="beat">
打豆豆</td>
</tr>
<tr>
<td>民族:
<select name="mz" size="1" id="mz">
<option value="hanzu">汉族</option>
<option value="zangzu">藏族</option>
<option value="shirenzu">食人族</option>
</select></td>
</tr>
<tr>
<td><input type="button" value="注册" class="bg" onClick="javaScript:reg();"></button>
</tr>
</table>
</form>
</body>
</html>
7．复选框（全选和反选）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>全选例子</title>
<script language="javascript">
<!--
//全选的方法,注意让那些全选的复选框的name同名
function sa()
{
var cg=document.getElementsByName("iwant");//得到所有的名字是iwant的复选框
//首先我们应该判断全选那个复选框是否被选中
if(document.getElementById("cbxall").checked)//选中的时候,单击的话,应该让所有的iwant复选框选中
{
for(var i=0;i<cg.length;i++)
{
cg[i].checked=true;
}
}
else//不选中
{
for(var i=0;i<cg.length;i++)
{
cg[i].checked=false;
}
}
}
//反选的
function rs()
{
var cg=document.getElementsByName("iwant");//得到所有的名字是iwant的复选框
for(var i=0;i<cg.length;i++)
{
cg[i].checked=!cg[i].checked;//注意这句话,让所有选中的成为非选中的
}
}
-->
</script>
</head>
<body>
<h3 align="center">复选框的一些操作</h3>
<form action="" method="post" name="sf" id="sf">
<p>
<input type="checkbox" value="house" name="iwant">
房子 </p>
<p> <input type="checkbox" name="iwant" value="car">
车子 </p>
<p>
<input type="checkbox" name="iwant" value="money">
票子 </p>
<p> <input type="checkbox" name="iwant" value="gold">
金子 </p>
<p> <input name="iwant" type="checkbox" id="iwant" value="girl">
女人 </p>
<hr>
<p> <input name="cbxall" type="checkbox" id="cbxall" value="checkbox" onClick="javaScript:sa();">
全选
<input type="checkbox" name="cbxReverse" value="checkbox" onClick="javaScript:rs()">
反选
</p>
</form>
</body>
</html>
8．菜单互动
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>级联菜单例子</title>
<script language="javascript">
<!--
function hd()
{
//比如我们有3个帅哥(刘德华,李连杰,bobo组合),五个美女(石榴,秋香,芙蓉,天仙妹妹,杨二)
var p=new Array();//定义一个数组
//8行3列的数组
p[0]=new Array("刘德华","ldh","boy");
p[1]=new Array("李连杰","llj","boy");
p[2]=new Array("bobo组合","bb","boy");
p[3]=new Array("石榴","sl","girl");
p[4]=new Array("秋香","qx","girl");
p[5]=new Array("芙蓉","fr","girl");
p[6]=new Array("天仙妹妹","txmm","girl");
p[7]=new Array("杨二","yr","girl");
var first=document.sf.personType;
var second=document.sf.person;
second.length=0;
for(var i=0;i<p.length;i++)
{
if(p[i][2]==(first.options[first.selectedIndex].value))
{
second.add(new Option(p[i][0],p[i][1]));//其中的new Option(参数1,参数2),参数1代表的是显示值,参数2代表的传递值
}
}
}
-->
</script>
</head>
<body>
<form name="sf">
<select name="personType" onChange="hd();">
<option value="boy">帅哥</option>
<option value="girl">美女</option>
</select>
<select name="person">
</select>
</form>
<script language="javascript">
hd();//页面加载完成后调用的函数
</script>
</body>
</html>
分享到：
相关推荐
JavaScript2JavaScript2JavaScript2JavaScript2JavaScript2JavaScript2JavaScript2
源码 javascript 2d 桌球 html 格式
javascript 2d桌球游戏代码 可以轻松学习，掌握提高，自己的设计思路
2. **O'Reilly - JavaScript and DHTML Cookbook.chm**：这本书介绍了JavaScript和DHTML（Dynamic HTML）的实用技巧和代码示例，帮助开发者创建交互性更强的网页。DHTML是JavaScript、CSS和DOM的结合，用于实现页面...
《Head First JavaScript源码》是2010年出版的一本中文版JavaScript学习书籍的源码，这本书以其独特的视觉设计和易理解的方式深入浅出地介绍了JavaScript编程语言。JavaScript是一种广泛应用于网页和网络应用的脚本...
2. **对象和原型**：深入探讨了JavaScript的面向对象特性，包括对象字面量、构造函数、原型链、继承机制等，这是理解JavaScript灵活性的关键。 3. **作用域和闭包**：解析了JavaScript中的变量作用域规则以及闭包的...
本资源包包含了多个关于JavaScript的重要参考资料，包括“JavaScript权威指南(英文版).chm”、“javascript5.5.chm”、“css2gb.chm”以及“JavaScript对象与数组参考大全 .chm”。 首先，我们来看“JavaScript权威...
2. **对象与原型链**：JavaScript是基于对象的语言，它使用对象来存储数据和功能。原型链是JavaScript实现继承的一种方式，通过__proto__属性或Object.getPrototypeOf方法可以访问对象的原型。 3. **作用域与闭包**...
《JavaScript DOM编程艺术(第2版)》在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的JavaScript编程原则和最佳实践，并全面探讨了...
log4javascript2 log4javascript 的第 2 版，一个基于 log4j 的带有 API 的 JavaScript 日志库。 这是一个正在进行的工作。 可以在找到版本 1 的最新稳定版本。 官方网站：
[Addison-Wesley Professional] Effective JavaScript 编写高质量JavaScript代码的68个有效方法 (英文版) [Addison-Wesley Professional] Effective JavaScript 68 Specific Ways to Harness the Power of ...
JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）...
2. **JavaScript_LanguageService.msi**：这是JavaScript语言服务，它提供了对JavaScript语言的语法高亮、自动完成功能、代码分析、错误检测等功能。语言服务是Visual Studio IDE中不可或缺的一部分，它增强了开发者...
《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf《JavaScript程序设计案例教程》课件(共13章)第...
2. 事件处理：JavaScript API 提供了一系列事件处理方法，如`addEventListener()`和`removeEventListener()`，使得开发者可以响应用户的交互行为，如点击按钮、页面滚动等。 3. AJAX：JavaScript API 支持使用...
JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍，专注于讲解如何使用JavaScript与Document Object Model（DOM）进行交互。DOM是Web页面的结构化表示，它允许我们通过编程方式操纵HTML和XML...
JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）JavaScript函数（源代码）...