Question

我目前正在进行一个项目，我想知道如何使点击量增加的计数器。所有按钮都有不同的值（例如2），一旦点击，计数器就会增加。我目前已经设置了所有按钮，但我不确定如何为它们增加价值并根据按钮的价值增加一个计数器。我还想知道如何将该值存储在Web缓存中。如果有人可以提供帮助，我真的很感激。这是我目前的代码。

＆＃13;

$scope.htmlOriginalDoc = parser.parseFromString(data, 'text/html');
$rootScope.data.htmlDocument = $scope.htmlOriginalDoc.body.innerText;

＆＃13;

    body{
    	background-color: #162428;
    }
    .button {
        background-color: #4CAF50; 
        color: white;
        padding: 32px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 60px;
        margin: 200px 100px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
        width: 250;
        height: 200;
    }
    .click1 {border-radius: 8px}
    .click1 {
        background-color: grey; 
        color: #070d0f; 
        border: 2px solid #070d0f;
    }
    
    .click1:hover {
        background-color: #070d0f;
        color: white;
    }
    .click2 {border-radius: 8px}
    .click2 {
        background-color: grey; 
        color: #070d0f; 
        border: 2px solid #070d0f;
    }
    
    .click2:hover {
        background-color: #070d0f;
        color: white;
    }
    
    .click3 {border-radius: 8px}
    .click3 {
        background-color: grey; 
        color: #070d0f; 
        border: 2px solid #070d0f;
    }
    
    .click3:hover {
        background-color: #070d0f;
        color: white;
    }
    .click5 {border-radius: 8px}
    .click5 {
        background-color: grey; 
        color: #070d0f; 
        border: 2px solid #070d0f;
    }
    
    .click5:hover {
        background-color: #070d0f;
        color: white;
    }
    .click10 {border-radius: 8px}
    .click10 {
        background-color: grey; 
        color: #070d0f; 
        border: 2px solid #070d0f;
    }
    
    .click10:hover {
        background-color: #070d0f;
        color: white;
    }
    
        footer {
        color: grey;
        font-size: 65px;
    }

＆＃13;

感谢您的帮助！

Answer 1

这是一段代码，制作你想要的东西。我对JS部分进行了评论，以便您能够理解它，但不要犹豫，询问您是否仍有疑问。

<html>
<title>Button of Magnificance</title>
<body>
<style>
body{
    background-color: #162428;
}
.button {
    background-color: #4CAF50; 
    color: white;
    padding: 32px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 60px;
    margin: 100px 100px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    width: 250;
    height: 200;
}
.click1 {border-radius: 8px}
.click1 {
    background-color: grey; 
    color: #070d0f; 
    border: 2px solid #070d0f;
}

.click1:hover {
    background-color: #070d0f;
    color: white;
}
.click2 {border-radius: 8px}
.click2 {
    background-color: grey; 
    color: #070d0f; 
    border: 2px solid #070d0f;
}

.click2:hover {
    background-color: #070d0f;
    color: white;
}

.click3 {border-radius: 8px}
.click3 {
    background-color: grey; 
    color: #070d0f; 
    border: 2px solid #070d0f;
}

.click3:hover {
    background-color: #070d0f;
    color: white;
}
.click5 {border-radius: 8px}
.click5 {
    background-color: grey; 
    color: #070d0f; 
    border: 2px solid #070d0f;
}

.click5:hover {
    background-color: #070d0f;
    color: white;
}
.click10 {border-radius: 8px}
.click10 {
    background-color: grey; 
    color: #070d0f; 
    border: 2px solid #070d0f;
}

.click10:hover {
    background-color: #070d0f;
    color: white;
}
</style>
<center>
<button class="button click1" data-value="1">+1</button>
<button class="button click2" data-value="2">+2</button>
<button class="button click2" data-value="3">+3</button>
<button class="button click5" data-value="5">+5</button>
<button class="button click10" data-value="10">+10</button>
<h1 style="color: #FFF;">
    count : <span class="count">0</span>
</h1>
</center>

<!-- Import JQuery -->
<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script type="text/javascript">
    // start script when DOM is ready
    $(document).ready(function(){
        // initialize a counter to 0
        var count = 0;
        // do something when an element with "button" class is clicked
        $('.button').on('click', function(){
            // get the button value
            var value = $(this).data('value');
            // update the count with new value
            count += value;
            // print the new value count on the element with "count" class
            $('.count').html(count);
        });
    });
</script>

</body>
<style>
footer {
    color: grey;
    font-size: 65px;
}
</style>
</html>

Answer 2

你可以像这样编写一个JS

var count=0;
function updateValue(val){
    count = count + val;
}

并且在您创建的每个按钮中，您可以添加一个onclick来调用此函数，如下所示：

<button class="button click1" onclick="updateValue(1)">+1</button>
<button class="button click2" onclick="updateValue(2)">+2</button>

要在缓存中存储值，您可以使用 localStorage 。你可以在这里阅读它们： https://www.w3schools.com/html/html5_webstorage.asp

Answer 3

备注

这个答案正在使用ES6 syntax。在继续前进之前，一定要对这个很舒服。

解释相关

您可以使用按钮上的类来识别必须增加按钮的按钮，从而实现您想要的效果。

使用labs(fill = 'Title for fill legend')可以帮助您仅检索与您在HTML中提供的课程相匹配的按钮。

然后，您需要遍历按钮。我使用较新的点差运算符将getElementsByClassName()转换为HTMLCollection。然后，您可以使用Array方法为每个按钮操作一组指令（设置HTML内容并添加一个监听器）。

使用Web Storage API和一些应用程序逻辑将确保数据不会重新加载页面。

代码

HTML：

forEach

使用Javascript：

<button class='button-counter'></button>
<button class='button-counter'></button>
<button class='button-counter' data-count='5'></button>

演示

Codepen

具有不同值的多个按钮和单击计数器

3 个答案:

备注

解释相关

代码

演示