📜  如何使用 HTML、CSS 和 JavaScript 制作增量和减量计数器?

📅  最后修改于: 2021-11-07 09:05:31             🧑  作者: Mango

在访问 FlipkartAmazon等不同的购物网站时,您会看到每种产品都有一个计数器,该计数器用于指定该产品的数量。因此,计数器对于许多网站来说是非常有用的部分。在这篇文章中,我们将使用HTML,CSSJavaScript设计一个计数器。

提供了一个示例图像,让您更清楚地了解文章。

分步实施:

第 1 步:首先,我们将使用HTML设计一个简单的按钮。参考代码中的注释。

index.html
 
  
 
  
 
     
      
 
      
 
  
        

Increment and Decrement counter

                                                                         

                              
       


style.css
/*apply css properties to body tag*/
  
body {
    position: absolute;
    left: 0%;
    text-align: center;
}
  
/*apply css properties to container class*/
  
.container {
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100%;
    text-align: center;
}
  
/*apply css properties to button tag*/
  
button {
    width: 90px;
    height: 60px;
    font-size: 30px;
    background-color: green;
    color: honeydew;
}
  
/*apply hover effect to button tag*/
  
button:hover {
    background-color: greenyellow;
    color: grey;
}
  
/*apply css properties to h2 tag*/
  
h2 {
    color: black;
    margin: 0 50px;
    font-size: 45px;
}
  
/*apply css properties to h1 tag*/
  
h1 {
    font-size: 35px;
    color: green;
    text-align: center;
    padding-left: 10%;
}


index.js
//initialising a variable name data
  
var data = 0;
  
//printing default value of data that is 0 in h2 tag
document.getElementById("counting").innerText = data;
  
//creation of increment function
function increment() {
    data = data + 1;
    document.getElementById("counting").innerText = data;
}
//creation of decrement function
function decrement() {
    data = data - 1;
    document.getElementById("counting").innerText = data;
}


HTML


    
        
  
        
    
  
    
        
        

Increment and Decrement counter

           
                                                   

                     
                      


第 2 步:接下来,我们将使用一些CSS 属性来设计按钮并使用悬停类来获得当我们将鼠标悬停在按钮上时的动画效果。

样式文件

/*apply css properties to body tag*/
  
body {
    position: absolute;
    left: 0%;
    text-align: center;
}
  
/*apply css properties to container class*/
  
.container {
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100%;
    text-align: center;
}
  
/*apply css properties to button tag*/
  
button {
    width: 90px;
    height: 60px;
    font-size: 30px;
    background-color: green;
    color: honeydew;
}
  
/*apply hover effect to button tag*/
  
button:hover {
    background-color: greenyellow;
    color: grey;
}
  
/*apply css properties to h2 tag*/
  
h2 {
    color: black;
    margin: 0 50px;
    font-size: 45px;
}
  
/*apply css properties to h1 tag*/
  
h1 {
    font-size: 35px;
    color: green;
    text-align: center;
    padding-left: 10%;
}

第 3 步:现在,我们将添加一些JavaScript代码来为我们之前创建的按钮添加功能。请参阅代码中的注释以获取帮助。

索引.js

//initialising a variable name data
  
var data = 0;
  
//printing default value of data that is 0 in h2 tag
document.getElementById("counting").innerText = data;
  
//creation of increment function
function increment() {
    data = data + 1;
    document.getElementById("counting").innerText = data;
}
//creation of decrement function
function decrement() {
    data = data - 1;
    document.getElementById("counting").innerText = data;
}

完整代码:在本节中,我们将结合以上三个部分来创建一个计数器。

HTML



    
        
  
        
    
  
    
        
        

Increment and Decrement counter

           
                                                   

                     
                      

输出: