定时器的应用

最新推荐文章于 2024-07-15 18:30:26 发布

我若成魔，佛赖我何，我就是程序狂魔

最新推荐文章于 2024-07-15 18:30:26 发布

阅读量118

点赞数 4

文章标签：大数据

本文链接：https://blog.csdn.net/wangmengsasa/article/details/125543420

版权

HTML代码

     <p></p>
     <input type="text" class="int">
     <input type="button" value="点击按钮" class="btn">

CSS代码

     p{
        width: 800px;
        height: 600px;
        background: red;
        display: none;
      }

JS代码

     //获取元素
          let box=document.querySelector('p');
          let btn=document.querySelector('.btn');
          let int=document.querySelector('.int');
          //设定num值
          let num=10;
          //绑定点击事件
           btn.onclick=function(){
            //开启定时器
            let times=setInterval(function(){//
              //num值自减 让input里面的value值等于num值
            num--
            btn.value=num;
            //判断当input的value值等于0时 执行下面程序
             if(btn.value==0){
              box.style.display="block";
              box.innerHTML=int.value;
              btn.disabled=true;//input表单按钮禁用
              clearInterval(times)//清除定时器input  value值等于0时清除定时器
            }
         },1000)//设定定时器执行程序的毫秒数
         }

效果图