网站的按钮点击器答案

【问题标题】：Button clicker for website网站的按钮点击器
【发布时间】：2015-05-09 15:49:12
【问题描述】：

我需要一个按钮点击器。当我点击按钮时，0变成1，如果我再次点击，1变成2等等。

我已经尝试过这段代码，但它对我不起作用。

我需要一个有效的代码，即使我刷新标签或关闭它，它也会记住点击量。这是我试过的代码。

<html>
<head>
    <title>Space Clicker</title>
</head>

<body>
    <script type="text/javascript">
    int clicks = 0;
    function click() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };
    </script>
    <button type="button" onClick="click()">Click me</button>
    <p>Clicks: <a id="clicks">0</a></p>

</body></html>

【问题讨论】：

您研究过 cookie 吗？
我研究过 cookie 吗？我想在网站上制作类似 Cookie-Clicker 的游戏，所以第一步就是这个。 :)
啊，很好，因为 cookie 肯定“即使我刷新标签或关闭 [页面] 也会记住点击量。”
@StefanĐorđević 检查我下面的代码，解决了您保存计数的问题；本地存储来救援

标签： javascript button numbers click counter

【解决方案1】：

Javascript 没有“int”，它使用“var”。

    <html>
<head>
    <title>Space Clicker</title>
</head>

<body>
    <script type="text/javascript">
    var clicks = 0; // change int to var here
    function countClicks() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };
    </script>
    <button type="button" onClick="countClicks()">Click me</button>
    <p>Clicks: <a id="clicks">0</a></p>

</body></html>

【讨论】：

此代码不起作用
click是保留的JS函数
它对我有用，无论如何，你是绝对正确的。我已经更改了函数名称...

【解决方案2】：

您需要将您的点击计数保存到某个永久位置，并在重新加载页面时再次检索。 Cookies 是个好地方。

您可以通过here或here了解更多关于cookies的信息

【讨论】：

【解决方案3】：

将click() 更改为除此之外的几乎任何内容。我建议incrementClick()。 click() 是 JavaScript 中的保留函数。

<html>
<head>
    <title>Space Clicker</title>
</head>

<body>
    <script type="text/javascript">
    var clicks = 0;
    function incrementClick() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };
    </script>
    <button type="button" onClick="incrementClick()">Click me</button>
    <p>Clicks: <a id="clicks">0</a></p>

</body></html>

为了在页面刷新期间保持点击，我建议使用 cookie 来保存 click 变量的当前值，如下所示 (ref)：

function createCookie(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

读取 cookie：

function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

支持 cookie 的演示：http://jsbin.com/rekafi/4

注意：我建议您不要在 <button> 元素中包含内联 JavaScript（例如 onClick="incrementClick()"）。例如，尝试使用 jQuery 将 JS 与 HTML 分开。

【讨论】：

【解决方案4】：

有效的 HTML 代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <!--<script src="app1.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>

</head>

<body>
  <div id="clickdiv" >hello</div> 
  <button  onclick="countTracker()">Click me</button> 
  <script type="text/javascript">

      var clickCount = 0;
      function countTracker() {
          clickCount += 1;
          document.getElementById("clickdiv").innerHTML = "Clicks:" + clickCount;
          localStorage.setItem("count", clickCount);

      }
      str_count = localStorage.getItem("count");
      console.log(str_count);
    </script>

</body>
</html>

【讨论】：

想解释一下您从哪里得到将函数名称更改为clickFun() 到OP 的想法？ :)
@Drakes clickFun 是一个坏名字，但使用 click() 却无法正常工作。我的理解是“click”是保留字，不能作为函数名。

【解决方案5】：

您可以尝试保存到本地存储

var clicks = parseInt( localStorage.getItem("clicks") || 0 ) ;

function bindThisToButtonClickHandler() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
    localStorage.setItem("clicks", clicks) 
};

您可以在这里查看浏览器支持：http://caniuse.com/#search=localstorage

【讨论】：