JavaScript 如何创建上一个和下一个按钮,并且在最后的位置上不工作

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

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

JavaScript 示例