按钮点击计数器(增量并保存)

时间:2018-01-24 06:20:42

标签: javascript

任何人都可以提供帮助:

方案是 user1 点击button时会增加

示例: user1 点击5次,然后 user2 点击下一个数字时为6.然后当user1再次点击时,它将是7 我认为它适用于ajax并保存到db,任何人都可以帮助我如何做到这一点。我是ajax和数据库的begginer 这是我刚才知道的代码:

<html>
<body>
<button type="button" onClick="counter()">Next</button>
<p>Number: <a id="counter">0</a></p>

 </body>
 </html>
 <script type="text/javascript">
 var counter= 0;
 function counter() {
    counter += 1;
    document.getElementById("counter").innerHTML = counter;
 }
 </script>

3 个答案:

答案 0 :(得分:0)

  

请使用会话存储来存储增量值。

使用sessionStorage.setItem("userclicks",variablevalue);

存储值

答案 1 :(得分:0)

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

       <script type="text/javascript">

           function load()
           {
           if(localStorage.getItem("counter")!=null)
                 {
                     counter = Number(localStorage.getItem("counter"));
                     document.getElementById("counterValue").innerHTML = counter;
                 }

           }
         var counter= 0;        

         function counterFn() {          
            counter = Number(localStorage.getItem("counter"));

            console.log(counter);
            counter += 1;
            localStorage.setItem("counter",counter);             
            document.getElementById("counterValue").innerHTML = counter;
         }

       </script>


    </head>
    <body onload="load();">

    <button type="button" onclick="counterFn()">Next</button>

    <p>Number:<a id="counterValue">0</a></p>

    </body>
</html>

答案 2 :(得分:-1)

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

       <script type="text/javascript">

           function load()
           {
           if(localStorage.getItem("counter")!=null)
                 {
                     counter = Number(localStorage.getItem("counter"));
                     document.getElementById("counterValue").innerHTML = counter;
                 }

           }
         var counter= 0;        

         function counterFn() {          
            counter = Number(localStorage.getItem("counter"));

            console.log(counter);
            counter += 1;
            localStorage.setItem("counter",counter);             
            document.getElementById("counterValue").innerHTML = counter;
         }

       </script>


    </head>
    <body onload="load();">

    <button type="button" onclick="counterFn()">Next</button>

    <p>Number:<a id="counterValue">0</a></p>

    </body>
</html>