HTML基础（二）_function check () {if(checkname ()&&checkpwd ()&&c-CSDN博客

本文链接：https://blog.csdn.net/dd491194651/article/details/20132269

表单模版，带Javascript

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>新用户注册</TITLE>
 
<STYLE  type="text/css">
.p1{font-size:12px;text-align:right; height:28px;}
div{font-size:12px;}
.font_error{font-size:12px;color:#ff0000;}
.font_true{font-size:12px;color:#61b16a;}
</STYLE>
</HEAD>

<script type="text/javascript">
 function checkName(){
  var name=  document.getElementById("username").value;
  var div =document.getElementById("userinfor");
  if(name==""){
   div.innerHTML="<font color='red'>用户名不能为空！</font>";
    return false;
  }
  if(!(name.length>=4&&name.length<=16)){
    div.innerHTML="用户名必须是4-16位！";
    return false;
  }
  if(!(name.substring(0,1)>='a'&&name.substring(0,1)<='z')){
   div.innerHTML="用户名必须字母开头！";
    return false;
  }else{
    div.innerHTML="<IMG src=image/1.gif>";
  }
  return true;
 }
 
 function checkPass(){
 var pass=  document.getElementById("pwd").value;
   var div =document.getElementById("pwdinfor");
  if(pass==""){
    div.innerHTML="<font color='red'>密码不能为空！</font>";
    return false;
  }
  if(pass.length<6){
    div.innerHTML="密码必须大于6位！";
    return false;
  }else{
    div.innerHTML="<IMG src=image/1.gif>";
  }
   return true;
 }
  function checkMail(){
 var email=  document.getElementById("email").value;
 var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;
  var div =document.getElementById("a");
  if(!reg.test(email)){
    div.innerHTML="<font color='red'>邮箱格式不正确！</font>";
    return false;
  }
   
   return true;
 }
 
 function check(){
   if(checkName()&&checkPass()&&checkMail()){
    return true;
   }else{
    return false;
   }
 }
</script>

<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

 
<TABLE width="760" border="0" cellspacing="0" cellpadding="0" align="center">
  <FORM action="http://www.baidu.com" method="post" name="myform"><TR>
    <TD><IMG src="image/reg1-top.jpg"></TD>
  </TR>
  <TR>
    <TD style="border-left:1 #7Bcc87 solid;border-right:1 #7Bcc87 solid;" bgcolor="#F9F8FF"><TABLE width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
  <TR><TD class="p1" width="100"> 用户名：</TD>
    <TD width="180"> <INPUT id="username" name="username" type="text" size="25" onBlur="checkName()"></TD>
	<TD  > 
	<DIV id="userinfor">用户名以字母开头，4-16位字母、数字组成</DIV>
	</TD>
  </TR>
  <TR><TD class="p1" > 密  码：</TD>
    <TD><INPUT id="pwd" name="pwd" type="password" size="28" onBlur="checkPass();"></TD>
	<TD> <DIV id="pwdinfor">设置登陆密码，由6-16位字母、数字、符号组成！</DIV></TD>
  </TR>
  <TR><TD class="p1" >确认密码：</TD>
    <TD><INPUT name="repwd" type="password" size="28" onBlur="checkrepwd(pwd,repwd);"></TD>
	<TD> <DIV id="repwdinfor">请再输入一次您的密码！</DIV></TD>
  </TR>
  <TR><TD class="p1" > Email邮箱：</TD>
    <TD><INPUT name="email" id="email" type="text" size="25" onBlur="checkMail();"></TD>
	<TD> <DIV id="a">请填写您常用邮箱，因用此邮箱来取回密码！</DIV></TD>
  </TR><TR><TD class="p1" > 提  问：</TD>
    <TD><SELECT name="question" onBlur="checkquest(question);">
									<OPTION value="">-=请您选择=-</OPTION>
									<OPTION value="place">我的出生地点是那里？</OPTION>
									<OPTION value="birthday">我的生日是什么？</OPTION>
									<OPTION value="girlfriend">我的女朋友叫什么？</OPTION>
									<OPTION value="girlbirthday">我女朋友的生日是什么？</OPTION>
									<OPTION value="father">我的父亲叫什么？</OPTION>
									<OPTION value="fatherbirthday">我父亲的生日是什么？</OPTION>
									<OPTION value="mather">我的母亲叫什么？</OPTION>
									<OPTION value="matherbirthday">我母亲的生日是什么？</OPTION>
									<OPTION value="address">我的家庭住址是那里？</OPTION>
									<OPTION value="love">我的初恋叫什么？</OPTION>
									<OPTION value="pet">我最喜欢的宠物是什么？</OPTION>
									<OPTION value="prettyplace">我最想去的地方是那里？</OPTION>
									</SELECT></TD>
			<TD> <DIV id="questinfor">请选择密码找回问题！</DIV></TD>
  </TR><TR><TD class="p1"> 回  答：</TD>
    <TD><INPUT name="answer" type="text" size="25" onBlur="checkans(answer)"></TD>
	<TD> <DIV id="ansinfor">填写问题答案！</DIV></TD>
  </TR>
</TABLE>
</TD>
  </TR>
  <TR>
    <TD background="image/reg1-end.jpg" height="63" align="center">  
	  <input type="submit" value="注 册" onClick="return check()"/>	</TD>
  </TR></FORM>
</TABLE>


</BODY>
</HTML>

迅雷首页动画效果：JavaScript实现

<!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">
                   var NowFrame = 1;
				var MaxFrame = 4;
				function scrollp(d1) {
				   if(Number(d1)){
				    clearTimeout(theTimer);
				    NowFrame=d1;              
			    	}
					for(var i=1;i<(MaxFrame+1);i++){
					  if(NowFrame==i){
				    	document.getElementById(NowFrame).style.display='block';    
					  }else{
					   document.getElementById(i).style.display='none'; 
					        }
					}
					
			        if(NowFrame == MaxFrame){  
					NowFrame = 1;}
				      else{
					  NowFrame++;
				    	}
					
					 theTimer=setTimeout('scrollp()',1000); 
					
				}
</SCRIPT> 

<body οnlοad="scrollp()">
<div align="center">
<IMG src="p1.jpg"   id="1" style="display:none;">
<IMG src="p2.jpg"   id="2" style="display:none;">
<IMG src="p3.jpg"   id="3" style="display:none;">
<IMG src="p4.jpg"   id="4" style="display:none;">

<div style="position:relative;top:-55px;z-index:20;" align="center">
      <img src="s1.png" id="s1" onMouseMove="scrollp(1)">
      <img src="s2.png" id="s2" onMouseMove="scrollp(2)">
      <img src="s3.png" id="s3" onMouseMove="scrollp(3)">
      <img src="s4.png" id="s4" onMouseMove="scrollp(4)">
</div>
</div>

</body>
</html>