数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 JavaScript 创建上一个和下一个按钮，并在结束位置禁用它们？
我们可以使用原生 JavaScript 创建上一个和下一个按钮，并在它们到达末端位置时使其无法使用（或禁用）。JavaScript 是一种强大的浏览器级语言，我们可以轻松地使用它来控制和操作 DOM 元素。在这里，我们将创建 2 个按钮，并根据点击哪个按钮来更改 HTML 元素的内容。
示例 1
在这个示例中，我们将创建一个“递增”和一个“递减”按钮，当点击它们时，分别将 HTML 元素的内容值递增和递减 1。我们还将在它们到达极限位置时禁用按钮，对于递增按钮，极限位置为 5，对于递减按钮，极限位置为 0。
<html lang="en">
<head>
<title>How to create previous and next button and non-working on end position using JavaScript?</title>
</head>
<body>
<h3>How to create previous and next button and non-working on end position using JavaScript?</h3>
<p>3</p>
<div>
<button class="inc">Increment</button>
<button class="dec">Decrement</button>
</div>
<script>
const inc = document.getElementsByClassName('inc')[0]
const dec = document.getElementsByClassName('dec')[0]
const content = document.getElementsByTagName('p')[0]
let i = 3;
inc.addEventListener('click', () => {
if (i === 5) return;
i++;
content.textContent = i;
})
dec.addEventListener('click', () => {
if (i === 0) return;
i--;
content.textContent = i;
})
</script>
</body>
</html>
示例 2
在这个示例中，让我们实现上述方法，但不是显示数字的增减，而是显示“绝对”定位元素的左对齐方式的增减。
<html lang="en">
<head>
<title>How to create previous and next button and non-working on end position using JavaScript?</title>
<style>
body {
position: relative;
}
.dot {
background-color: black;
height: 5px;
width: 5px;
border-radius: 50%;
position: absolute;
}
.inc, .dec {
margin-top: 20px;
}
</style>
</head>
<body>
<h3>How to create previous and next button and non-working on end position using JavaScript?</h3>
<div class="dot"></div>
<div>
<button class="inc">Increment</button>
<button class="dec">Decrement</button>
</div>
<script>
const inc = document.getElementsByClassName('inc')[0]
const dec = document.getElementsByClassName('dec')[0]
const dot = document.getElementsByClassName('dot')[0]
let i = 0;
inc.addEventListener('click', () => {
if (i === 10) return;
i += 2;
dot.style.left = `${i}%`
})
dec.addEventListener('click', () => {
if (i === 0) return;
i -= 2;
dot.style.left = `${i}%`
})
</script>
</body>
</html>
结论
在本文中，我们学习了如何使用 Bootstrap 4 在 Web 应用程序中创建分页布局，并使用了两个不同的示例。在第一个示例中，我们使用数字显示了递增和递减，在第二个示例中，我们使用“绝对”定位元素的左值显示了值的递增和递减。
更新于: 2023年2月22日
882 次浏览
广告