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

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

javascript html database

Javascript 具有不同值和单击计数器的多个按钮,javascript,html,database,Javascript,Html,Database,我目前有一个项目正在进行，我想知道如何使计数器增加点击。所有按钮都有不同的值（如2），单击后，计数器将增加。我目前已经设置了所有的按钮，但我不确定如何为它们增值，并根据按钮的价值增加计数器。我还想知道如何将该值存储在web缓存中。如果有人能帮忙，我真的很感激。这是我目前的代码正文{ 背景色：#162428； } .按钮{ 背景色：#4CAF50；颜色：白色；填充：32px 32px；文本对齐：居中；文字装饰：无；显示：内联块；字体大小：60px；利润率：200px 100px；

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

正文{
背景色：#162428；
}
.按钮{
背景色：#4CAF50；
颜色：白色；
填充：32px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：60px；
利润率：200px 100px；
-webkit转换持续时间：0.4s；/*Safari*/
过渡时间：0.4s；
光标：指针；
宽度：250；
身高：200；
}
.单击1{边界半径：8px}
.点击1{
背景颜色：灰色；
颜色：#070d0f；
边框：2个实心#070d0f；
}
。单击1：悬停{
背景色：#070d0f；
颜色：白色；
}
.单击2{边界半径：8px}
.点击2{
背景颜色：灰色；
颜色：#070d0f；
边框：2个实心#070d0f；
}
.单击2：悬停{
背景色：#070d0f；
颜色：白色；
}
.单击3{边界半径：8px}
.点击3{
背景颜色：灰色；
颜色：#070d0f；
边框：2个实心#070d0f；
}
.单击3：悬停{
背景色：#070d0f；
颜色：白色；
}
.单击5{边界半径：8px}
.点击5{
背景颜色：灰色；
颜色：#070d0f；
边框：2个实心#070d0f；
}
.单击5：悬停{
背景色：#070d0f；
颜色：白色；
}
.单击10{边界半径：8px}
.点击10{
背景颜色：灰色；
颜色：#070d0f；
边框：2个实心#070d0f；
}
。单击10：悬停{
背景色：#070d0f；
颜色：白色；
}
页脚{
颜色：灰色；
字体大小：65px；
}


放大按钮
+1
+2
+3
+5
+10

这是一段代码，可以满足您的需求。我对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>


放大按钮
身体{
背景色：#162428；
}
.按钮{
背景色：#4CAF50；
颜色：白色；
填充：32px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：60px；
利润率：100px 100px；
-webkit转换持续时间：0.4s；/*Safari*/
过渡时间：0.4s；
光标：指针；
宽度：250；
身高：200；
}
.单击1{边界半径：8px}
.点击1{
背景颜色：灰色；
颜色：#070d0f；
边框：2个实心#070d0f；
}
。单击1：悬停{
背景色：#070d0f；
颜色：白色；
}
.单击2{边界半径：8px}
.点击2{
背景颜色：灰色；
颜色：#070d0f；
边框：2个实心#070d0f；
}
.单击2：悬停{
背景色：#070d0f；
颜色：白色；
}
.单击3{边界半径：8px}
.点击3{
背景颜色：灰色；
颜色：#070d0f；
边框：2个实心#070d0f；
}
.单击3：悬停{
背景色：#070d0f；
颜色：白色；
}
.单击5{边界半径：8px}
.点击5{
背景颜色：灰色；
颜色：#070d0f；
边框：2个实心#070d0f；
}
.单击5：悬停{
背景色：#070d0f；
颜色：白色；
}
.单击10{边界半径：8px}
.点击10{
背景颜色：灰色；
颜色：#070d0f；
边框：2个实心#070d0f；
}
。单击10：悬停{
背景色：#070d0f；
颜色：白色；
}
+1
+2
+3
+5
+10
计数：0
//DOM就绪时启动脚本
$（文档）.ready（函数（）{
//将计数器初始化为0
var计数=0；
//单击具有“button”类的元素时执行某些操作
$（'.button'）。在（'click'，function（）上{
//获取按钮值
var值=$（this.data（'value'）；
//使用新值更新计数
计数+=数值；
//使用“count”类打印元素上的新值count
$（'.count'）.html（count）；
});
});
页脚{
颜色：灰色；
字体大小：65px；
}

您可以编写这样的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>

+1
+2

要在缓存中存储值，可以使用本地存储。您可以在此处阅读有关它们的信息：

注意事项这个答案是使用。在继续之前，一定要熟悉这个

解释通过在按钮上使用类来标识必须递增的按钮，可以实现所需的功能

使用

getElementsByClassName（）

将帮助您仅检索与您在HTML中提供的类匹配的按钮

然后，您需要遍历按钮。我使用较新的spread运算符将

HTMLCollection

转换为

数组

。然后可以使用

forEach

方法为每个按钮操作一组指令（设置HTML内容并添加侦听器）

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

代码 HTML:

演示

在JavaScript中考虑使用每个保存按钮的保存值。谢谢！这很有魅力。我只需要添加web存储，但除此之外，非常感谢！Kevinniel，你知道如何添加web存储吗？特别是本地存储？是的，我有，但是d

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

'use strict';

// all the .button-counter from the DOM
const buttonsCounter = document.getElementsByClassName('button-counter');

// sets the content of the button to what value is currently set for data-counter
const buttonCounterSetText = button => button.innerHTML = `Click me (${button.dataset.count || 0})`;

// handles click event on the button
const buttonCounterClickHandler = ({currentTarget}) => {
  // increases the current value for data-count, or sets it to 0
  currentTarget.dataset.count = (parseInt(currentTarget.dataset.count) || 0) + 1;
  // see above
  buttonCounterSetText(event.currentTarget);
}; 

// initialize the buttons content and add listeners for click events
const buttonCounterInitialization = button => {
  buttonCounterSetText(button);
  button.addEventListener('click', buttonCounterClickHandler);
};

// initialize all buttons found with class .button-counter
[...buttonsCounter].forEach(buttonCounterInitialization);