Question

我一直在尝试为网页创建一个类似计数器。目前，它仅显示有人按下按钮时的点赞次数。代码写在下面。

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML =localStorage.clickcount;
    } 
}
</script>
</head>
<body>

<p><button onclick="clickCounter()" type="button"  style="background-image:url(URL TAKEN OUT DUE TO COPYRIGHT ISSUE); background-position:left; background-repeat:no-repeat; padding-left:30px; padding-top:4px; padding-bottom:4px; padding-right:4px" > Please Like! </button> </p>
<div id="result"></div>



</body>
</html>

我知道.innerHTML是“喜欢数量”背后的问题，但我不确定如何将其显示为始终位于按钮上方并居中。

例如。如果页面有143个赞。

    143 
Please Like!

请帮助我-非常感谢您阅读

Answer 1

您必须首先显示计数器，然后在每次更改时保持跟踪。

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        showCounter();
    } 
}
function showCounter(){
    if(typeof(Storage) !== "undefined") {
        document.getElementById("result").innerHTML =localStorage.clickcount;
    }
}
</script>
</head>
<body>

<p><button onclick="clickCounter()" type="button"  style="background-image:url(URL TAKEN OUT DUE TO COPYRIGHT ISSUE); background-position:left; background-repeat:no-repeat; padding-left:30px; padding-top:4px; padding-bottom:4px; padding-right:4px" > Please Like! </button> </p>
<div id="result"></div>


<script>
   showCounter(); //Fisrt call, Once the page is loaded.
</script>
</body>
</html>

一律显示点击次数

1 个答案: