一个简单的含倒计时入社邀请网页片段

最新推荐文章于 2024-10-09 00:58:21 发布

my shallow dream

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/zzxshallowdream/article/details/113759899

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一个简单的含倒计时入社邀请网页片段
一.网页说明：一时奇思妙想想做一个电影中出现的那种用来吓人的会自动倒计时的网页，倒计时结束显示吓人的话然后自动关闭。

二.组成部分

<!--html主体部分*/-->
<body onload="countdown()">
<!--用于在页面加载完成时自动启动倒数程序-->
  <div id="headline">
  <h1>FIGHT CLUB</h1>
  <p>You have five seconds to choose.</p>
  </div>
  <a id="click" href="#" onclick="locationchange()">Click This</a>
  <!--用于在点击链接时转移到想要的网址，此处我只设置了到百度-->

/*CSS部分*/
 body{
  background-color:black;
  border:1px solid black;
  margin-bottom:20%;
  margin-top:20%;
  font-size:2em;
  font-weight:bold;
  text-align:center;
  text-shadow:1px 1px 1px #cccccc;
  box-shadow:0px 3px 5px #444444;
  /*将整体放置在画面中央，设置了两个阴影做做效果*/
  }
  h1{
  display:block;
  color:red;
  }
  #headline{
  color:white;
  }
  a{
  width:100%;
  text-decoration:none;
  /*取消链接下划线*/
  }
  a:link{
  border-radius:4px;
  width:100%;
  font-size:2em;
  font-weight:bold;
  color:black;
  text-align:center;
  border:1px solid black;
  }
  a:visited{
  color:red;
  background-color:black;
  border:1px solid black;
  }
  a:hover{
  width:100%;
  font-size:2em;
  font-weight:bold;
  color:red;
  background-color:black;
  transition:all 5s ease 0s;
  /*用transition进行悬停的过渡设置，从黑色变为红色。*/
  }

 <script>
  var ncount=document.createElement('p');//以p创造将要插入的元素
  ncount.style.color='red';
  ncount.innerText="10";
  //window.οnlοad=countdown();
  var count=5;
  function locationchange(){
	  window.location.href="http://www.baidu.com";	
	  }
  function destroy(){//destroy函数用于在倒计时停止时改变网页
        document.getElementById("headline").style.display='none';
		document.getElementById("click").style.display='none';//将页面中显示的东西隐藏
		document.body.style.marginTop="20%";
		lastword=document.createElement("p");
        lastword.style.color="#880000";//这个算是比较血红的颜色
		lastword.innerText="You have lost your only chance, the door is closed."//奇怪的狠话增加了
		document.body.appendChild(lastword);
		setTimeout('window.close()',3000);//关闭网页
	  }
  function countdown(){//倒计时函数
	  document.getElementById("headline").appendChild(ncount);
	   if(count>0){
		  ncount.innerText=count;
		  count--;
		  setTimeout('countdown()',1000);
		  }
	   else if(count==0){
		   destroy();
		   }
	}
  </script>