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应用程序中创建一个分页布局,使用了两个不同的例子。在第一个例子中,我们用一个数字来显示增量和减量,在第二个例子中,我们用一个 “绝对 “定位元素的左值来显示一个值的增量和减量。