JavaScript 如何创建上一页和下一页按钮，并在末尾位置禁用

在这篇文章中，我们的任务是使用JavaScript创建上一页和下一页按钮，并在末尾位置禁用。

方法：

当上一页按钮处于起始位置时（对我们来说是1），我们将添加一个 disabled 属性，并在不是起始位置时（不等于1）移除 disabled 属性。
对于下一页按钮，当其处于末尾位置（对我们来说是5）时，添加 disabled 属性，并在不是末尾位置时移除 disabled 属性。

示例： 下面的示例展示了上述方法的应用。

<!DOCTYPE html> 
<html lang="en"> 
<body> 
    <div class="container"> 
        <div class="no-box"> 
            <span class="no">1</span> 
        </div> 
  
        <button class="btn" onclick="prev()"> 
            prev 
        </button> 
  
        <button class="btn" onclick="next()"> 
            next 
        </button> 
    </div>  
</body> 
</html>

CSS代码

.container { 
    margin: 100px 400px; 
} 
  
.no-box { 
    padding-left: 30px; 
    font-size: 60px; 
} 
  
.btn { 
    background-color: rgb(179, 179, 179); 
} 
  
.btn:hover { 
    color: white; 
    background-color: green; 
}

JavaScript代码

<script> 
    var no_box = document 
        .querySelector('.no-box'); 
          
    var i = 1; 
      
    function prev() { 
      
        // Start position  
        if (i == 1) { 
      
            // Add disabled attribute on 
            // prev button 
            document.getElementsByClassName( 
                    'prev').disabled = true; 
      
            // Remove disabled attribute  
            // from next button  
            document.getElementsByClassName( 
                    'next').disabled = false; 
        } else { 
            i--; 
            return setNo(); 
        } 
    } 
      
    function next() { 
      
        // End position 
        if (i == 5) { 
      
            // Add disabled attribute on  
            // next button 
            document.getElementsByClassName( 
                    'next').disabled = true; 
      
            // Remove disabled attribute 
            // from prev button 
            document.getElementsByClassName( 
                    'prev').disabled = false; 
        } else { 
            i++; 
            return setNo(); 
        } 
    } 
      
    function setNo() { 
      
        // Change innerhtml 
        return no_box.innerHTML = i; 
    } 
</script>

输出：

JavaScript 如何创建上一页和下一页按钮，并在末尾位置禁用