recherche

Maison >interface Web >js tutoriel >Code JavaScript pour déterminer sur quel bouton cliquer_javascript skills

Code JavaScript pour déterminer sur quel bouton cliquer_javascript skills

WBOY
WBOYoriginal
2016-05-16 15:25:581632parcourir

C'était très relaxant ces derniers temps. Le projet est terminé. J'ai profité de mon temps libre pour écrire un morceau de code javascript pour implémenter le code pertinent afin de déterminer sur quel bouton cliquer. Le code spécifique est le suivant : 

 <html>
   <head>
     <meta charset='utf-'>
   </head>
   <body>
     <button>第一个</button>
     <button>第二个</button>
     <button>第三个</button>
     <button>第四个</button>
     <button>第五个</button>
     <script>
       var but=document.getElementsByTagName('button');
       for(i=;i<but.length;i++){
         but[i].setAttribute('i',i+);
         but[i].onclick=function(){
           b=this.getAttribute('i');
           alert('这是第'+b+'个按钮');
         }
       }
     </script>
   </body>
 </html>

Le morceau de code suivant vous présentera l'implémentation de JavaScript. Après avoir cliqué sur un bouton, il faudra encore 60 secondes pour cliquer à nouveau sur le bouton

Lors de votre inscription, vous devez envoyer un e-mail pour vérifier l'activation du compte. Afin d'éviter l'envoi répété d'e-mails, vous pouvez configurer le bouton pour qu'il attende un moment après avoir cliqué sur envoyer avant de pouvoir continuer à cliquer dessus. Voici un exemple simple : 

<html> 
<head> 
<title>点击获取验证码按钮后按钮变灰，倒计时一段时间后又可重复点击</title> 
</head> 
<body> 
<input type="button" id="btn" value="免费获取验证码" /> 
<script type="text/javascript"> 
var wait=60; 
function time(o) { 
    if (wait == 0) { 
      o.removeAttribute("disabled");      
      o.value="免费获取验证码"; 
      wait = 60; 
    } else { 
      o.setAttribute("disabled", true); 
      o.value=wait+"秒后可以重新发送"; 
      wait--; 
      setTimeout(function() { 
        time(o) 
      }, 
      1000) 
    } 
  } 
document.getElementById("btn").onclick=function(){time(this);} 
</script> 
</body> 
</html>

Ce qui précède est la description complète de cet article, j'espère que vous l'aimerez tous.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Principe de mise en œuvre de l'image défilante jQuery_jqueryArticle suivant：Principe de mise en œuvre de l'image défilante jQuery_jquery

Articles Liés

Voir plus