数据结构
网络
关系数据库管理系统(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+ 浏览量
广告