Maison >interface Web >js tutoriel >Comment empêcher qu'un bouton soit cliqué plusieurs fois sur une courte période grâce aux techniques time_javascript

Comment empêcher qu'un bouton soit cliqué plusieurs fois sur une courte période grâce aux techniques time_javascript

WBOY
WBOYoriginal
2016-05-16 16:55:592183parcourir

Si un bouton peut être cliqué plusieurs fois sur une courte période de temps, l'utilisateur peut cliquer dessus de manière malveillante. Pour éviter cela, vous pouvez le configurer pour qu'il ne clique qu'une seule fois au cours d'une certaine période de temps et interdire de cliquer sur le bouton à d'autres moments. fois.

Le code est le suivant :

Copier le code Le code est le suivant :



Événement chronométré Js</ titre> <br> <script src="js/jquery-1.9.1.js" type="text/javascript"></script> <br>< form id="form1" runat="server"> <br><div> <br><input type="button" value="Cliquez-moi" id="btn" onclick=" show()" /> <br></div> <br><script type="text/javascript"> <br>/* <br>timeId=window.setTimeout("method()", 1000); window .clearTimeout(timeId); exécution planifiée<br>timeId=window.setInterval("method()",1000); window.clearInterval(timeId); var nn = 30 ; <br>var tipId; <br>function show() { <br>tipId = window.setInterval("start()", 1000 //Appelle la méthode start() toutes les 1 seconde} <br><br>function start() { <br>if (nn > 0) { <br>var vv = "Cliquez sur moi(" nn ")" <br>$("#btn") .attr ("disabled", "disabled"); //Rendre le bouton non cliquable<br>$("#btn").attr("value", vv); //Modifier le texte sur le bouton<br>nn -- ; <br>} else { <br>nn = 30; <br>$("#btn").removeAttr("disabled"); //Activer le clic sur le bouton<br>$("#btn "). attr("value", "Click me"); //Modifier le texte sur le bouton<br>window.clearInterval(tipId); //Effacer l'événement de boucle<br>} <br>} <br> </script> <BR></form> <br></corps <BR></html></div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration:</span><div>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</div></div></div><div class="nphpSytBox"><span>Article précédent:<a class="dBlack" title="À propos de la sélection dynamique d'objets JavaScript et des compétences de parcours d'objets_javascript" href="https://m.php.cn/fr/faq/13687.html">À propos de la sélection dynamique d'objets JavaScript et des compétences de parcours d'objets_javascript</a></span><span>Article suivant:<a class="dBlack" title="À propos de la sélection dynamique d'objets JavaScript et des compétences de parcours d'objets_javascript" href="https://m.php.cn/fr/faq/13689.html">À propos de la sélection dynamique d'objets JavaScript et des compétences de parcours d'objets_javascript</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/fr/faq/1609.html" title="Une analyse approfondie du composant de groupe de liste Bootstrap" class="aBlack">Une analyse approfondie du composant de groupe de liste Bootstrap</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/1640.html" title="Explication détaillée du currying de la fonction JavaScript" class="aBlack">Explication détaillée du currying de la fonction JavaScript</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/1949.html" title="Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)" class="aBlack">Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/2248.html" title="Angularjs intègre l'interface utilisateur WeChat (weui)" class="aBlack">Angularjs intègre l'interface utilisateur WeChat (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/2351.html" title="Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript" class="aBlack">Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!</p></div><div class="footermid"><a href="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>