案例1：點擊按鈕搖起來 思路： 1. 2張圖片，放進div裡面，搖起來的本質是，此div按上下左右的位置和在一定的時間內發生移動 2. 所以用隨機數的概念來實現位置的移動，用setInterval來實現一定的時間區間，前者封裝在後者的處理 函數裡面。最後全部作為點擊按鈕的點擊事件的處理函數 <!DO ...
案例1：點擊按鈕搖起來
思路：
1. 2張圖片，放進div裡面，搖起來的本質是，此div按上下左右的位置和在一定的時間內發生移動
2. 所以用隨機數的概念來實現位置的移動，用setInterval來實現一定的時間區間，前者封裝在後者的處理 函數裡面。最後全部作為點擊按鈕的點擊事件的處理函數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> img { width: 200px; height: 200px; } div { position: absolute; } </style> </head> <body> <input type="button" value="點擊搖起來" id="btn1" /> <input type="button" value="停止" id="btn2" /> <div id="dv"> <img src="images/tianshi.gif" alt="" /> <img src="images/bird.png" alt="" /> </div> <script src="common.js"></script> <script> //div搖動起來，本質是樣式裡面的上下，左右，移動一個隨機值 Math.ramdom //並且在一個設定的時間區間內移動 setInterval //點擊按鈕搖起來 my$("btn1").onclick = function () { timeId = setInterval(function () { //隨機數 var x = parseInt(Math.random() * 100 + 1); var y = parseInt(Math.random() * 100 + 1) //設置元素的left和top屬性 my$("dv").style.left = x + "px"; my$("dv").style.top = y + "px"; }, 100); }; my$("btn2").onclick = function () { clearInterval(timeId); }; </script> </body> </html>
效果：
案例2：星星閃動
思路：
和上個案例基本是同一個原理。這裡都一個對象.innerHTML在div裡面創建了個span, span裡面放了個星星，然後讓星星在範圍更大的隨機數值裡面移動，時間設置短一些。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 600px; height: 600px; border: 2px solid yellow; background-color: black; position: relative; } span { font-size: 30px; color: yellow; position: absolute; } </style> </head> <body> <input type="button" value="亮起來" id="btn" /> <div id="dv"></div> <script src="common.js"></script> <script> my$("btn").onclick = function () { setInterval(function () { my$("dv").innerHTML = "<span>★</span>"; var x = parseInt(Math.random() * 600 + 1); var y = parseInt(Math.random() * 600 + 1); my$("dv").firstElementChild.style.left = x + "px"; my$("dv").firstElementChild.style.top = y + "px"; }, 100); }; </script> </body> </html>
效果：
