基础知识：
JavaScript进阶班之BOM技术(五)
2秒关闭广告案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2秒关闭广告</title>
</head>
<body>
<script>
window.addEventListener("load",function(){
var img=document.querySelector('img');
setTimeout(function(){
img.style.display='none';
},2000);
});
</script>
<img src="images/鼠标.png" alt="" >
</body>
</html>
倒计时案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时</title>
<style>
span{
position: relative;
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
background-color: #2f3430;
margin-right: 10px;
color: aliceblue;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<span class="hour">10</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
var hour=document.querySelector('.hour');
var minute=document.querySelector('.minute');
var second=document.querySelector('.second');
var inputTime=+new Date('2022-9-6 20:00:00');
countDown();//先调用一次，防止刷新时有空白
setInterval(countDown,1000);
function countDown(){
var nowTime=+new Date();
var times=(inputTime-nowTime)/1000;
var h=parseInt(times /60 /60 % 24);
h=h<10?'0'+h:h;
hour.innerHTML=h;
var m=parseInt(times /60 % 60);
m=m<10?'0'+m:m;
minute.innerHTML=m;
var s=parseInt(times % 60);
s=s<10?'0'+s:s;
second.innerHTML=s;
}
</script>
</body>
</html>
发送短信案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发送短信案例</title>
</head>
<body>
手机号码：<input type="number"><button>发送</button>
<script>
var btn=document.querySelector('button');
var time=3;
btn.addEventListener('click',function(){
btn.disabled=true;
var timer=setInterval(function(){
if(time==0){
clearInterval(timer);
btn.disabled=false;
btn.innerHTML='发送';
time=3;
}else
btn.innerHTML='还剩下'+time+'秒';
time--;
},1000);
})
</script>
</body>
</html>
获取到路径上的URL参数案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="index1.html">
用户名：<input type="text" name="username">
<input type="submit" value="登录">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script>
//substr('起始的位置','截取几个字符')；
var parms=location.search.substr(1);
var arr=parms.split('=');
var div=document.querySelector('div');
div.innerHTML=arr[1]+'欢迎您';
</script>
</body>
</html>
