1-1 3s倒计时

  1. <div id="app">
  2. 3
  3. </div>
  4. <script>
  5. var num =3;
  6. var app = document.getElementById("app");
  7. // function go(){
  8. // setTimeout(()=>{
  9. // num--;
  10. // if(num>=0){
  11. // go();
  12. // app.innerHTML = num;
  13. // }
  14. // },1000)
  15. // }
  16. // go();
  17. var timer = setInterval(()=>{
  18. num--;
  19. console.log(num)
  20. if(num>=0){
  21. app.innerHTML = num;
  22. }else{
  23. clearInterval(timer)
  24. }
  25. },1000)
  26. </script>

1-2按钮5s倒计时

  1. <button id="btn">发送验证码</button>
  2. <script>
  3. var num =3;
  4. var btn = document.getElementById("btn");
  5. var timer;
  6. btn.onclick = function(){
  7. btn.disabled = true;
  8. btn.innerHTML = num;
  9. timer = setInterval(()=>{
  10. num--;
  11. if(num>=0){
  12. btn.innerHTML = num;
  13. }else{
  14. btn.innerHTML = "发送验证码";
  15. clearInterval(timer)
  16. btn.disabled = false;
  17. num=3;
  18. }
  19. },1000)
  20. }
  21. </script>

1-3 点击对应按钮,对应按钮删除

点击删除按钮,点击确定删除对应的元素

例子A - 图1

  1. <ul>
  2. <li>html <button>删除</button></li>
  3. <li>css <button>删除</button></li>
  4. <li>js <button>删除</button></li>
  5. </ul>
  6. var btns = document.getElementsByTagName("button")
  7. for(var i=0;i<btns.length;i++){
  8. btns[i].onclick = function(){
  9. var temp = window.confirm("确定吗")
  10. if(temp){
  11. this.parentNode.style.display = "none"
  12. }
  13. }
  14. }