javascript - 每个用户的单次点赞数

Question

我正在尝试实现一个自定义的点赞按钮，并在用户单击该按钮后输出“点赞”的数量。

理想的用户案例流程:

第 1 步:[用户] - 用户点击“自定义”按钮
Step 2: [SYSTEM] - 系统显示当前点赞数。
第 3 步:[USER] - 用户一次尝试再次点赞按钮。
Step 4: [SYSTEM] - 系统不会生效。

问题:

不幸的是，目前，这可以根据用户的喜好进行多次操作。如果一个用户在单次访问期间愿意，他们可以对一个页面点赞 10 次。

当前代码:

HTML

<div id="like">

    <input type="image" src="images/love.png" alt="Like" title="Like" width= "34" height="33" id="heart" onClick="onClick()">
    <div>
        <span id="output"></span>
    </div>  

CSS

#like {
    margin: 26px 30px 0px 0px;
}

@-webkit-keyframes pulse 
{
    from {
        -webkit-transform: scale(1.0);
        opacity: 1.0;
    }
    50% {
        -webkit-transform: scale(1.2);
        opacity: 1.0;
    }
    to { 
        -webkit-transform: scale(1.0);
        opacity: 1.0;
    }
}

#heart:hover 
{ 
    -webkit-animation-name: pulse; 
    -webkit-animation-duration: 0.5s; 
    -webkit-animation-iteration-count: 2; 
}

#output
{
    font-family: 'Open Sans', sans-serif;
    font-size: 10pt;
    font-weight: bold;
    color: white;
    margin-right: 7px;
    margin-left: 7px;
    float: right;
    align-content: center;          
}

Javascript

// Heart Like counts
var clicks = 50;
function onClick() 
{
    clicks += 1;
    document.getElementById("output").innerHTML = clicks;
};

Answer 1

只需设置一个标志，看看他们是否已经点击过。假设您正在存储此服务器端，您也可以在恢复数据后设置标志以实现跨负载的一致行为。

var clicks = 50;
var hasClicked = false;

    function onClick() 
    {
        if(!hasClicked)
        {
           clicks += 1;
           document.getElementById("output").innerHTML = clicks;
           hasClicked = true;
        }

    };