会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132358个问题
JAVA 全系列/第四阶段:网页编程和设计/HTML5(旧) 661楼

老师,我用JQ,没有变色?jq这不是引入了吗?

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>隔行变色-CSS</title>
		<style type="text/css">
			.datalist{
				border:1px solid #007108;	
				font-family:Arial;
				border-collapse:collapse;	
				background-color:#d9ffdc;	
				font-size:14px;
			}	
			
			.datalist th{
				border:1px solid #007108;	
				background-color:#00a40c;	
				color:#FFFFFF;				
				font-weight:bold;
				padding-top:4px; padding-bottom:4px;
				padding-left:12px; padding-right:12px;
				text-align:center;
			}
			
			.datalist td{
				border:1px solid #007108;	
				text-align:left;
				padding-top:4px; 
				padding-bottom:4px;
				padding-left:10px; 
				padding-right:10px;
				
			}	
		</style>
		 	<script src="is/jquery-1.9.1.js" type="text/javascript" charset="UTF-8"></script>
			<script type="text/javascript">
				
			/*window.onload=function(){
					
					//获得所有的tr对象
					
					var tr = document.getElementsByTagName("tr");
					
					for(var i=0;i<tr.length;i++){
						
						if(i%2==0){
							
							tr[i].style.backgroundColor="red";
						}else{
							tr[i].style.backgroundColor="green";
						}
						
					}
					
				}*/
				
				$(function(){
					
					$("tr:odd").css("background-color","red");	
				})
				
				
			</script>
		
	</head>
	<body>
		<table class="datalist" summary="list of members in EE Studay" id="oTable">
			<tr>
				<th scope="col">Name</th>
				<th scope="col">Class</th>
				<th scope="col">Birthday</th>
				<th scope="col">Constellation</th>
				<th scope="col">Mobile</th>
			</tr>
			<tr>					<!-- 奇数行 -->
				<td>isaac</td>
				<td>W13</td>
				<td>Jun 24th</td>
				<td>Cancer</td>
				<td>1118159</td>
			</tr>
		    <tr class="altrow">		<!-- 偶数行 -->
				<td>fresheggs</td>
				<td>W610</td>
				<td>Nov 5th</td>
				<td>Scorpio</td>
				<td>1038818</td>
			</tr>
			<tr>					<!-- 奇数行 -->
				<td>girlwing</td>
				<td>W210</td>
				<td>Sep 16th</td>
				<td>Virgo</td>
				<td>1307994</td>
			</tr>
			<tr class="altrow">		<!-- 偶数行 -->
				<td>tastestory</td>
				<td>W15</td>
				<td>Nov 29th</td>
				<td>Sagittarius</td>
				<td>1095245</td>
			</tr>
			<tr>					<!-- 奇数行 -->
				<td>lovehate</td>
				<td>W47</td>
				<td>Sep 5th</td>
				<td>Virgo</td>
				<td>6098017</td>
			</tr>
			<tr class="altrow">		<!-- 偶数行 -->
				<td>slepox</td>
				<td>W19</td>
				<td>Nov 18th</td>
				<td>Scorpio</td>
				<td>0658635</td>
			</tr>
			<tr>					<!-- 奇数行 -->
				<td>smartlau</td>
				<td>W19</td>
				<td>Dec 30th</td>
				<td>Capricorn</td>
				<td>0006621</td>
			</tr>
			<tr class="altrow">		<!-- 偶数行 -->
				<td>shenhuanyan</td>
				<td>W25</td>
				<td>Jan 31th</td>
				<td>Aquarius</td>
				<td>0621827</td>
			</tr>
			<tr>					<!-- 奇数行 -->
				<td>tuonene</td>
				<td>W210</td>
				<td>Nov 26th</td>
				<td>Sagittarius</td>
				<td>0091704</td>
			</tr>
			<tr class="altrow">		<!-- 偶数行 -->
				<td>ArthurRivers</td>
				<td>W91</td>
				<td>Feb 26th</td>
				<td>Pisces</td>
				<td>0468357</td>
			</tr>
			<tr>					<!-- 奇数行 -->
				<td>reconzansp</td>
				<td>W09</td>
				<td>Oct 13th</td>
				<td>Libra</td>
				<td>3643041</td>
			</tr>
			<tr class="altrow">		<!-- 偶数行 -->
				<td>linear</td>
				<td>W86</td>
				<td>Aug 18th</td>
				<td>Leo</td>
				<td>6398341</td>
			</tr>
			<tr>					<!-- 奇数行 -->
				<td>laopiao</td>
				<td>W41</td>
				<td>May 17th</td>
				<td>Taurus</td>
				<td>1254004</td>
			</tr>
			<tr class="altrow">		<!-- 偶数行 -->
				<td>dovecho</td>
				<td>W19</td>
				<td>Dec 9th</td>
				<td>Sagittarius</td>
				<td>1892013</td>
			</tr>
			<tr>					<!-- 奇数行 -->
				<td>shanghen</td>
				<td>W42</td>
				<td>May 24th</td>
				<td>Gemini</td>
				<td>1544254</td>
			</tr>
			<tr class="altrow">		<!-- 偶数行 -->
				<td>venessawj</td>
				<td>W45</td>
				<td>Apr 1st</td>
				<td>Aries</td>
				<td>1523753</td>
			</tr>
			<tr>					<!-- 奇数行 -->
				<td>lightyear</td>
				<td>W311</td>
				<td>Mar 23th</td>
				<td>Aries</td>
				<td>1002908</td>
			</tr>
		</table>
	</body>
</html>

image.png

JAVA 全系列/第四阶段:网页编程和设计/Jquery(旧) 662楼

老师,我这代码运行了 动画效果显示不出来



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

.cen{

width:200px;

height:200px;

background-color:#d5093c ;

/*阴影   水平方向偏移  垂直方向偏移  模糊度   阴影的颜色*/

box-shadow: 0px 0px  70px #D5093C;

/*执行动画的调用*/

animation:1s aj ;

}

.lef{

/*倒圆角指令*/

border-radius:100px ;

/*左上右下  右上左下*/

/*border-radius:10px  60px ;*/

/*border-radius:10px 20px 30px 40px ;*/

position:absolute;

top:200px;

left:200px;

}

.rig{

border-radius: 100px;

position:absolute;

top:200px;

left:341px;

}

.c{

/*旋转角度*/

transform: rotate(45deg);

position:absolute;

top:269px;

left:271px;

}

/*div:hover{

/*放大的倍数*/

/*transform: scale(1.3);*/

/*X:水平的位移    Y:垂直的位移      负数:上*/

/* transfrom:translate(0px,-5px);*/

/*2D角度的旋转*/

/*transform:skew(40deg,45deg);*/

/*CSS3中的动画*/

@keyframes aj{

0%{transform: scale(1) rotate(45deg);}

50%{transform: scale(1.1) rotate(45deg);}

100%{transform: scale(1) rotate(45deg);}

</style>

</head>

<body>

<div   class="cen lef"></div>

<div   class="cen c"></div>

<div   class="cen rig"></div>

</body>

</html>

<!--

CSS3中常用的属性

/*倒圆角指令*/

border-radius:100px ;

/*左上右下  右上左下*/

/*border-radius:10px  60px ;*/

/*border-radius:10px 20px 30px 40px ;*/

/*旋转角度*/

transform: rotate(45deg);

/*放大的倍数*/

/*transform: scale(1.3);*/

/*X:水平的位移    Y:垂直的位移      负数:上*/

/* transfrom:translate(0px,-5px);*/

/*2D角度的旋转*/

/*阴影   水平方向偏移  垂直方向偏移  模糊度   阴影的颜色*/

box-shadow: 0px 0px  70px #D5093C;

-->


JAVA 全系列/第四阶段:网页编程和设计/CSS3(旧) 666楼
JAVA 全系列/第四阶段:网页编程和设计/HTML5(旧) 667楼
JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 668楼
JAVA 全系列/第四阶段:网页编程和设计/HTML5(旧) 669楼
JAVA 全系列/第四阶段:网页编程和设计/CSS3(旧) 670楼
JAVA 全系列/第四阶段:网页编程和设计/CSS3(旧) 671楼

老师为什么我按照代码写的,结果却很不一样呢?代码如下:


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script>
   var yan;
   /***********验证码的生成***************/
   function YZM(){
    
    //4位随机整数
    yan = Math.floor(Math.random()*9000+1000);
    //获得span对象
    var span = document.getElementById("yzm_span");
    span.innerText = yan;
   }
   
   /************提取公部分***************/
   function check(id,reg){
    
    //获取对应id的value
    var uid = document.getElementById(id);
    var val = uid.value;
    
    //获取alt属性
    var alt = uid.alt;
    
    //获得span对象
    var span = document.getElementById(id+"_span");]
    
    if(val == null || val == ""){
     
     span.innerText = "×"+alt+"不能为空";
     span.style.color = "red";
     return false;
    }else if(reg.test(val)){
     
     span.innerText = "√"+alt+"合法";
     span.style.color = "green";
     return true;
    }else{
     
     span.innerText = "×"+alt+"不合法";
     span.style.color = "red";
     return false;
    }
   }
   
   /**********检验用户名的方法******************/
   function checkName(){
    //汉字的正则表达式
    var  reg=/^[\u4e00-\u9fa5]{3,5}$/;
    
    return check("uname",reg);
   }
   
   /*********校验邮箱方法**************/
   function  checkEmail(){
    //邮箱的正则表达式
    
    var  reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    
       return check("email",reg);
   }
   
   
   /*********检验密码方法**************/
   function  checkPwd(){
    //密码的正则表达式
    
    var  reg=/^\d{3,6}$/;
    
       return check("pwd",reg);
   }
   
   /*********检验手机号方法**************/
   function  checkPhone(){
    //手机号的正则表达式
    
    var  reg=/^\d{11}$/;
    
       return check("phone",reg);
   }
   
   /***********性别校验***************/
   function checkSex(){
    
    //获取所有性别对象
    var sex = document.getElementById("sex");
    
    //获取span对象
    var span = document.getElementById("sex_span");
    for(var i in sex){
     
     if(sex[i].checked){
      
      span.innerHTML = "性别选择成功"
      span.style.color = "green";
      return true;
     }
    }
    
    span.innerHTML = "请选择性别";
    span.style.color = "red";
    return false;
   }
   
   /***********爱好校验***************/
   function checkHob(){
    
    //获取所有爱好对象
    var hob = document.getElementById("hobby");
    
    //获取span对象
    var span = document.getElementById("hobby_span");
    for(var i in hob){
     
     if(hob[i].checked){
      
      span.innerHTML = "爱好选择成功"
      span.style.color = "green";
      return true;
     }
    }
    
    span.innerHTML = "请选择爱好";
    span.style.color = "red";
    return false;
   }
   
   /*********籍贯校验***********/
   function  checkAdress(){
    
    var  sel=document.getElementById("sel").value;
    
    var  span =document.getElementById("sel_span");
    
    if(sel==0){
     
     span.style.color="red";
     span.innerText="请选择籍贯"
     
     return false;
    }else {
     
     span.style.color="green";
     span.innerText="籍贯选择成功"
     
     return true;
     
    }
   }
   
   /**********验证码输入校验************/
   function checkYZM(){
    
    //获取自己输入的验证码
    var yzm = document.getElementById("yzm").value;
    //获取span对象
    var span = document.getElementById("yzm2_span");
    
    if(yzm==yan){
     
     span.innerText = "验证码正确";
     span.style.color = "green";
     return true;
    }else{
     
     span.innerText = "验证码错误";
     span.style.color = "red";
     return false;
    }
   }
   
   /***********是否同意协议************/
   function checkAgr(){
    
    //同意框
    var check = document.getElementById("check");
    //提交
    var sub = document.getElementById("sub");
    
    sub.disabled = !check.checked;
   }
   
   function zong(){
    
    var flag = checkName()&&checkPwd()&&checkPhone()&&checkEmail()&&checkSex()&&checkAdress()&&checkYZM();
    
    return flag;
   }
   
   /*
   
    *
    * 正则表达式:
    *   
    * 正则表达式是对于数据格式进行一定的规范限制
    *
    *
    * ^:开始
    * [0-9]  [a-z A-Z] :数字  字母
    *
    * {2,4} :段域 至少是2位  最多是4位
    * {3}:指定范围就是3位
    * {2,}:至少是2位
    *  $:结束
    *
    * \d:[0-9]
    *
    * \w[0-9 a-z A-Z]
    *
    * */

  </script>
 </head>
 <body onload="YZM()">
  <center>
   <h3>注册页面</h3>
   <hr />
   <form action="" method="get" onsubmit="return zong()">
    <table>
     <tr height="35px">
      <td width="150px">用户名:</td>
      <td width="400px">
       <input type="text" name="uname" id="uname" value="" alt="用户名" onblur="checkName()"/>
       <span id="uname_span">*用户名必须是3-5位的汉字</span>
      </td>
     </tr>
     <tr height="35px">
      <td>密码:</td>
      <td>
       <input type="password" name="pwd" id="pwd" value="" alt="密码" onblur="checkPwd()"/>
       <span id="pwd_span"></span>
      </td>
     </tr>
     <tr height="35px">
      <td>手机号:</td>
      <td>
       <input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/>
       <span id="phone_span"></span>
      </td>
     </tr>
     <tr height="35px">
      <td>邮箱:</td>
      <td>
       <input type="text" name="email" id="email" value="" alt="邮箱" onblur="checkEmail()"/>
       <span id="email_span"></span>
      </td>
     </tr>
     <tr height="35px">
      <td>性别:</td>
      <td>
       男:<input type="radio" name="sex" id="sex" value="0" onblur="checkSex()"/>
       女:<input type="radio" name="sex" id="sex" value="1" onblur="checkSex()"/>
       <span id="sex_span"></span>
      </td>
     </tr>
     <tr height="35px">
      <td>爱好:</td>
      <td>
       <input type="checkbox" name="hobby" id="hobby" value="1" onblur="checkHob()"/>唱歌
       <input type="checkbox" name="hobby" id="hobby" value="2" onblur="checkHob()"/>跳舞
       <input type="checkbox" name="hobby" id="hobby" value="3" onblur="checkHob()"/>溜冰<br />
       <input type="checkbox" name="hobby" id="hobby" value="4" onblur="checkHob()"/>LOL
       <input type="checkbox" name="hobby" id="hobby" value="5" onblur="checkHob()"/>爬山
       <input type="checkbox" name="hobby" id="hobby" value="6" onblur="checkHob()"/>旅游
       <span id="hobby_span"></span>      
      </td>
     </tr>
     <tr height="35px">
      <td>籍贯:</td>
      <td>
       <select name="address" id="sel" onchange="checkAdress()">
        <option value="0">--请选择--</option>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">南京</option>
        <option value="4">杭州</option>
       </select>
       <span id="sel_span"></span>
      </td>
     </tr>
     <tr height="35px">
      <td>验证码:</td>
      <td>
       <input type="number" name="" id="yzm" value="" onblur="checkYZM()"/>
       <span id="yzm_span"></span>
       <span id="yzm2_span"></span>
      </td>
     </tr>
     <tr height="35px">
      <td>个人介绍:</td>
      <td>
       <textarea name="intro" rows="8" cols="30"></textarea>
      </td>
     </tr>
     <tr height="35px">
      <td colspan="2" align="center">
       <input type="checkbox" name="" id="check" value="" onclick="checkAgr()"/>是否同意本公司协议
      </td>
      
     </tr>
     <tr height="35px">
      <td colspan="2" align="center">
       <input type="submit" name="" id="sub" value="注册" disabled="true"/>
      </td>
     </tr>
     
 
    </table> 
   </form>
  </center>
 </body>
</html>


JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 672楼
JAVA 全系列/第四阶段:网页编程和设计/HTML5(旧) 673楼
JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 674楼
JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 675楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637