一、购物车全选
（点击结算弹出总金额）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车运算</title>
<script language="javascript">
function checkAll(){
var group=document.getElementsByName("check");
for(var i=0;i<group.length;i++){
group[i].checked=document.getElementById("checkshop").checked;
}
}
function tj(){
var sum1=0;
var group=document.getElementsByName("check");
for (var i=0;i<group.length;i++){
if(group[i].checked==true)
sum1+=parseFloat(group[i].value);
}
alert("你的购物总金额："+sum1)
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="654" border="1" align="center">
<tr>
<td><label>
<input type="checkbox" id="checkshop" value="checkbox" onclick="checkAll()" />
</label></td>
<td colspan="4"><img src="第三章购物车5.JPG" width="387" height="29" /></td>
</tr>
<tr>
<td width="20"><label></label></td>
<td width="371">宝贝名称</td>
<td width="63">积分</td>
<td width="65">价格</td>
<td width="103">个数</td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="check" value="59" />
</label></td>
<td colspan="4">
<img src="第三章购物车1.JPG" width="619" height="77" /></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="check" value="49" />
</label></td>
<td colspan="4"><img src="第三章购物车2.JPG" width="620" height="83" /></td>
</tr>
<tr>
<td height="84"><label>
<input type="checkbox" name="check" value="35" />
</label></td>
<td colspan="4"><img src="第三章购物车3.JPG" width="620" height="80" /></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="check" value="129" />
</label></td>
<td colspan="4"><img src="第三章购物车4.JPG" width="620" height="62" /></td>
</tr>
<tr>
<td><label></label></td>
<td colspan="4"><label>
<input type="button" name="Submit" value="使用购物车结算" onclick="tj(this.value)"/>
</label></td>
</tr>
</table>
</form>
</body>
</html>
二、点击放大图片
（当点击新的一张图片时，当前图片恢复原始大小）
<html>
<script language="javascript">
var oldnum=1;
function choose(newnum){
document.getElementById(oldnum).width=80;
document.getElementById(oldnum).height=80;
document.getElementById(newnum).width=150;
document.getElementById(newnum).height=150;
oldnum=newnum;
}
</script>
<head>
<title>选择图片</title>
</head>
<body>
<table width="391" height="121" border="0">
<tr>
<td width="94" height="100"><img id='1' src="T1gct0XhBrXXXXXXXX-80-80.png" width="100" height="100"></td>
<td width="90"><img id='2' src="T1gZt0XhxrXXXXXXXX-80-80.png" width="80" height="80"></td>
<td width="92"><img id='3' src="T1v0p0XhJeXXXXXXXX-80-80.jpg" width="80" height="80"></td>
<td width="97"><img id='4' src="T1XdJ0XntaXXXXXXXX-80-80.jpg" width="80" height="80"></td>
</tr>
<tr>
<td><a href="javascript:choose('1')" >淘妆</a></td>
<td><a href="javascript:choose('2')">包包</a></td>
<td><a href="javascript:choose('3')" >品牌</a></td>
<td><a href="javascript:choose('4')">原创</a></td>
</tr>
</table>
</body>
</html>
三、当点击按钮时添加一个输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<a>添加出售记录</a></br>
<button type="button" name="check" onclick="">添加下一条记录</button>
<button type="button" onclick="read()">完成</button></br>
<input type="text" />
</ul>
<script type="text/javascript" >
var btn=document.querySelectorAll('button');
btn[0].onclick=function (){
var ul=document.querySelector('ul')
var div=document.createElement('div');
div.innerHTML='<input></input>';
ul.appendChild(div);
};
function read(){
var str="";
var group=document.getElementsByName("");
for(var i=0;i<group.length;i++){
str+=group[i].value+"\n";
alert(str);
}
}
</script>
</body>
</html>四、当列表菜单中的值发生改变时，文本域中的字体大小和字体颜色发生改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea id="num1">哈哈哈哈</textarea>
<select id="size1" onchange="fontSize()">
<option value="10px">10号</option>
<option value="20px">20号</option>
<option value="30px">30号</option>
</select>
<select id="color1" onchange="color()">
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
<script>
function fontSize() {
document.getElementById("num1").style.fontSize=document.getElementById("size1").value;
}
function color() {
document.getElementById("num1").style.color=document.getElementById("color1").value;
}
</script>
</body>
</html>五、游戏移动
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>ͨ�������ƶ�ͼ��</TITLE>
<STYLE type="text/css">
body {
background-image: url(images/game.jpg);
background-repeat: repeat-y;
}
</STYLE>
<SCRIPT language="javascript" type="text/javascript">
function move(){
if(event.keyCode==38)
document.getElementById("man").style.top=parseInt(document.getElementById("man").style.top)-10+'px';
if(event.keyCode==40)
document.getElementById("man").style.top=parseInt(document.getElementById("man").style.top)+10+'px';
if(event.keyCode==37)
document.getElementById("man").style.left=parseInt(document.getElementById("man").style.left)-10+'px';
if(event.keyCode==39)
document.getElementById("man").style.left=parseInt(document.getElementById("man").style.left)+10+'px';
}
document.onkeydown=move;
</SCRIPT>
</HEAD>
<BODY>
<DIV id="man" style="position:absolute;left:543px; top:288px;width:89px;height:115px;z-index:1"><IMG src="images/man.gif" width="82" height="152"></DIV>
</BODY>
</HTML>
六、打开五个错位的窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>�ޱ����ĵ�</title>
<script language="javascript">
var num1=0;
function myopen1(){
var newwin=window.open("1.html","","width=200,height=300");
newwin.moveTo(50*num1,50*num1);
num1++;
if(num1<5){
setTimeout("myopen1()",1000);
}
}
</script>
</head >
<body onload="myopen1()">
</body>
</html>
六、点击切换图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
group=[,"1.png","2.png","3.jpg","4.jpg"]
或//group=new Array();
//group[1]="1.png";
//group[2]="2.png";
//group[3]="3.jpg";
//group[4]="4.jpg";
function change(num){
document.getElementById("image").src=group[num];
}
</script>
</head>
<body >
<form id="form1" name="form1" method="post" action="">
<table width="89" border="1">
<tr>
<td height="86" colspan="4"><img id="image" src="1.png" width="80" height="80" /></td>
</tr>
<tr>
<td width="14"><a href="javascript:change('1')">1</a></td>
<td width="14"><a href="javascript:change('2')">2</a></td>
<td width="16"><a href="javascript:change('3')">3</a></td>
<td width="17"><a href="javascript:change('4')">4</a></td>
</tr>
</table>
</form>
</body>
</html>
七、点击类别，显示相对应的课程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var courseList = new Array( );
courseList['服装'] = ['上衣', '裤子', '裙子', '连衣裙'];
courseList['皮具'] =['皮鞋', '皮衣'];
//courseList['第二学年'] = ['Struts', 'ASP.NET', 'Ajax','Spring','Hibernate'];
function changeTerm( )
{
var pIndex=document.myform.selTerm.value;
var newOption1;
document.myform.selCourse.options.length=0;
for (var j in courseList[pIndex])
{
newOption1=new Option(courseList[pIndex][j], courseList[pIndex][j]);
document.myform.selCourse.options.add(newOption1);
}
}
</script>
</head>
<body>
<form name="myform">
<SELECT name="selTerm" onChange="changeTerm( )">
<OPTION>--请选择喜欢的--</OPTION>
<OPTION value="服装">服装</OPTION>
<OPTION value="皮具">皮具</OPTION>
</SELECT>
商品
<TD><SELECT name="selCourse">
<OPTION>--请选择对应商品--</OPTION>
</SELECT>
</form>
</html>
八、点击种族显示相对应的图片
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>下拉列表框</TITLE>
<script type="text/javascript">
var oldnum=0;
function showPic(num){
if(oldnum!=0){
document.getElementById("pic"+oldnum).style.display="none";
}
document.getElementById("pic"+num).style.display="block";
oldnum=num;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM action="" method="post" name="myform">
<TABLE width="666" cellpadding="0" cellspacing="0" background="images/bg.jpg" align="center">
<TR>
<TD height="70" align="center"><H3>魔兽世界八大种族(图)</H3></TD>
</TR>
<TR>
<TD height="44" align="center">
<SELECT name="artType" onChange="showPic(this.value)">
<option value="">--请选择一个种族--</option>
<OPTION value="1">人类</OPTION>
<OPTION value="2">暗夜精灵</OPTION>
<OPTION value="3">矮人</OPTION>
<OPTION value="4">侏儒</OPTION>
<OPTION value="5">兽人</OPTION>
<OPTION value="6">牛头人</OPTION>
<OPTION value="7">亡灵</OPTION>
<OPTION value="8">巨魔</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<td align="center" height="234">
<DIV id="pic1" style="display:none"><IMG src="images/humans-small.jpg"></DIV>
<DIV id="pic4" style="display:none"><IMG src="images/gnomes-small.jpg"></DIV>
<DIV id="pic3" style="display:none"><IMG src="images/dwarves-small.jpg"></DIV>
<DIV id="pic2" style="display:none"><IMG src="images/nightelves-small.jpg"></DIV>
<DIV id="pic5" style="display:none"><IMG src="images/orcs-small.jpg"></DIV>
<DIV id="pic6" style="display:none"><IMG src="images/tauren-small.jpg"></DIV>
<DIV id="pic7" style="display:none"><IMG src="images/undead-small.jpg"></DIV>
<DIV id="pic8" style="display:none"><IMG src="images/trolls-small.jpg"></DIV></td>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
九、秒杀计时
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>秒杀计时</title>
<script language="javascript">
function mystart(){
var nowTime = new Date();
t1=nowTime.getHours()*3600+nowTime.getMinutes()*60+nowTime.getSeconds();
t2=parseInt(document.form1.hour2.value)*3600+parseInt(document.form1.second2.value)*60;
document.form1.t.value=t2-t1;
setTimeout("mystart()",1000)
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="393" height="109" border="1" background="背景.JPG">
<tr>
<td width="231">请填入您的商品开始秒杀的时间</td>
<td width="146"><label>
<input name="hour2" type="text" size="4" maxlength="2" />
点
<input name="second2" type="text" size="4" maxlength="2" />
分 </label></td>
</tr>
<tr>
<td height="38" colspan="2"><label>
<div align="center">
<input type="button" name="Submit" value="开始计时" onclick="mystart()"/>
</div>
</label></td>
</tr>
<tr>
<td height="40"><img src="4章典型案例1.JPG" width="231" height="36" /></td>
<td><label>
<input name="t" type="text" size="8" />
秒</label></td>
</tr>
</table>
</form>
</body>
</html>
十、自动轮番播放图片
<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript">
var oldnum=1;
function myturn(){
document.getElementById(oldnum).width=80;
document.getElementById(oldnum).height=80;
var newnum=Math.floor(Math.random()*4+1 );
document.getElementById(newnum).width=150;
document.getElementById(newnum).height=150;
oldnum=newnum;
setTimeout("myturn()",1000);
}
</script>
<head>
<title>ѡ��ͼƬ</title>
</head>
<body onload=myturn()>
<table width="391" height="104" border="0">
<tr>
<td width="94" height="100"><img id='1' src="T1gct0XhBrXXXXXXXX-80-80.png" width="100" height="100"></td>
<td width="90"><img id='2' src="T1gZt0XhxrXXXXXXXX-80-80.png" width="80" height="80"></td>
<td width="92"><img id='3' src="T1v0p0XhJeXXXXXXXX-80-80.jpg" width="80" height="80"></td>
<td width="97"><img id='4' src="T1XdJ0XntaXXXXXXXX-80-80.jpg" width="80" height="80"></td>
</tr>
</table>
<p> </p>
</body>
</html>
十一、电子邮件
检查非空，包含“.”和“@”符号
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
var txtEmail = document.getElementById('txtEmail');
function checkEmail() {
var email = document.getElementById("txtEmail").value;
if (email.toLowerCase().indexOf('@') == -1||str.indexOf(".")==-1) {
alert('电子邮件格式不正确！');
} else {
alert('注册成功');
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post">
</label>
<p> 你的邮箱:
<label>
<input name="txtEmail" type="text" id="txtEmail" />
</label>
</p>
<p>
<label>
<input value="注册" type="button" onClick="checkEmail()" />
</label>
</p>
</form>
</body>
</html>十二、判断昵称
姓名中只能含有字母数字
<html>
<head>
<title>判断昵称</title>
<script language="javascript">
function checkName(){
var name = document.getElementById("name").value;
for (var i = 0; i < name.length; i++) {
var c=name.charAt(i);
if(!(c>='a' && c<='z') && !(c>='A' && c<='Z')&& !(c>='0' && c<='9')){
alert("输入有误");
break;
}
}
if(i==name.length){
alert("输入正确");
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table border="1">
<tr>
<td>昵称</td>
<td>
<input name="name" type="text" id="name" /> 只能含有字母数字
</td>
</tr>
<tr>
<td>性别</td>
<td><input name="radiobutton" type="radio" checked />男
<input type="radio" name="radiobutton" />女
</td>
</tr>
<tr>
<td height="38" colspan="2">
<input type="button" name="Submit" value="申请会员" onClick="checkName()" />
</td>
</tr>
</table>
</form>
</body>
</html>十三、表单验证
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312" />
<STYLE type="text/css">
.borderBox {
font-size: 15px;
border: 1px solid;
}
</STYLE>
<script language="javascript" type="text/javascript">
function checkLogin(){
var name=document.getElementById("loginName").value;
for(var i=0;i<name.length;i++){
var c=name.charAt(i);
if(!(c>='a' && c<='z') && !(c=='_')&& !(c>='0' && c<='9')){
document.getElementById("loginError").innerHTML="<font color='red'>输入有误</font>";
break;
}
}
}
if(i==name.length)
document.getElementById("loginError").innerHTML="<font color='green'>输入正确</font>";
</script>
</HEAD>
<BODY>
<div id="content">
<!--首页的中间部分-->
<TABLE width="950" border="0" align="center">
<TR>
<TD height="75">
<h4><br /> 注册步骤： 1.填写信息 > 2.收电子邮件 > 3.注册成功
<IMG src="images/reg.gif" width="250" height="50" align="middle">
</h4>
</TD>
</TR>
</TABLE>
<TABLE width="950" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#99CCFF">
<FORM name="userfrm" method="post" action="register_success.htm" onSubmit="return validateform( )">
<TR class="register_table_line">
<TD width="225" align="right" bgcolor="#E7FBFF">登录名：</TD>
<TD width="445" align="left" bordercolor="#E7E3E7">
<INPUT name="loginName" type="text" class="borderBox" id="loginName" size="24" onblur="checkLogin( )">
<div id="loginError" style="display:inline"> </div>
</TD>
<TD width="272" align="left" bordercolor="#E7E3E7">（可包含 a-z、0-9 和下划线）</TD>
</TR>
<TR class="register_table_line">
<TD width="225" align="right" bgcolor="#E7FBFF">密码：</TD>
<TD align="left" bordercolor="#E7E3E7">
<INPUT name="pass" type="password" class="borderBox" id="pass" size="25">
</TD>
<TD align="left" bordercolor="#E7E3E7">（至少包含 6 个字符） </TD>
</TR>
<TR class="register_table_line">
<TD width="225" height="0" align="right" bgcolor="#E7FBFF">再次输入密码：</TD>
<TD height="0" colspan="2" align="left" bordercolor="#E7E3E7">
<INPUT name="rpass" type="password" class="borderBox" id="rpass" size="25">
</TD>
</TR>
<TR class="register_table_line">
<TD width="225" height="0" align="right" bgcolor="#E7FBFF">电子邮箱：</TD>
<TD height="0" align="left" bordercolor="#E7E3E7">
<INPUT name="email" type="text" class="borderBox" id="email" size="24">
</TD>
<TD height="0" align="left" bordercolor="#E7E3E7"> （必须包含 @ 字符）</TD>
</TR>
<TR class="register_table_line">
<TD width="225" align="right" bgcolor="#E7FBFF">性别：</TD>
<TD colspan="2" align="left" bordercolor="#E7E3E7">
<INPUT name="gen" type="radio" value="男" checked>
<IMG src="images/Male.gif" width="23" height="21">男
<INPUT name="gen" type="radio" value="女" class="input">
<IMG src="images/Female.gif" width="23" height="21">女 </TD>
</TR>
<TR class="register_table_line">
<TD width="225" align="right" bgcolor="#E7FBFF">爱好：</TD>
<TD colspan="2" align="left" bordercolor="#E7E3E7">
<LABEL>
<INPUT type="checkbox" name="checkbox" value="checkbox">
</LABEL> 运动
<LABEL>
<INPUT type="checkbox" name="checkbox2" value="checkbox">
</LABEL> 聊天
<LABEL>
<INPUT type="checkbox" name="checkbox22" value="checkbox">
</LABEL> 玩游戏 </TD>
</TR>
<TR class="register_table_line">
<TD width="225" align="right" bgcolor="#E7FBFF">出生日期：</TD>
<TD colspan="2" align="left" bordercolor="#E7E3E7">
<INPUT name="byear" class="borderBox" id="byear" onFocus="this.value=''" value="yyyy" size=4 maxLength=4> 年  
<SELECT name="bmon" class="borderBox">
<OPTION value="" selected>[选择月份]
<OPTION value=0>一月
<OPTION value=1>二月
<OPTION value=2>三月
<OPTION value=3>四月
<OPTION value=4>五月
<OPTION value=5>六月
<OPTION value=6>七月
<OPTION value=7>八月
<OPTION value=8>九月
<OPTION value=9>十月
<OPTION value=10>十一月
<OPTION value=11>十二月
</SELECT> 月 
<INPUT name="bday" class="borderBox" id="bday" onFocus="this.value=''" value="dd" size=2 maxLength=2> 日 </TD>
</TR>
<TR class="register_table_line">
<TD width="225" height="35" align="right" bgcolor="#E7FBFF">
<INPUT type="reset" name="Reset" value=" 重 填 ">
</TD>
<TD height="35" colspan="2" align="left" bordercolor="#E7E3E7">
<INPUT type="submit" name="Button" value="同意以下服务条款，提交注册信息"> </TD>
</TR>
<TR>
<TD colspan="3">
<TABLE width="760" border="0">
<TR>
<TD height="36">
<H4>
<IMG src="images/read.gif" width="35" height="26">阅读淘宝网服务协议 </H4>
</TD>
</TR>
<TR>
<TD height="120">
<TEXTAREA name="textarea" cols="80" rows="6" class="borderBox">
欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Taobao.com网站的各种工具和服务。
本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。
淘宝的权利和义务
1.淘宝有义务在现有技术上维护整个网上交易平台的正常运行，并努力提升和改进技术，使用户网上交易活动的顺利。
2.对用户在注册使用淘宝网上交易平台中所遇到的与交易或注册有关的问题及反映的情况，淘宝应及时作出回复。
3.对于在淘宝网网上交易平台上的不当行为或其它任何淘宝认为应当终止服务的情况，淘宝有权随时作出删除相关信息、终止服务提
供等处理，而无须征得用户的同意。
4.因网上交易平台的特殊性，淘宝没有义务对所有用户的注册资料、所有的交易行为以及与交易有关的其他事项进行事先审查。
</TEXTAREA> </TD>
</TR>
</TABLE>
</TD>
</TR>
</FORM>
</TABLE>
</div>
</BODY>
</HTML>十四、全需要全不需要
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul style="list-style: none;">
<li><input type="checkbox" name="hb" />鼠标</li>
<li><input type="checkbox" name="hb" />键盘</li>
<li><input type="checkbox" name="hb" />主机</li>
<li><input type="checkbox" name="hb" />音响</li>
<li><input type="checkbox" name="hb" />液晶显示器</li>
</ul>
<input type="button" onclick="setAll()" value="需要" id="xy" />
<input type="button" onclick="unsetAll()" value="不需要" id="bxy" />
</body>
<script>
// 全选
function setAll() {
var hb = document.getElementsByName("hb");
for (var i = 0; i < hb.length; i++) {
hb[i].checked = true;
}
}
// 全不选
function unsetAll() {
var hb = document.getElementsByName("hb");
for (var i = 0; i < hb.length; i++) {
hb[i].checked = false;
}
}
</script>
</html>
十五、左右切换文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script language="javascript">
var flag=1;
function left(){
if (flag!=1)
flag--;
switch(flag){
case 1:document.form1.adv.value="42寸液晶电视3388疯";
break;
case 2:document.form1.adv.value="商城名品女鞋5折包邮";
break;
case 3:document.form1.adv.value="母婴商城定时秒杀中";
break;
case 4:document.form1.adv.value="2010年度热销化妆品排行榜";
break;
case 5:document.form1.adv.value="\‘灯\'堂入室 华美好灯2折起";
break;
}
}
function right(){
if(flag!=5)
flag++;
switch(flag){
case 1:document.form1.adv.value="42寸液晶电视3388疯";
break;
case 2:document.form1.adv.value="商城名品女鞋5折包邮";
break;
case 3:document.form1.adv.value="母婴商城定时秒杀中";
break;
case 4:document.form1.adv.value="2010年度热销化妆品排行榜";
break;
case 5:document.form1.adv.value="\‘灯\'堂入室 华美好灯2折起";
break;
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
品牌折扣<input type="button" name="Submit" value="<" onclick="left()"/>
<input type="text" name="adv" value="alter(document.form1.adv.value)"/>
<input type="button" name="Submit" value=">" onclick="right()"/>5折包邮
</form>
</body>
</html>十六、四则运算
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>四则运算</title>
<script type="text/javascript">
function js1() {
var num1 = document.getElementById('n1').value;
num1 = parseFloat(num1);
var num2 = document.getElementById("n2").value;
num2 = parseFloat(num2);
var sum = num1 + num2;
document.getElementById("n3").value = sum;
}
function js2() {
var num1 = document.getElementById('n1').value;
num1 = parseFloat(num1);
var num2 = document.getElementById("n2").value;
num2 = parseFloat(num2);
var sum = num1 - num2;
document.getElementById("n3").value = sum;
}
function js3() {
var num1 = document.getElementById('n1').value;
num1 = parseFloat(num1);
var num2 = document.getElementById("n2").value;
num2 = parseFloat(num2);
var sum = num1 * num2;
document.getElementById("n3").value = sum;
}
function js4() {
var num1 = document.getElementById('n1').value;
num1 = parseFloat(num1);
var num2 = document.getElementById("n2").value;
num2 = parseFloat(num2);
var sum = num1 / num2;
document.getElementById("n3").value = sum;
}
</script>
</head>
<body>
第一个数：<input id="n1" type="text" />
<br> 第二个数：
<input id="n2" type="text" />
<br>
<button onclick="js1()">+</button>
<button onclick="js2()">-</button>
<button onclick="js3()">*</button>
<button onclick="js4()">/</button>
<br> 计算结果：
<input id="n3" type="text" />
<br>
</body>
</html>
十七、计算圆的周长
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>计算圆形周长和面积</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
</style>
</head>
<body>
<center>
<hgroup>
<h1>计算圆形周长和面积</h1>
</hgroup>
</center>
<!-- 添加标题 -->
<div class="container">
<p>圆的半径：<input id="r" type="text"></p>
<p>圆的周长：<input id="cir" type="text"></p>
<p>圆的面积：<input id="area" type="text"></p>
<button onclick="calculate()">计算</button>
</div>
<script>
function calculate() {
var r = parseFloat(document.getElementById('r').value);
if (!isNaN(r)) {
var area = Math.PI * r * r;
var cir = 2 * Math.PI * r;
document.getElementById('cir').value = cir.toFixed(2);
document.getElementById('area').value = area.toFixed(2);
} else {
alert("请输入正确的数字");
}
}
</script>
</body>
</html>
十八、层的隐藏显示练习
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>层的隐藏显示练习</TITLE>
<STYLE type="text/css">
<!--
/*设置图片按钮样式*/
.picButton { background-image: url(images/buttonBack.gif);
border:0 px;
margin: 0px;
padding: 0px;
height: 22px;
width: 123px;
font-size: 12px;
}
/*设置无下划线的超连接样式*/
A {
color: blue;
text-decoration: none;
}
A:hover{ /*鼠标在超链接上悬停时变为颜色*/
color: red;
}
#placeLayer {
position:absolute;
left:200px;
top:81px;
width:483px;
height:194px;
z-index:2;
background-color: #FFFFFF;
background-image: url(images/layerBack.jpg);
display:none /* 注意：在制作时，先插入层，然后人工修改层样式display: none 即可，教学时注销该行即显示层 。*/
}
-->
</STYLE>
<SCRIPT language="javascript" >
function showMe( )
{
document.getElementById("placeLayer").style.display='block';
}
function selectPlace(place)
{
document.myform.placeButton.value=place;
document.getElementById("placeLayer").style.display='none';
}
function closeMe( )
{
document.getElementById("placeLayer").style.display='none';
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="myform" method="post" action="">
<TABLE width="58%" height="296" border="0" align="center" background="images/51table_back.gif" style="background-repeat:no-repeat" >
<TR>
<TD height="36" align="right"> </TD>
</TR>
<TR>
<TD height="32" style="font-size:12px"> 地点：
<INPUT name="placeButton" type="button" class="picButton" value=" 选择/修改 " onClick=" showMe( )"></TD>
</TR>
<TR>
<TD height="209"><P><IMG src="images/next.jpg" width="180" height="186"></P>
<P> </P></TD>
</TR>
</TABLE>
</FORM>
<DIV id="placeLayer" style="background-repeat:no-repeat">
<TABLE width="476" height="109" border="0" cellspacing="0" style="font-size:12px">
<TR align="center">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD><A href="javascript: closeMe( )">关闭</A></TD>
</TR>
<TR align="center">
<TD><A href="javascript: selectPlace('北京')" >北京</A></TD>
<TD><A href="javascript: selectPlace('上海')" >上海</A></TD>
<TD><A href="javascript: selectPlace('广州')">广州</A></TD>
<TD><A href="javascript: selectPlace('武汉')">武汉</A></TD>
</TR>
<TR align="center">
<TD><A href="javascript: selectPlace('成都')">成都</A></TD>
<TD><A href="javascript: selectPlace('徐州')">徐州</A></TD>
<TD><A href="javascript: selectPlace('深圳')">深圳</A></TD>
<TD><A href="javascript: selectPlace('珠海')">珠海</A></TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
