search

Home  >  Article  >  Web Front-end  >  How to make the registration button clickable after ten seconds using javascript_javascript skills

How to make the registration button clickable after ten seconds using javascript_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:59:291397browse

The example in this article describes the method of using JavaScript to make the registration button clickable after ten seconds. Share it with everyone for your reference. The specific analysis is as follows:

1. The initial state of the registration button is disabled
2. Start the timer, setInterval, run the CountDown method once every second, and set a global variable with an initial value of 10,
Count down the global variable in the CountDown method, and then write the countdown value to the registration button (please read the agreement carefully (8 seconds left)).
3. Until the value of the global variable is <=0, make the registration button available and set the button text to "Agree!" 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <script type="text/javascript">
 var MyCount = 10;
 var intervalID;
 function CountDown() {
  var btnReg = document.getElementById("btnReg");
  if (btnReg) {
  //此处要加上btnReg是否为空的判断，
  //因为有可能网速很慢,setInterval后，btnReg按钮还没加载
  if (MyCount <= 0) {
   btnReg.disabled = ""; //或者btnReg.disabled="disabled"也可以
   btnReg.value = "同意";
   clearInterval(intervalID); //清除定时器
  }
  else {
   btnReg.value = "请仔细阅读协议(还剩" + MyCount + "秒)";
   MyCount--;
  }
  }
 }
 intervalID=setInterval("CountDown()", 1000);
 </script>
</head>
<body>
 <textarea>请同意本站的协议</textarea><br />
 <input id="btnReg" type="button" value="同意" disabled="disabled" />
</body>
</html>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Implementation method of javascript simulation scoring control_javascript skillsNext article：Implementation method of javascript simulation scoring control_javascript skills

Related articles

See more