（1）鼠标事件-onmouseover、onmouseout
<!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 language="javascript">
function overDemo(h){
if(h=="h1"){
var d1=document.getElementById("h1");
if(d1.style.display=="none"){
d1.style.display="block";
}
}else if(h=="h2"){
var d2=document.getElementById("h2");
if(d2.style.display=="none"){
d2.style.display="block";
}
}else if(h=="h3"){
var d3=document.getElementById("h3");
if(d3.style.display=="none"){
d3.style.display="block";
}
}else if(h=="h4"){
var d4=document.getElementById("h4");
if(d4.style.display=="none"){
d4.style.display="block";
}
}else{
var d5=document.getElementById("h5");
if(d5.style.display=="none"){
d5.style.display="block";
}
}
}
function outDemo(h){
if(h=="h1"){
var d1=document.getElementById("h1");
if(d1.style.display=="block"){
d1.style.display="none";
}
}else if(h=="h2"){
var d2=document.getElementById("h2");
if(d2.style.display=="block"){
d2.style.display="none";
}
}else if(h=="h3"){
var d3=document.getElementById("h3");
if(d3.style.display=="block"){
d3.style.display="none";
}
}else if(h=="h4"){
var d4=document.getElementById("h4");
if(d4.style.display=="block"){
d4.style.display="none";
}
}else{
var d5=document.getElementById("h5");
if(d5.style.display=="block"){
d5.style.display="none";
}
}
}
</script>
</head>
<body>
<div style="position:absolute;top:40px;left:30px;width:450px;height:40px;background-color:#9FF">
<table style="width:100%;height:100%;border:solid 1px;role="all";bordercolor="#FF0000">
<tr>
<td width="100" align="center" οnmοuseοut="outDemo('h1')" οnmοuseοver="overDemo('h1')">首页</td>
<td width="100" align="center" οnmοuseοut="outDemo('h2')" οnmοuseοver="overDemo('h2')">最新商品</td>
<td width="100" align="center" οnmοuseοut="outDemo('h3')" οnmοuseοver="overDemo('h3')">打折商品</td>
<td width="100" align="center" οnmοuseοut="outDemo('h4')" οnmοuseοver="overDemo('h4')">网上订单</td>
<td width="100" align="center" οnmοuseοut="outDemo('h5')" οnmοuseοver="overDemo('h5')">联系我们</td>
</tr>
</table>
</div>
<div style="position:absolute;top:80px;left:30px;width:90px;height:200px;background-color:#CCC;display:none;"id="h1">
<table style="width:100%;height:100%">
<tr>
<td>adwhd</td>
</tr>
<tr>
<td>ahhdws</td>
</tr>
<tr>
<td>hhjdk</td>
</tr>
</table>
</div>
<div style="position:absolute;top:80px;left:120px;width:90px;height:200px;background-color:#CCC;display:none;"id="h2">
<table style="width:100%;height:100%">
<tr>
<td>123456</td>
</tr>
<tr>
<td>789456</td>
</tr>
<tr>
<td>321465</td>
</tr>
</table>
</div>
<div style="position:absolute;top:80px;left:210px;width:90px;height:200px;background-color:#CCC;display:none;"id="h3">
<table style="width:100%;height:100%">
<tr>
<td>@##$%$%</td>
</tr>
<tr>
<td>)(*&^%$#$#</td>
</tr>
<tr>
<td>?{}++_)%</td>
</tr>
</table>
</div>
<div style="position:absolute;top:80px;left:300px;width:90px;height:200px;background-color:#CCC;display:none;"id="h4">
<table style="width:100%;height:100%">
<tr>
<td>AHDWEF</td>
</tr>
<tr>
<td>FHDJJK</td>
</tr>
<tr>
<td>JKLLSD</td>
</tr>
</table>
</div>
<div style="position:absolute;top:80px;left:390px;width:90px;height:200px;background-color:#CCC;display:none;"id="h5">
<table style="width:100%;height:100%">
<tr>
<td>+-*/</td>
</tr>
<tr>
<td>-+/*</td>
</tr>
<tr>
<td>++--*/</td>
</tr>
</table>
</div>
</body>
</html>
(2)文本框获得焦点、失去焦点事件-onfocus、onblur
<!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>
function change(obj){
obj.value="";
}
function unchange(obj){
if(obj.value.length==0){
obj.style.color="red";
obj.value="师姐你好";
}else{
obj.style.color="black";
}
}
</script>
</head>
<body>
<input type="text" value="helloworld" id="t1" οnfοcus="change(this)"/><br/><br/>
<input type="text" value="师姐你好" id="t2" name="bun" οnblur="unchange(this)" οnfοcus="change(this)"/>
</body>
</html>
(3)单选框-radio
<!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>
function Demo(s){
var text=document.getElementById("txt");
if(s==1){
text.value="男";
}else if(s==2){
text.value="女";
}
}
</script>
</head>
<body>
<input type="radio" name="s" value="1"id="r1" οnclick="Demo(this.value)"/>男
<input type="radio" name="s" value="2"id="r2" οnclick="Demo(this.value)"/>女
<input type="text" name="性别" value="" id="txt" />
</body>
</html>
(4)计算圆的周长和面积-onclick
<!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>
function calc(){
var r=document.getElementById("r");
var c=document.getElementById("c");
var s=document.getElementById("s");
r.value=parseInt(r.value);
c.value=parseInt(2*3.14*r.value);
s.value=parseInt(3.14*r.value*r.value);
}
</script>
</head>
<body>
<center>
<p>计算圆的周长和面积</p>
半径：<input type="text" name="半径" value="" id="r"/><br/>
周长：<input type="text" name="周长" readonly="readonly" value="" id="c"/><br/>
面积：<input type="text" name="面积" readonly="readonly" value="" id="s"/><br/>
<input type="button" name="result" value="计算" id="result" οnclick="calc()"/>
</center>
</body>
</html>
(5)计算总成绩与平均成绩-parseInt
<!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>
function calc(obj){
var ch=document.getElementById("ch").value;
var ma=document.getElementById("ma").value;
var en=document.getElementById("en").value;
var chinese=parseInt(ch);
var math=parseInt(ma);
var english=parseInt(en);
var sum=chinese+english+math;
var avg=(sum)/3;
if(obj.value=="总成绩"){
document.getElementById("sum").value=sum;
}else if(obj.value=="平均成绩"){
document.getElementById("avg").value=avg;
}
}
</script>
</head>
<body>
<center>
<table bgcolor="#00CCFF" align="center" width="200px" top="20px" border="FF0000">
<tr>
<td width="100%">科目</td>
<td>成绩</td>
</tr>
<tr>
<td width="100%">语文</td>
<td>
<input type="text" name="chinese"id="ch"/>
</td>
</tr>
<tr>
<td width="100%">数学</td>
<td>
<input type="text" name="math"id="ma"/>
</td>
</tr>
<tr>
<td width="100%">英语</td>
<td>
<input type="text" name="english" id="en"/>
</td>
</tr>
<tr>
<td width="100%">
<input type="button" value="总成绩" οnclick="calc(this)"
</td>
<td>
<input type="text" name="sum" id="sum"/>
</td>
</tr>
<tr>
<td width="100%">
<input type="button" value="平均成绩" οnclick="calc(this)"
</td>
<td>
<input type="text" name="avg" id="avg"/>
</td>
</tr>
</table>
</center>
</body>
</html>
(6)建议购物车-parseInt、parseFloat
<!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>
function sum(){
var num=parseInt(document.getElementById("num").value);
var price=parseInt(document.getElementById("price").value);
var trans=parseFloat(document.getElementById("trans").value);
var sum=num*price+trans*num;
document.getElementById("num").value=num;
document.getElementById("price").value=price;
document.getElementById("trans").value=trans;
document.getElementById("summary").value=sum;
}
</script>
</head>
<body>
<center>
<table position="absolute" align="center" bgcolor="#FF9999" width="556" top="40px" solid="1px" border="#FF0000" >
<tr>
<td colspan="5">简易购物车</td></tr>
<tr>
<td width="128">商品名称</td>
<td width="95">数量（件）</td>
<td width="99">单价（美元）</td>
<td width="98">运费（美元）</td>
<td width="114">
<input type="button" value="合计" οnclick="sum()"/>
</td>
</tr>
<tr>
<td width="128">跑跑道具</td>
<td width="95">
<input type="text" width="80" id="num"/>
</td>
<td width="99">
<input type="text" width="80"id="price"/>
</td>
<td width="98">
<input type="text" width="80" id="trans"/>
</td>
<td width="114">
<input type="text" width="80" readonly="readonly" id="summary"/>
</td>
</tr>
</table>
</center>
</body>
</html>
(7)计算闰年-onclick
<!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>
function calc(){
var year=parseInt(document.getElementById("year").value);
if(year%4==0||year%100==0&&year%4==0){
document.getElementById("tex").value=year+"是闰年"
}else{
document.getElementById("tex").value=year+"不是闰年"
}
}
</script>
</head>
<body>
请输入需要判断闰年的年份：<br/>
<input type="text" name="year" id="year"/>
<input type="button" value="计算" id="btn" οnclick="calc()"/>
<input type="text" id="tex"/>
</body>
</html>
转载于:https://blog.51cto.com/11302790/1768182
扫一扫
4877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
