html页面使用js+css简单实现倒计时

最新推荐文章于 2023-07-29 09:20:31 发布

见不散

最新推荐文章于 2023-07-29 09:20:31 发布

阅读量248

点赞数

分类专栏：笔记文章标签： html js css

本文链接：https://blog.csdn.net/longd123/article/details/117016027

版权

笔记专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1.css

.mask{
    position: fixed;
    z-index: 9;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    top: 0;
    left: 0;
}
 .btn{
      background-color:RoyalBlue;
      border:0px;
      width:7rem;
      height:3rem;
      text-align: center;
     }
     .textcss{
      color:White;
     }
 
.size-dialog{
  width: 800px;
  height:900px;
}
 
.dialog{
    position: fixed;
    left:50%;
    top: 50%;
    bottom:20%;
    transform: translate(-50%, -50%);
    z-index: 12;
    background: White;
}

2.js

 window.onload = function() {
            var countNum=document.getElementById("numCount");
            var sec = 30;
            var sa = setInterval(function(){
                --sec;
                countNum.innerHTML=sec + "秒，我已经阅读"
                if(sec == 0){
                    clearInterval(sa);
                    countNum.innerHTML="我已经阅读"
                    document.getElementById("button_id").disabled="";
                    //location.href="首页.html";
                }
                },1000);
        }



document.getElementById("button_id").disabled="disabled";

function TheEvent(){

document.getElementById("dialog1").style.display="none";
}

3.html

  <div style="text-align:center">
   <button id="button_id"  onclick="TheEvent()" ><br><p id="numCount">30秒，我已经阅读</p></p></button>                 
 </div>