1. <body>
    2. <div class="whole">
    3. <ul>
    4. <li class="current">登录</li>
    5. <li>注册</li>
    6. </ul>
    7. <div class="content">
    8. <div>
    9. <input type="text" placeholder="账号">
    10. <input type="password" placeholder="密码">
    11. <button>登录</button>
    12. </div>
    13. <div>
    14. <input type="text" placeholder="账号">
    15. <input type="text" placeholder="输入验证码">
    16. <button id="btn" onclick="go()">发送验证码</button>
    17. </div>
    18. </div>
    19. </div>
    20. <script>
    21. var lis=document.querySelectorAll("ul li");
    22. var divs=document.querySelectorAll(".content div");
    23. var btn=document.getElementById("btn");
    24. for(var i=0 ;i<lis.length;i++){
    25. lis[i].index=i;
    26. lis[i].onclick=function(){
    27. for(var i=0;i<lis.length;i++){
    28. lis[i].className="";
    29. }
    30. this.className="current";
    31. for(var i=0;i<divs.length;i++){
    32. divs[i].style.display="none";
    33. }
    34. divs[this.index].style.display="block"
    35. }
    36. }
    37. num=6;
    38. function go(){
    39. setTimeout(function (){
    40. num--;
    41. if(num>=0){
    42. btn.innerHTML=num;
    43. btn.disabled=true
    44. btn.style.color="gray"
    45. btn.style.backgroundColor="#aaaa38"
    46. go();
    47. }
    48. else {
    49. num=6;
    50. btn.innerHTML="发送验证码"
    51. clearInterval();
    52. btn.disabled=false;
    53. btn.style.color="white"
    54. btn.style.backgroundColor=" #dada3a"
    55. }
    56. },1000)
    57. }
    58. </script>
    59. </body>
    60. </html>

    image.png

    image.png