js效果

于 2013-12-03 15:15:34 发布
阅读量659 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haining711/article/details/17096235
版权

代码：

<!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>

function aa(){

document.write("你好！");

}

</script>

</head>

 

<body>

<input type="button" name="" value="按钮" οnclick="aa()" />

</body>

</html>

效果：

 

 

第二章

代码：

Open（）：打开一个新窗口

 <head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script>

function aa(){

open("adv.html","","statusbars=0,location=0,menubars=0");

}

</script>

showModalDialog（）：打开模式窗口

  <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 bb(){

  var a=window.showModalDialog("Untitled-3.html","模式窗口练习--网页对话框","height=100,width=200");

  document.from1.textfield.value=a;

}

 

function cc(){

var q=document.from1.textfield.value;

confirm("您本次购买的商品如下：商品名称：跑跑游戏道具；商品数量：5件；商品单价：12.5美元；商品运费：10美元；费用总计：72.5美金送货地址："+"'q'"+"请确认以上信息是否有误！");

}

</script>

</head>

 

 

<body>

<form id="from1" name="from1" method="post" action="">

<table width="1055" border="1" align="center" bgcolor="#00FF00">

  <tr>

    <td colspan="5" align="center">简易购物车</td>

  </tr>

  <tr align="center">

    <td width="179" >商品名称</td>

    <td width="222" >数量（件）</td>

    <td width="266" >单价（美元）</td>

    <td width="266" >运费（美元）</td>

      <td width="88" >合计</td>

  <tr align="center">

    <td height="88" >跑跑道具</td><td >5</td><td >12.5</td><td >10</td><td >72.5</td>

  </tr>

  <tr align="center">

    <td height="25" colspan="5" ><a href="javascript:bb()">填写你的邮寄地址</a>

      <input name="textfield" type="text" size="80"/>

      <input type="button" name="Submit2" value="提交订单"  οnclick="cc()"/>

    </td>

    </tr>

</table>

</form>

 

</body>

</html>

效果：

 

 

制作钟表：

 <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script>

 

function o(){

var a=new Date();

var b=a.getHours();

var cc=a.getFullYear()+"年"+(a.getMonth()+1)+"月"+a.getDate()+"日"+"星期"+a.getDay()+" "+b+"时"+(a.getMinutes()+1)+"分"+a.getSeconds()+"秒";

 

if(b<=12){

cc=cc+"AM";

}else{

cc=cc+"PM";

}

document.getElementById("aa").value=cc;

setTimeout("o()",1000);

}

</script>

</head>

 

<body  οnlοad="o()">

今天是：<input id="aa" type="text"  value="" size="70" />

</body>

</html>

效果：

 

 

第三章

代码：

双对联广告：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title> 

<script>

var x=50,y=60;      //浮动广告的初始位置

var xin=true,yin=true; //xin为真，则向右运动，否则向左运动

                        //yin为真，则向下运动，否则向上运动

var step=1;         //移动的距离

var delay=10;       //移动的时间间隔

function floatAD(){

var L=T=0;           //L左边界 ，T右边界

//层移动的右边界

var R=document.body.offsetWidth-document.getElementById("fly").offsetWidth;

//层移动的下边界

var B=document.body.offsetHeight-document.getElementById("fly").offsetHeight; 

document.getElementById("fly").style.left=x;    //层移动后的左边界

document.getElementById("fly").style.top=y;     //曾移动后的上边界

x=x+step*(xin?1:-1);                            //判断水平方向

if(x<L){xin=true;x=L;}                          //到达边界后的处理

if(x>R){xin=false;x=R;}

y=y+step*(yin?1:-1);

if(y<T){yin=true;y=T;}

if(y>T){yin=false;y=B;}

setTime("floatAD()",delay)                       //每隔多长时间调用一次

}

</script>

</head>

 

<body onLoad="floatAD()">

<input src="../../图片/images/top.jpg" >

<img src="../../图片/images/content1.jpg" >

<img src="../../图片/images/content2.jpg" >

<img src="../../图片/images/foot.jpg" >

<div id="fly" style="position:absolute;left=16px;top=80px;

                    width:265px;height:135px;z-index:1;">

<a href="#"><img src="../../图片/images/lady_0007.jpg" width="264" height="134" border="0" ></a>

</div>

 

</body>

</html>

效果：

 

 

全选全不选

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

 

<script type="text/javascript">

function aa(can){

alert("---------------");

var a=document.getElementByName("name");

 

  for(var i=0;i<a.length;i++){

       

   if(a[i].type=="name"){

    a[i].checked=can; 

       }

  }

 

}}

</script>

</head>

 

<body>

你喜欢喝哪种类型咖啡<br /><br/><br/>

<input name="name" type="checkbox" value="c" />蓝山咖啡<br/>

<input name="name" type="checkbox" value="c" />摩卡<br/>

<input name="name" type="checkbox" value="c" />拿铁<br/>

<input name="name" type="checkbox" value="c" />卡布奇诺<br/>

<input name="name" type="checkbox" value="c" />爱尔兰咖啡<br/><br/>

<input name="" type="button" value="全喜欢"  οnclick="aa(true)"/>

<input name="" type="button" value="全不喜欢"  οnclick="aa(false)" />

</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>

function aa( )

{

   document.getElementById("shouji").style.display="none";

   document.getElementById("youxi1").style.display="none";

   document.getElementById("shouji2").style.display="none";

}

function bb(youxi,shouji) {

document.getElementById(shouji).style.display="block";

document.getElementById(youxi).style.display="none";

document.getElementById(youxi+"1").style.display="none";

document.getElementById(youxi+"2").style.display="block";

 

document.getElementById(shouji+"1").style.display="block";

document.getElementById(shouji+"2").style.display="none";

 

}

</SCRIPT>

</HEAD>

<body οnlοad="aa()">

<TABLE border="0" align="center" cellpadding="0" cellspacing="0">

  <TR>

    <TD><img src="../../图片/第五章图片/gameTab1.jpg" id="youxi1" 

οnmοuseοver="bb('youxi','shouji')" /><IMG src="../../图片/第五章图片/gameTab2.jpg"  id="youxi2" ></TD>

    <TD><IMG src="../../图片/第五章图片/mobileTab1.jpg" name="name" id="shouji1"

onMouseOver="bb('shouji','youxi')"><img src="../../图片/第五章图片/mobileTab2.jpg" width="98"   id="shouji2" /></TD>

  </TR>

<TR>

    <TD colspan="2"><IMG id="youxi" src="../../图片/第五章图片/game.jpg" ><img id="shouji" src="../../图片/第五章图片/mobile.jpg" /></TD>

  </TR>

</TABLE>

</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>

function ming(){

var a=document.form.textfield.value;

if(a.length==0){

   alert("用户名不能为空");

   return false;

}

if(a.length<=4 || a.length>=16){

   alert("用户名输入的长度4-16个字符");

   return false;

}

for(var i=0;i<name.length;i++){

var a=name.value.toLowerCase().charAt(i)

if(!((a>"0" && a<"9"))&&(!(a>="a" && a<="z"))&& (a!="_")){

alert("用户名包含非法字符，只能包含字母a-z，数字0-9和下划线_");

return false;

}}

return true;

}

 

 

function mima(){

var mima=document.form.textfield2.value;

if(mima.length==0){

   alert("密码不能为空");

   return false;

}

if(mima.length<6 || mima.length>12){

   alert("密码输入的长度6-16个字符");

   return false;

}

return true;

}

 

 

function riqi(){

var a=document.form.textfield4.value;

if(a==""){

alert("请填写出生日期");

return false;

}else if(a.length<10){

alert("出生日期格式错误");

return false;

}else{

//截取字符串分别获得年月日

var nian=a.substring(0,4);

var yue=a.substring(5,7);

var ri=a.substring(8,a.length);

if(birth.charAt(4)!="-"||a.charAt(7)!="-"){//判断日期是否符合格式要求

alert("出生日期格式yyyy-mm-dd");

document.form.textfield4.select();

return false;

}else if(isNaN(year)||isNaN(month)||isNaN(day)){

alert("年月日必须是数字");

document.form.textfield4.select();

return false;

}

var time=new Date();

if(parseInt(nian,10)<1900||parseInt(nian,10)>time.getYear()){

alert("出生日期范围从1900年-"+time.getYear()+"年");

document.myform.textfield4.select();

return false;

}else if(parseInt(yue)<1||parseInt(yue)>12){

alert("您输入的月份不在1-12月之间");

document.myform.textfield4.select();

return false;

}else if(parseInt(ri,10)<1||parseInt(ri,10)>31){

alert("您输入的天数不在1-31之间");

document.form.textfield4.select();

return false;

}

}

return true;

}

function aa(){

if(ming()&&mima()&&riqi()){

return true;

}

return false;

}

</script>

</head>

 

<body>

<form name="form" method="post" action="Untitled-2.html" οnsubmit="return aa()">

<table width="100%" border="0">

  <tr>

    <td colspan="3">

<img src="../../图片/第五章图片/images/top (2).jpg" width="1002" height="117" /></td>

    <td width="1%"> </td>

  </tr>

  <tr>

    <td width="17%"> </td>

    <td width="19%"><div align="center">*昵称：</div></td>

    <td width="63%"><input name="textfield" type="text" size="65" /> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td>英文字母，数字或者下划线，长度为4-16个字符</td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td><div align="center">*密码：</div></td>

    <td><input name="textfield2" type="text" size="65" /></td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td>6-16个字符组成字母或数字组成</td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td><div align="center">*重新输入密码:</div></td>

    <td><input name="textfield3" type="text" size="65" /></td>

    <td> </td>

  </tr>

  <tr>

    <td><div align="center">您的个人信息</div></td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td><div align="center">*出生日期：</div></td>

    <td><input name="textfield4" type="text" size="65" />

      出生日期格式YYYY-mm-dd</td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td><div align="center">性别：</div></td>

    <td>

        <input type="radio" name="radiobutton" value="radiobutton"  checked="checked"/>男 

<input type="radio" name="radiobutton" value="radiobutton" />女</td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td><div align="center">电子邮件地址：</div></td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td><div align="center">所在地区</div></td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td><div align="center">国家：</div></td>

    <td><select name="select">

      <option value="" >中华人民共和国</option>

      <option value="">美国</option>

      <option value="">小日本</option>

    </select></td>

    <td> </td>

  </tr>

  <tr>

    <td><div align="right"></div></td>

    <td><div align="center">省份：</div></td>

    <td><select>

<option value="">北京</option>

<option value="">河北</option>

</select></td>

    <td> </td>

  </tr>

  <tr>

    <td><div align="center">相关服务条款</div></td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td colspan="2"><input type="checkbox" name="checkbox" value="checkbox" />我同意以下条款 </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td colspan="2">腾讯QQ用户服务条款

<p class="STYLE1">本着有效利用QQ号码资源，保障更多的合法用户权益为目的，对于恶善注册或长期不登陆的QQ号码，系统有权回收。</p>

    <p class="STYLE1">腾讯公司具有对以上条款内容的最终解释权。</p></td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td colspan="2"><div align="center">

<input type="submit" name="Submit" value="提交注册"  /></div>

<span class="STYLE2"></span></td>

    <td> </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>

function aa(){

var a = document.form1.textfield.value;

var b = document.form1.textfield2.value;

var c = document.form1.textfield3.value;

if(a==""){

alert("请输入QQ号码");

document.form1.textfield.focus();

return false;

}

if(isNaN(a)){

alert("QQ号码必须是数字");

document.form1.textfield.focus();

}

   if(b==""){

alert("请输入QQ密码");

document.form1.textfield2.focus();

}

if(b.length<6){

alert("密码长度不能小于6位");

doucment.form1.textfield2.select();

}

if(c==""){

alert("请输入验证码");

document.form1.textfield3.focus();

}

if(c!="CMMZ"){

alert("验证码输入错误");

document.form1.textfield3.select();

}else{

document.form1.submit();

}

}

</script>

 

<style type="text/css">

<!--

#Layer2 {

position:absolute;

left:155px;

top:22px;

width:466px;

height:26px;

z-index:1;

}

-->

</style>

</head>

 

<body>

<div id="Layer2">拍拍注册</div>

<form id="form1" name="form1" method="post" action="Untitled-2.html">

<div id="Layer1"></div>

<table width="73%" border="1" align="center">

  <tr>

    <td colspan="2">

<img src="../../图片/images/login_head.gif" width="７81" height="27" /></td>

    <td width="1%" rowspan="7"> </td>

  </tr>

  <tr>

    <td width="20%"><div align="center">QQ号码   <a href="#"></a></div>      </td>

    <td width="79%">

<input name="textfield" type="text" size="45" value="请输入QQ号码" 

onFocus="this.value=''"/>

      <a href="#">忘记QＱ号码>></a></td>

    </tr>

  <tr>

    <td><div align="center">QQ密码</div>      </td>

    <td><input name="textfield2" type="text" size="45" />

      <a href="#"> 忘记密码>></a></td>

    </tr>

  <tr>

    <td height="39"><div align="center">验证码

    </div>      </td>

    <td><input name="textfield3" type="text" size="45" value="请输入以下的文字" onFocus="this.value=''"/></td>

    </tr>

  <tr>

    <td><span class="STYLE1"></span>      <div align="center" class="STYLE1"><a href="#"></a></div>      <span class="STYLE1"></span><span class="STYLE1"></span>

      <div align="center" class="STYLE1">

        <p> </p>

        <p> </p>

      </div>      <span class="STYLE1"></span></td>

    <td><p><a href="#">看不清，换一张</a></p>

      <p><a href="#"><img src="../../图片/2/code.jpg" width="130" height="53" /></a></p></td>

    </tr>

  

  

  <tr>

    <td rowspan="2"><span class="STYLE1"></span><span class="STYLE1"></span></td>

    <td> </td>

    </tr>

  <tr>

    <td><img src="../../图片/2/login_submit.gif" οnclick="aa()" /></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>

</head>

<script language="javascript">

   

function changCity(){

  var arr=new Array();

  arr["北京"]=["北京市","张家口市"];

  arr["上海"]=["上海市","唐山市"];

  arr["天津"]=["天津市","无锡市"];  

  var index=document.getElementById("pro").value;  

  document.getElementById("city").options.length=0;

 

  for(var i in arr[index]){ 

  var option1=new Option(arr[index][i],arr[index][i]);

  document.getElementById("city").options.add(option1);

     }

  }

  

  

  function changCityi(){

  var arr=new Array();

  arr["北京市"]=["东城区","西城区"];

  arr["上海市"]=["黄浦区","卢湾区"];

  arr["天津市"]=["渝中区","江北区"];

  arr["张家口市"]=["宣化区","下花园区"];

  arr["唐山市"]=["丰润区","丰南区"];

  arr["无锡市"]=["宝山区","松江区"];

  

  var index=document.getElementById("city").value;  

  document.getElementById("x").options.length=1;

 

  for(var i in arr[index]){ 

  var option1=new Option(arr[index][i],arr[index][i]);

  document.getElementById("x").options.add(option1);

   }

}

</script>

 

<body>

省

 

<select id="pro" name="pro" onChange="changCity()">

  <option value="">请选择省</option>

  <option value="北京">北京</option>

  <option value="上海">上海</option>

  <option value="天津">天津</option>

</select>

 

市

  

  <select name="city" id="city" onChange="changCityi()">

   <option value="">请选择市</option>

    </select>

区 

    <select name="city" id="x">

   <option value="">请选择区</option>

    </select>

 

</body>

</html>



三级联动

<script language="javascript">
   
function changCity(){
  var arr=new Array();
  arr["北京"]=["北京市","张家口市"];
  arr["上海"]=["上海市","唐山市"];
  arr["天津"]=["天津市","无锡市"];  
  var index=document.getElementById("pro").value;  
  document.getElementById("city").options.length=0;
 
  for(var i in arr[index]){ 
  var option1=new Option(arr[index][i],arr[index][i]);
  document.getElementById("city").options.add(option1);
     }
  }
  
  
  function changCityi(){
  var arr=new Array();
  arr["北京市"]=["东城区","西城区"];
  arr["上海市"]=["黄浦区","卢湾区"];
  arr["天津市"]=["渝中区","江北区"];
  arr["张家口市"]=["宣化区","下花园区"];
  arr["唐山市"]=["丰润区","丰南区"];
  arr["无锡市"]=["宝山区","松江区"];
  
  var index=document.getElementById("city").value;  
  document.getElementById("x").options.length=1;
 
  for(var i in arr[index]){ 
  var option1=new Option(arr[index][i],arr[index][i]);
  document.getElementById("x").options.add(option1);
   }
}
</script>


<body>
省


<select id="pro" name="pro" onChange="changCity()">
  <option value="">请选择省</option>
  <option value="北京">北京</option>
  <option value="上海">上海</option>
  <option value="天津">天津</option>
</select>


市
  
  <select name="city" id="city" onChange="changCityi()">
   <option value="">请选择市</option>
    </select>
区 
    <select name="city" id="x">
   <option value="">请选择区</option>
    </select>

 

 

 

haining711
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值