BOM 案例
1. 5秒后自动关闭广告
<body>
<img src="images/ad.jpg" alt="" class="ad">
<script>
var ad=document.querySelector('.ad');
setTimeout(function(){
ad.style.display='none';
},5000);
</script>
</body>
2. 倒计时效果
<style>
div {
margin: 200px;
}
span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
</style>
<body>
<!-- 倒计时 -->
<div>
<span class="hour">1</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('2021-12-15 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>
3. 发送短信案例
<body>
<!-- 发送短信案例 -->
手机号码:<input type="number"><button>发送</button>
<script>
var btn=document.querySelector('button');
var time=60;
btn.addEventListener('click',function(){
this.disabled=true;
var time1=setInterval(function(){
if(time==0){
clearInterval(time1);
btn.disabled=false;
btn.innerHTML='发送';
time=60;
}else{
btn.innerHTML='还剩下'+time+'秒';
time--;
}
},1000);
})
</script>
</body>
4. 5秒中之后跳转页面
<body>
<!-- 5秒中之后跳转页面 -->
<button>点击</button>
<div></div>
<script>
var btn=document.querySelector('button');
var div=document.querySelector('div');
var time=5;
btn.addEventListener('click',function(){
location.href='http://www.baidu.com';
})
setInterval(function(){
if(time==0){
location.href='http://www.baidu.com';
}else{
div.innerHTML='您将在'+time+'秒钟之后跳转首页';
time--;
}
},1000);
</script>
</body>
5. 获取URL参数数据
<body>
<form action="index.html">
用户名:<input type="text" name="uname">
<input type="submit" value="登录">
</form>
</body>
<body>
<div></div>
<script>
console.log(location.search);
var params=location.search.substr(1);
console.log(params);
var arr=params.split('=');
console.log(arr);
var div=document.querySelector('div');
div.innerHTML=arr[1]+'欢迎您';
</script>
</body>