Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 一区二区三区日韩免费播放,精品三级国产一区二区三区四区,亚洲综合一区二区不卡 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          JS鼠標(biāo)移入移出透明度變化
          
        
           
          
	
	
          
		JS鼠標(biāo)移入移出透明度變化
          
                        
          、HTML
          <img id="img1" src="luban.jpg" alt="" />
          二、CSS
          #img1{
           opacity:0.3;
          }
          三、javascript
           window.onload=function(){
           var oImg=document.getElementById('img1');
           oImg.onmouseover=function(){
           startMove(100);
           }
           oImg.onmouseout=function(){
           startMove(30);
           }
          }
          var opac=30;
          var timer=null;
          fuicntion startMove(iTarget){
           var oImg=document.getElementById('img1');
           clearInterval(timer);
           var iSpeed=0;
           timer=setInterval(function(){
           if(opac<iTarget){
           iSpeed=1;
           }else{
           iSpeed=-1;
           }
           if(opac==iTarget){
           clearInterval(timer);
           }else{
           opac+=iSpeed;
           oImg.style.opacity=opac/100;
           },30)
          四、最終效果
          ttps://www.w3school.com.cn/js/index.asp
          1.JavaScript 事件
          HTML事件是發(fā)生在HTML元素上的“事情”.
          當(dāng)在HTML頁(yè)面中使用JavaScript時(shí)，JavaScript能夠“應(yīng)對(duì)”這些事件。
          通過(guò)JavaScript代碼，向HTML元素添加事件處理程序。
          格式1：
          <html 元素 事件名稱=“JavaScript代碼對(duì)應(yīng)時(shí)間的處理程序”>
          <html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test1(){
				alert("按鈕的點(diǎn)擊事件被觸發(fā)")
			}
		</script>
	</head>
	<body>
		<input type="button" value="按鈕" onclick="test1();"/>
	</body>
</html>

          <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test1(){
				alert("按鈕的點(diǎn)擊事件被觸發(fā)")
			}
		</script>
	</head>
	<body>
		<input type="button"  value="按鈕" onclick="('按鈕的點(diǎn)擊事件被處罰');" /><br>
		<h2>通常我們都是在對(duì)應(yīng)事件的雙引號(hào)中編寫(xiě)處理程序，處理程序中如果出現(xiàn)雙引號(hào)改成單引號(hào)</h2>
		<input type="button"  value="按鈕" onclick="test1()" /><br>
	</body>
</html>


          常見(jiàn)的 HTML 事件
          下面是一些常見(jiàn)的 HTML 事件：

          onload–瀏覽器已經(jīng)完成頁(yè)面加載[頁(yè)面初始化事件]
          onclick–用戶點(diǎn)擊了 HTML 元素
          onmouseover–用戶把鼠標(biāo)移動(dòng)到 HTML 元素上[鼠標(biāo)進(jìn)入]
          onmouseout–用戶把鼠標(biāo)移開(kāi) HTML 元素[鼠標(biāo)移出]
          onchange–HTML 元素已被改變
          onfocus—元素獲得焦點(diǎn)。
          onblur—元素失去焦點(diǎn)。
          onkeydown–用戶按下鍵盤(pán)按鍵
          <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
					function  test1(){
						alert("頁(yè)面初始化事件被觸發(fā)");
					}
					function  test2(){
						alert("元素點(diǎn)擊事件被觸發(fā)");
					}
					function  testover(){
						document.getElementById("img1").width=document.getElementById("img1").width+100;
						document.getElementById("img1").height=document.getElementById("img1").height+100;
					}
					function  testout(){
						document.getElementById("img1").width=100;
						document.getElementById("img1").height=100;
					}
					function  testchange(){
						var inputvalue=document.getElementById("text1").value;
						if(inputvalue==""){
							alert("用戶名不能為空");
						}
						if(inputvalue=="zhangsan"){
							document.getElementById("span1").innerHTML="<font color='red'>該用戶名已經(jīng)存在請(qǐng)重寫(xiě)輸入!</font>";
						}
					}
					
					function  testblur(){
						var inputvalue=document.getElementById("text1").value;
						if(inputvalue==""){
							alert("用戶名不能為空");
						}
						if(inputvalue=="zhangsan"){
							document.getElementById("span1").innerHTML="<font color='red'>該用戶名已經(jīng)存在請(qǐng)重寫(xiě)輸入!</font>";
						}
					}
					function  testfocus(){
							document.getElementById("span1").innerHTML="";
							document.getElementById("text1").value="";
					}
					
					function  testkeydown(e){
							if(e.keyCode==38 ){
								alert("向上移動(dòng)");
							}
							if(e.keyCode==37){
								alert("向左移動(dòng)");
							}
							if(e.keyCode==39){
								alert("向右移動(dòng)");
							}
							if(e.keyCode==40){
								alert("向下移動(dòng)");
							}
							if(e.keyCode==32){
								alert("暫停");
							}
					}
				</script>

	</head>
	<body onload="test1();"  onkeydown="testkeydown(even);">
		<img id="img1" src="13.jpg" width="100px" height="100px" onclick="test2();"
		 onmouseover="testover();" onmouseout="textout();"
		 >
		<input id="text1" type="text" value="請(qǐng)輸入用戶名" onchange="testchange();" 
		 onfocus="testfocus();"/>
		 <span id="span1"></span>
		 -->
		 <input type="text"  id="text1" value="請(qǐng)輸入用戶名" onblur="testblur();"
		  onfocus="testfocus();"/>
		  <span id="span1">
		  	
		  </span>
	</body>
</html>


          onsubmit—表單提交事件【作用在form表單上】
          <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function testsubmit(){
				var textvalue=document.getElementById("text1").value;
				if(textvalue==""){
				alert("用戶名不能為空！");
				return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<form action="test" method="get" onsubmit="return testsubmit();">
			<input type="text"  id="text1" value="請(qǐng)輸入用戶名" />
			<input type="password" />
			<input type="submit"  value="登錄" />
			
		</form>
	</body>
</html>



          1.onsubmit作用在form表單上 return javascript函數(shù)；
          2.javascript函數(shù)的返回值return 的是false表示不會(huì)向form表單anction屬性指定的后端處理程序提交表單數(shù)據(jù)，如果是true表示會(huì)向form表單anction屬性指定的后端處理程序提交表單數(shù)據(jù)。
          2、JavaScript 字符串
          JavaScript 字符串是引號(hào)中的零個(gè)或多個(gè)字符。用于存儲(chǔ)和操作文本。
          var x=“Bill Gates”; //創(chuàng)建字符串變量【沒(méi)有可供操作的的方法和屬性】
          var y=new String(“hello”); //創(chuàng)建字符串對(duì)象【可供操作的的方法和屬性】
          當(dāng)創(chuàng)建的字符串變量調(diào)用提供的方法和屬性的時(shí)候，字符串變量會(huì)被自動(dòng)轉(zhuǎn)換成字符串對(duì)象。
          //創(chuàng)建字符串變量
          var x=“Bill Gates”;
          x.substring(0,5); //此時(shí)x表示的字符串變量會(huì)被自動(dòng)轉(zhuǎn)換成字符串對(duì)象。
          方法和屬性
          length 屬性–返回字符串的長(zhǎng)度
          indexOf(string) 方法返回字符串中指定文本首次出現(xiàn)的索引（位置）
          lastIndexOf(string) 方法返回指定文本在字符串中最后一次出現(xiàn)的索引
          JavaScript 從零計(jì)算位置。
          0 是字符串中的第一個(gè)位置，1 是第二個(gè)，2 是第三個(gè) …
          如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
          slice(start,end) 方法提取字符串的某個(gè)部分并在新字符串中返回被提取的部分
          參數(shù)為負(fù)數(shù)
          substring(start, end)方法提取字符串的某個(gè)部分并在新字符串中返回被提取的部分
          參數(shù)不能為負(fù)數(shù)
          substr(start, length)方法提取字符串的某個(gè)部分并在新字符串中返回被提取的部分
          第二參數(shù)是個(gè)數(shù)，不是結(jié)束位置。
          replace(old,new) 方法用另一個(gè)值替換在字符串中指定的值
          toUpperCase() 把字符串轉(zhuǎn)換為大寫(xiě)：
          toLowerCase() 把字符串轉(zhuǎn)換為小寫(xiě)：
          trim() 方法刪除字符串兩端的空白符：
          charAt() 方法返回字符串中指定下標(biāo)（位置）的字符串：
          charCodeAt() 方法返回字符串中指定索引的字符 unicode 編碼：
          split(op) 將字符串通過(guò)指定的分隔符號(hào)拆分成字符串?dāng)?shù)組：
          日，外面天氣越來(lái)越冷，由于小白辦公室是陽(yáng)面，因此窗戶口總能聚集各式各樣前來(lái)曬太陽(yáng)的低頭族?？粗麄?，小白也想懶洋洋的靠在窗口，看著手機(jī)放松放松自己。放松的想法在小白腦海中僅僅存在了十幾秒中后，就徹底消失在虛空之中了。小白發(fā)現(xiàn)自從認(rèn)真學(xué)html5開(kāi)始到現(xiàn)在，居然把沒(méi)事就想拿出手機(jī)的習(xí)慣都給改掉了。處理完手頭的事情后，小白又去找老朱，看看今天會(huì)學(xué)什么方面的知識(shí)。
          “小白，這幾天連續(xù)學(xué)習(xí)累不累？”
          “不累，朱哥，今天我需要了解哪方面的知識(shí)呢？”
          “今天，我們看看常用的鼠標(biāo)事件吧！你平時(shí)上網(wǎng)最常用到的鼠標(biāo)事件是哪幾個(gè)？”
          小白想了想：“我打開(kāi)鏈接需要點(diǎn)擊鏈接，所以點(diǎn)擊事件算是一個(gè)，平時(shí)瀏覽網(wǎng)頁(yè)的時(shí)候，如果是圖片輪換鼠標(biāo)移到上面圖片輪換就會(huì)停住，是不是鼠標(biāo)移上去也算一個(gè)事件？”
          “恩，沒(méi)錯(cuò)，我們最常用到的事件是鼠標(biāo)的點(diǎn)擊事件（click），另外鼠標(biāo)移到某個(gè)容器上面（mouseover）、鼠標(biāo)離開(kāi)某個(gè)容器時(shí)（mouseout）的事件也會(huì)經(jīng)常遇到，比如鼠標(biāo)移動(dòng)到某個(gè)容器上面，讓這個(gè)容器css樣式發(fā)生改變，或者讓他的html內(nèi)容發(fā)生改變，離開(kāi)后恢復(fù)原來(lái)的狀態(tài)。通過(guò)jQuery改變?nèi)萜鞯腸ss樣式過(guò)兩天我再跟你說(shuō)，今天我們還是通過(guò)處理容器的html內(nèi)容進(jìn)行鼠標(biāo)事件的練習(xí)吧！還是用你之前那個(gè)原始頁(yè)面吧！”
          “有時(shí)候?yàn)榱朔奖?，我們?huì)在某個(gè)容器上直接寫(xiě)鼠標(biāo)事件，比如onclick='js代碼'，比如在id為main的div上面可以這樣寫(xiě)?！?/p>
          “小白，你看，main上面我寫(xiě)了一個(gè)onclick="clickme()"，這個(gè)意思就是說(shuō)，當(dāng)點(diǎn)擊main容器的時(shí)候去執(zhí)行clickme函數(shù)，clickme函數(shù)我在下方的js代碼中進(jìn)行了定義，在這里我用了一個(gè)小技巧，用mainHtml存儲(chǔ)main原始的文本內(nèi)容，每調(diào)用一次clickme函數(shù)num都會(huì)加1。在clickme函數(shù)內(nèi)部讓main的html內(nèi)容發(fā)生改變，所以你可以看到這樣一個(gè)效果?！?/p>
          “現(xiàn)在我們?cè)賮?lái)看一下鼠標(biāo)移入和移出事件。”
          “我在main上面寫(xiě)了鼠標(biāo)移動(dòng)到main上面的事件：onmouseover="overme()"，和鼠標(biāo)移出事件：onmouseout="outme()"，他們分別執(zhí)行overme和outme函數(shù)?？匆幌滦Ч骸?/p>
          “哇，好神奇！我現(xiàn)在去練習(xí)！”
          “小白，不要著急，我們只說(shuō)了在標(biāo)簽上面加事件，你忘了我們的jQuery了？事件寫(xiě)到標(biāo)簽上有時(shí)會(huì)導(dǎo)致代碼維護(hù)上的麻煩，所以我們還有一種更好的辦法，就是寫(xiě)到j(luò)s區(qū)域里面，這樣無(wú)論是你自己修改代碼，還是別人看代碼都會(huì)一目了然。在jQuery中使用事件你需要調(diào)用click方法，比如我們把之前的click事件改成jquery方式：”
          “怎么樣？通過(guò)$("#main").click(clickme)就可以實(shí)現(xiàn)之前在容器上寫(xiě)事件的方法，這樣做還有一個(gè)好處，假如頁(yè)面上有很多的容器，有時(shí)你可能希望換一個(gè)其他容器觸發(fā)clickme，這時(shí)只需換一下jQuery選擇器的選擇方式就可以了！jQuery里的鼠標(biāo)移入事件方法是mouseover，移出是mouseout，你試著把之前的鼠標(biāo)移入移出改成jQuery方式實(shí)現(xiàn)吧！”
          “沒(méi)問(wèn)題，我現(xiàn)在就去～～”
          想學(xué)H5的朋友可以關(guān)注老爐，您的關(guān)注是我持續(xù)更新《小白H5成長(zhǎng)之路》的動(dòng)力！
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
无码精品尤物一区二区三区|
一区二区三区在线|
国产高清在线精品一区二区三区
|
视频一区二区三区人妻系列|
成人一区二区免费视频|
内射少妇一区27P|
国产福利电影一区二区三区久久老子无码午夜伦不
|
视频在线观看一区|
一区二区三区免费在线视频|
国产在线步兵一区二区三区|
狠狠做深爱婷婷久久综合一区|
亚洲AV无码一区二区三区鸳鸯影院
|
久久一区二区三区精华液使用方法
|
亚洲免费一区二区|
国精品无码一区二区三区左线|
亚洲爆乳精品无码一区二区三区|
精品国产一区二区三区免费
|
肉色超薄丝袜脚交一区二区|
农村乱人伦一区二区|
3D动漫精品一区二区三区|
日本一区高清视频|
国产一区二区电影|
无码中文字幕一区二区三区|
国产韩国精品一区二区三区|
国产亚洲一区二区精品|
国产亚洲综合一区二区三区
|
日韩精品一区二区三区老鸦窝|
国产一区二区四区在线观看
|
国模吧一区二区三区精品视频|
丝袜人妻一区二区三区网站|
亚洲V无码一区二区三区四区观看|
国产色欲AV一区二区三区|
久久青草国产精品一区|
国产精品伦子一区二区三区|
久久精品国产免费一区|
亚洲国产成人久久综合一区77|
亚洲一区在线视频|
色欲AV蜜臀一区二区三区|
日韩熟女精品一区二区三区|
能在线观看的一区二区三区|
精品女同一区二区三区在线|