<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<form name="form1" method = "post" action="">
<span class="style2">你喜爱的图书:</span>
<input type="checkbox" name="radio" value="入门类" onClick="check(this.value);">入门类
<input type="checkbox" name="radio" value="案例类" onClick="check(this.value);">案例类
<input type="checkbox" name="radio" value="讲解类" onClick="check(this.value);">讲解类
<input type="checkbox" name="radio" value="实力类" onClick="check(this.value);">实力类
</form>
<script language="javascript">
function check(books){
switch(books){
case "入门类":
alert("你喜爱的图书1:"+books);
break;
case "案例类":
alert("你喜爱的图书1:"+books);
break;
case "讲解类":
alert("你喜爱的图书1:"+books);
break;
case "实力类":
alert("你喜爱的图书1:"+books);
break;
}
}
</script>
<body>
</body>
</html>
应用js脚本检测文本域是否为空
<form name="myform" method="post" action="">
<table width="2500" height="1000" align="center" cellpadding="0" cellspacing="0" bgcolor="#CCFF66" background="images/2.jpg">
<tr><td height="71" colspan="2" align="center"> </td></tr>
<tr>
<td width="281" align="left">
用户名:<input name="user" type="text" id="user" size="20"><br><br>
密 码:<input name="pwd" type="password" id="pwd" size="20">
</td>
</tr>
<tr>
<td height="43" align="center">
<input type="submit" name="submit" onClick="return mycheck();" value="登陆">
<input type="reset" name="submit2" value="重置">
</td>
</tr>
</table>
</form>
<script language="javascript">
function mycheck(){
if(myform.user.value==""){
alert("用户名不可以为空");
myform.user.focus();
return false;
}
if(myform.pwd.value==""){
alert("密码不可以为空");
myform.pwd.focus();
return false;
}
}
</script> <
应用js脚本制作二级导航
<table width="761" height="20" border="0" cellpadding="0" cellspacing="0">
<Tr>
<td width="67" align="center"><a href="">首 页</a></td>
<td width="75" align="center"><a href="#" onMouseMove="Lmenu('新品')">新品上架</a></td>
<td width="75" align="center"><a href="#" onMouseMove="Lmenu('购物')">购物车</a></td>
<td width="75" align="center"><a href="#" onMouseMove="Lmenu('会员')">会员中心</a></td>
<td width="61" align="center"><a href="">在线帮助</a></td>
</Tr>
</table>
<div id="submenu" class="word_yellow"> </div>
<script language="javascript">
function Lmenu(value){
switch(value){
case "新品":
submenu.innerHTML="<a href='#'>商品展示</a>|<a href = '#'>销售排行榜</a>|<a href ='#'>商品查询</a>";
break;
case "购物":
submenu.innerHTML="<a href='#'>添加商品</a>|<a href = '#'>移出指定商品</a>|<a href ='#'>清空购物车</a>|<a href='#'>查询购物车</a>|<a href = '#'>填写订单信息</a>";
break;
case "会员":
submenu.innerHTML="<a href='#'>注册会员</a>|<a href = '#'>修改会员</a>|<a href ='#'>账户查询</a>";
break;
}
}
</script>
1.align:align 属性规定 div 元素中的内容的水平对齐方式。
2.<a href="#">是链接到本页
<a> 标签的 href 属性用于指定超链接目标的 URL。
3.onmousemove 事件属性当鼠标指针移动到图像上时执行一段 JavaScript:
4.submenu.innerHTML将后面的内容赋给submenu(innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容;)
5.<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。可以对同一个 <div> 标签同时应用 class 或 id 属性,但通常情况下我们偏向于只使用其中一种。
应用js脚本控制文本域和复选框
<form method="post" name="form1" id="form1" aciton="">
<table width="547" border="1" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" bgcoloer="#FBA720">
<tr>
<td height="35" colspan="5" bgcolor="#FFFFFF"><span class="style1">订单管理</span>
</td>
<td width="77" align="right" bgcolor="#FFFFFF">说明:</td>
<td width="389"> <textarea name="readme" cois="50" rows="10" id="readme"></textarea></td
<td width="63" height="33" bgcolor="#FFFFFF" class="style2">
<a href="#" onClick="javascript:document.getElementByld('readme').value="";return false;">
<img src="images/1.jpg" width="60" height="25" border="0"/> </a>
</td>
</tr>
<tr>
<td rowspan="6" align="right" bgcolor="#FFFFFF">操作</td>
<td height="30" colspan="2" align="left" bgcolor="#FFFFFF"><input name="C++"
type="checkbox" id="C++" value="C++"/>C++编程词典
</td>
<td height="30" colspan="2" align="left" bgcolor="#FFFFFF"><input name="PHP4"
type="checkbox" id="PHP4" value="PHP"/>PHP编程词典
</td>
</tr>
<tr>
<td colspan="5" align="center" bgcolor="#FFFFFF">
<img src="images/2.jpg" onClick="checkAll(form1,status)" width="60" height="25"/><!--全选按钮图片-->
<img src="images/3.jpg" onClick="switchAll(form1,status)" width="60" height="25"/><!--反选按钮图片-->
<img src="images/4.jpg" width="60" height="25" onClick="uncheckAll(form1,status)"/><!--不选按钮图片-->
</td>
</tr>
</table>
</form>
<script language="javascript">
function checkAll(form1,status){
var elements = form1.getElementsByTagName("input");
for(var i=0; i<elements.length;i++){
if(elements[i].type=='checkbox'){
if(elements[i].checked==false){
elements[i].checked=true;
}
}
}
}
function switchAll(form1,status){
var elements = form1.getElementsByTagName("input");
for(var i=0; i<elements.length;i++){
if(elements[i].type=='checkbox'){
if(elements[i].checked==false){
elements[i].checked=true;
}
else if(elements[i].checked==true){
elements[i].checked=false;
}
}
}
}
function uncheckAll(form1,status){
var elements = form1.getElementsByTagName("input");
for(var i=0; i<elements.length;i++){
if(elements[i].type=='checkbox'){
if(elements[i].checked==true){
elements[i].checked=false;
}
}
}
}
</script>
colspan表格单元横跨两列的表格:
bgcolor 属性为文档规定背景颜色
border 属性规定图像周围的边框的宽度,就是说可以增加或去掉图像的边框。
cellpadding 属性规定单元边沿与其内容之间的空白。
cellspacing 属性规定单元格之间的空间。