HTML作為一門標記語言,在網頁制作中使用廣泛。除了能夠呈現豐富的文本內容外,還能夠實現動態的效果,例如物體不規則運動。下面就是一個HTML物體不規則運動的代碼:
<!DOCTYPE html> <html> <head> <title>HTML不規則物體運動小實例</title> <script> function move() { var obj = document.getElementById("object"); var x = Math.floor(Math.random() * window.innerWidth); //隨機x坐標 var y = Math.floor(Math.random() * window.innerHeight); //隨機y坐標 obj.style.left = x + "px"; //設置left屬性 obj.style.top = y + "px"; //設置top屬性 } setInterval(move, 1000); //每隔一秒移動一次 </script> </head> <body> <div id="object" style="position:absolute; width:50px; height:50px; background-color: #0000FF;"></div> </body> </html>
通過這段代碼,我們在HTML頁面中創建了一個藍色方塊,利用JavaScript定義了move函數,每隔一秒就在瀏覽器窗口內隨機生成一組x、y坐標,然后設置物體的left和top屬性,使其不斷地在頁面中隨機移動。
在HTML頁面中使用JavaScript實現不規則物體運動的效果,可以讓網站變得更加生動,增加了互動性和趣味性,也為網站設計師提供了新的創作靈感。