資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 建立一個移動的 div 元素？
移動的 div 是一個網頁元素，可以使其自動在螢幕上移動或更改螢幕上的位置。透過調整 left 和 top 樣式屬性來更改位置。使用 JavaScript 建立移動的 div 是一項相對簡單的任務。所需的一切只是一些 HTML、CSS 和 JavaScript 程式碼。在本教程中，我們將介紹如何使用 JavaScript 建立移動的 div。
HTML 程式碼
首先，我們需要一些 HTML 程式碼。我們將建立一個 id 為“movingDiv”的 div。在這個 div 內部，我們將放置一些內容。此內容可以是任何您想要的內容，但在此示例中，我們只放置一些文字。
<div id="movingDiv"> This is my moving div! </div>
現在我們有了 HTML 程式碼，我們需要一些 CSS 程式碼。
CSS 程式碼
CSS 程式碼將使我們的 div 實際移動。我們將 div 的位置設定為“relative”。這將允許我們使用 JavaScript 在周圍移動 div。我們還將設定 div 的寬度和高度。
#movingDiv { position: relative; width: 200px; height: 200px; }現在我們有了 HTML 和 CSS 程式碼，我們需要一些 JavaScript 程式碼。
JavaScript 程式碼
JavaScript 程式碼將使我們的 div 實際移動。我們將使用 setInterval 函式每 1000 毫秒（1 秒）移動一次我們的 div。我們還將使用 CSS 屬性“top”和“left”在周圍移動我們的 div。
var interval = setInterval(function() {
var div = document.getElementById("movingDiv");
div.style.top = div.offsetTop + 1 + "px";
div.style.left = div.offsetLeft + 1 + "px"; },
1000);示例
以下是此示例的完整工作程式碼：
<!doctype html>
<html>
<head>
<style>
#movingDiv {
position: relative;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="movingDiv"> This is my moving div! </div>
<script>
var interval = setInterval(function() {
var div = document.getElementById("movingDiv");
div.style.top = div.offsetTop + 1 + "px";
div.style.left = div.offsetLeft + 1 + "px"; },
1000);
</script>
</body>
</html>上面程式碼的逐行解釋：
第 1 行 - 我們首先建立一個 HTML 文件。
第 3 行 - 我們建立一個 head 元素。
第 4 行 - 我們建立一個 style 元素。在這個 style 元素內部，我們將放置我們的 CSS 程式碼。
第 5 行 - 我們為 id 為 "movingDiv" 的 div 建立一個 CSS 規則。我們將位置設定為“relative”。我們還設定了 div 的寬度和高度。
第 12 行 - 我們建立一個 body 元素。在這個 body 元素內部，我們將放置我們的 HTML 程式碼。
第 13 行 - 我們建立一個 id 為“movingDiv”的 div。在這個 div 內部，我們放置了一些文字。
第 14 行 - 我們建立一個 script 元素。在這個 script 元素內部，我們將放置我們的 JavaScript 程式碼。
第 15 行 - 我們建立一個名為“interval”的變數。我們將此變數設定為 setInterval 函式。此函式將每 1000 毫秒（1 秒）移動一次我們的 div。
第 16 行 - 我們建立一個名為“div”的變數。我們將此變數設定為 id 為“movingDiv”的 HTML 元素。
第 17 行 - 我們使用 CSS“top”屬性將 div 向下移動 1 畫素。
第 18 行 - 我們使用 CSS“left”屬性將 div 向右移動 1 畫素。
第 22 行 - 我們結束 HTML 文件。
在本教程中，我們介紹瞭如何使用 JavaScript 建立移動的 div。我們首先建立了一些 HTML 程式碼。然後我們建立了一些 CSS 程式碼。最後，我們建立了一些 JavaScript 程式碼。
11K+ 閱讀量
