整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、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事件是發生在HTML元素上的“事情”.
當在HTML頁面中使用JavaScript時，JavaScript能夠“應對”這些事件。
通過JavaScript代碼，向HTML元素添加事件處理程序。
格式1：
<html 元素 事件名稱=“JavaScript代碼對應時間的處理程序”>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test1(){
alert("按鈕的點擊事件被觸發")
}
</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("按鈕的點擊事件被觸發")
}
</script>
</head>
<body>
<input type="button" value="按鈕" onclick="('按鈕的點擊事件被處罰');" /><br>
<h2>通常我們都是在對應事件的雙引號中編寫處理程序，處理程序中如果出現雙引號改成單引號</h2>
<input type="button" value="按鈕" onclick="test1()" /><br>
</body>
</html>
常見的 HTML 事件
下面是一些常見的 HTML 事件：
onload–瀏覽器已經完成頁面加載[頁面初始化事件]
onclick–用戶點擊了 HTML 元素
onmouseover–用戶把鼠標移動到 HTML 元素上[鼠標進入]
onmouseout–用戶把鼠標移開 HTML 元素[鼠標移出]
onchange–HTML 元素已被改變
onfocus—元素獲得焦點。
onblur—元素失去焦點。
onkeydown–用戶按下鍵盤按鍵
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test1(){
alert("頁面初始化事件被觸發");
}
function test2(){
alert("元素點擊事件被觸發");
}
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'>該用戶名已經存在請重寫輸入!</font>";
}
}
function testblur(){
var inputvalue=document.getElementById("text1").value;
if(inputvalue==""){
alert("用戶名不能為空");
}
if(inputvalue=="zhangsan"){
document.getElementById("span1").innerHTML="<font color='red'>該用戶名已經存在請重寫輸入!</font>";
}
}
function testfocus(){
document.getElementById("span1").innerHTML="";
document.getElementById("text1").value="";
}
function testkeydown(e){
if(e.keyCode==38 ){
alert("向上移動");
}
if(e.keyCode==37){
alert("向左移動");
}
if(e.keyCode==39){
alert("向右移動");
}
if(e.keyCode==40){
alert("向下移動");
}
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="請輸入用戶名" onchange="testchange();"
onfocus="testfocus();"/>
<span id="span1"></span>
-->
<input type="text" id="text1" value="請輸入用戶名" 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="請輸入用戶名" />
<input type="password" />
<input type="submit" value="登錄" />
</form>
</body>
</html>
1.onsubmit作用在form表單上 return javascript函數；
2.javascript函數的返回值return 的是false表示不會向form表單anction屬性指定的后端處理程序提交表單數據，如果是true表示會向form表單anction屬性指定的后端處理程序提交表單數據。
2、JavaScript 字符串
JavaScript 字符串是引號中的零個或多個字符。用于存儲和操作文本。
var x=“Bill Gates”; //創建字符串變量【沒有可供操作的的方法和屬性】
var y=new String(“hello”); //創建字符串對象【可供操作的的方法和屬性】
當創建的字符串變量調用提供的方法和屬性的時候，字符串變量會被自動轉換成字符串對象。
//創建字符串變量
var x=“Bill Gates”;
x.substring(0,5); //此時x表示的字符串變量會被自動轉換成字符串對象。
方法和屬性
length 屬性–返回字符串的長度
indexOf(string) 方法返回字符串中指定文本首次出現的索引（位置）
lastIndexOf(string) 方法返回指定文本在字符串中最后一次出現的索引
JavaScript 從零計算位置。
0 是字符串中的第一個位置，1 是第二個，2 是第三個 …
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
slice(start,end) 方法提取字符串的某個部分并在新字符串中返回被提取的部分
參數為負數
substring(start, end)方法提取字符串的某個部分并在新字符串中返回被提取的部分
參數不能為負數
substr(start, length)方法提取字符串的某個部分并在新字符串中返回被提取的部分
第二參數是個數，不是結束位置。
replace(old,new) 方法用另一個值替換在字符串中指定的值
toUpperCase() 把字符串轉換為大寫：
toLowerCase() 把字符串轉換為小寫：
trim() 方法刪除字符串兩端的空白符：
charAt() 方法返回字符串中指定下標（位置）的字符串：
charCodeAt() 方法返回字符串中指定索引的字符 unicode 編碼：
split(op) 將字符串通過指定的分隔符號拆分成字符串數組：
日，外面天氣越來越冷，由于小白辦公室是陽面，因此窗戶口總能聚集各式各樣前來曬太陽的低頭族。看著他們，小白也想懶洋洋的靠在窗口，看著手機放松放松自己。放松的想法在小白腦海中僅僅存在了十幾秒中后，就徹底消失在虛空之中了。小白發現自從認真學html5開始到現在，居然把沒事就想拿出手機的習慣都給改掉了。處理完手頭的事情后，小白又去找老朱，看看今天會學什么方面的知識。
“小白，這幾天連續學習累不累？”
“不累，朱哥，今天我需要了解哪方面的知識呢？”
“今天，我們看看常用的鼠標事件吧！你平時上網最常用到的鼠標事件是哪幾個？”
小白想了想：“我打開鏈接需要點擊鏈接，所以點擊事件算是一個，平時瀏覽網頁的時候，如果是圖片輪換鼠標移到上面圖片輪換就會停住，是不是鼠標移上去也算一個事件？”
“恩，沒錯，我們最常用到的事件是鼠標的點擊事件（click），另外鼠標移到某個容器上面（mouseover）、鼠標離開某個容器時（mouseout）的事件也會經常遇到，比如鼠標移動到某個容器上面，讓這個容器css樣式發生改變，或者讓他的html內容發生改變，離開后恢復原來的狀態。通過jQuery改變容器的css樣式過兩天我再跟你說，今天我們還是通過處理容器的html內容進行鼠標事件的練習吧！還是用你之前那個原始頁面吧！”
“有時候為了方便，我們會在某個容器上直接寫鼠標事件，比如onclick='js代碼'，比如在id為main的div上面可以這樣寫。”
“小白，你看，main上面我寫了一個onclick="clickme()"，這個意思就是說，當點擊main容器的時候去執行clickme函數，clickme函數我在下方的js代碼中進行了定義，在這里我用了一個小技巧，用mainHtml存儲main原始的文本內容，每調用一次clickme函數num都會加1。在clickme函數內部讓main的html內容發生改變，所以你可以看到這樣一個效果。”
“現在我們再來看一下鼠標移入和移出事件。”
“我在main上面寫了鼠標移動到main上面的事件：onmouseover="overme()"，和鼠標移出事件：onmouseout="outme()"，他們分別執行overme和outme函數。看一下效果：”
“哇，好神奇！我現在去練習！”
“小白，不要著急，我們只說了在標簽上面加事件，你忘了我們的jQuery了？事件寫到標簽上有時會導致代碼維護上的麻煩，所以我們還有一種更好的辦法，就是寫到js區域里面，這樣無論是你自己修改代碼，還是別人看代碼都會一目了然。在jQuery中使用事件你需要調用click方法，比如我們把之前的click事件改成jquery方式：”
“怎么樣？通過$("#main").click(clickme)就可以實現之前在容器上寫事件的方法，這樣做還有一個好處，假如頁面上有很多的容器，有時你可能希望換一個其他容器觸發clickme，這時只需換一下jQuery選擇器的選擇方式就可以了！jQuery里的鼠標移入事件方法是mouseover，移出是mouseout，你試著把之前的鼠標移入移出改成jQuery方式實現吧！”
“沒問題，我現在就去～～”
想學H5的朋友可以關注老爐，您的關注是我持續更新《小白H5成長之路》的動力！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
