如何在一定量的点击后使按钮消失

时间:2016-05-24 09:44:29

标签: javascript html

我有一个按钮是否可以让它消失,如果我点击它说5次?需要知道我正在做的一个小项目! 任何回应表示赞赏!

5 个答案:

答案 0 :(得分:1)

使用此代码

HTML:

<button type='button' id='button_test_clicks'>
  Click me!
</button>

JavaScript的:

(function(){
  var counter=0; // counter clicks initialization
  var button=document.getElementById('button_test_clicks'); //Our button
  button.addEventListener("click",function(){ //add a click event to button
    counter++; //incement the counter
    console.log(a);
    if(counter==5){
      button.style.display = 'none'; //hide if the clicks reached to 5
    }
  });
})();

但每当页面刷新时,计数器设置为零,以避免刷新问题在javascript中了解localStorage

答案 1 :(得分:0)

id分配给您的按钮 <Button id='myButton' onclick="myFunction()">

每按一下按钮,继续递增计数器(我想你知道怎么做)

到达柜台后, document.getElementById("Your_button_id_here").style.visibility = "hidden";

<script>
var counter=0;
function myFunction() {
    //increment counter
    counter+=1;
    if(counter>4)
        document.getElementById("Your_button_id_here").style.visibility = "hidden"
}
</script>

但是,我认为禁用会更合适: document.getElementById("Your_button_id_here").disabled=true

答案 2 :(得分:0)

你可以有一个像这样的简单脚本:

    var nbClicks=0;
    function btnOnClick(btn){
      if(++nbClicks>5){btn.style.display='none';}
    }

并使用它:         &lt; input type =“button”onclick =“btnOnClick(this)”value =“点击我6次!”&gt;

答案 3 :(得分:0)

每次点击只需增加一个变量的值,在得到所需的数字后,用css和js隐藏它。

答案 4 :(得分:0)

我用jQuery做了一个小例子

javax.mail.MessagingException: Connessione scaduta;
  nested exception is:
    java.net.ConnectException: Connessione scaduta
    at com.sun.mail.imap.IMAPStore.protocolConnect(IMAPStore.java:670)
    at javax.mail.Service.connect(Service.java:295)
    at javax.mail.Service.connect(Service.java:176)
    at CheckingMails.main(CheckingMails.java:12)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:606)
    at com.intellij.rt.execution.application.AppMain.main(AppMain.java:140)
Caused by: java.net.ConnectException: Connessione scaduta
    at java.net.PlainSocketImpl.socketConnect(Native Method)
    at java.net.AbstractPlainSocketImpl.doConnect(AbstractPlainSocketImpl.java:339)
    at java.net.AbstractPlainSocketImpl.connectToAddress(AbstractPlainSocketImpl.java:200)
    at java.net.AbstractPlainSocketImpl.connect(AbstractPlainSocketImpl.java:182)
    at java.net.SocksSocketImpl.connect(SocksSocketImpl.java:392)
    at java.net.Socket.connect(Socket.java:579)
    at java.net.Socket.connect(Socket.java:528)
    at com.sun.mail.util.SocketFetcher.createSocket(SocketFetcher.java:321)
    at com.sun.mail.util.SocketFetcher.getSocket(SocketFetcher.java:237)
    at com.sun.mail.iap.Protocol.<init>(Protocol.java:116)
    at com.sun.mail.imap.protocol.IMAPProtocol.<init>(IMAPProtocol.java:115)
    at com.sun.mail.imap.IMAPStore.newIMAPProtocol(IMAPStore.java:685)
    at com.sun.mail.imap.IMAPStore.protocolConnect(IMAPStore.java:636)
    ... 8 more
var count = 0;
$("#b1").click(function() {
  count++;
  if (count >= 5) {
    $("#b1").hide();
  }

});