資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在JavaScript中設定等待游標？
在本文中，我們將瞭解一些**游標**設定及其行為。目前，任何包含指標、手型、插入符、等待、指標等待等的系統都提供不同型別的游標。
藉助本文，我們將能夠在需要時配置等待指標。此指標將阻止使用者不必要地單擊按鈕，並在完成之前的事件之前停止任何類似事件的進一步執行。
我們可以直接使用**CSS**屬性將游標顯示為等待狀態，但是由於我們需要動態地影響游標的顯示，我們將使用純**JavaScript**來實現。
一些常見的游標等待示例：
處理付款時，防止使用者兩次點選。
下載檔案時，防止對同一程序下載多個檔案。
示例
在下面的示例中，我們建立一個簡單的**HTML**按鈕。每當使用者單擊按鈕時，它都會提示使用者等待，並且不會讓他執行任何其他操作。我們將使用JavaScript中的`addEventListener()`函式來實現此功能。藉助此功能，我們將能夠控制諸如**點選、懸停**等事件的行為。
檔名：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
display: flex;
padding-top: 20px;
}
#btn {
height: 50px;
width: 100px;
border-radius: 10px;
background-color: gray;
font-size: 1.1rem;
}
</style>
</head>
<body>
<h1 style="color: green;">Welcome to Tutorials Point</h1>
<p>The cursor will go into waiting on clicking this button.</p>
<div class="box">
<button id="btn">Click me</button>
</div>
<script>
document.getElementById("btn")
.addEventListener("click", function() {
document.body.style.cursor = "progress";
document.getElementById("btn")
.style.backgroundColor = "gray";
document.getElementById("btn")
.style.cursor = "progress";
});
</script>
</body>
</html>輸出
更新於：2022年4月26日
2K+ 瀏覽量
廣告