版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
js BOM对象 练习题
在屏幕上显示系统时间，每秒更新。
<h1></h1>
<script>
//在屏幕上显示系统时间，每秒更新。
var hh=document.querySelector('h1');//得到页面上的h1标签
setInterval(function(){//间隔函数 每过1秒得到当前时间，写在页面上
var date=new Date();//得到当前系统时间
var y=date.getFullYear();//年
var Month=date.getMonth()+1;//月
var d=date.getDate();//日
var h=date.getHours();//时
var m=date.getMinutes();//分
var s=date.getSeconds();//秒
var time=y+'年'+Month+'月'+d+'日 '+h+':'+m+':'+s//显示格式
hh.innerHTML=time//将时间写在h1里
},1000)
</script>
在页面中有一个button和一个文本输入框，要求：点击button后，在百度搜索文本输入框内的内容
//在页面中有一个button和一个文本输入框，要求：点击button后，在百度搜索文本输入框内的内容
<input type="text">
<button>搜索</button>
<script>
document.querySelector('button').onclick=function(){//页面上button的点击事件
var shuru=document.querySelector('input').value;//得到输入框的值
location.assign('https://www.baidu.com/s?wd='+shuru);//去百度搜索
//location.href='https://www.baidu.com/s?wd=' + shuru;
}
</script>
广告弹出自动关闭(效果见页面)
//广告弹出自动关闭(效果见页面)
<div style="width: 500px;height:500px;background: brown;display: none; font-size: 30px;text-align: center;line-height: 500px">
</div>
<script>
var div = document.querySelector('div');//得到页面上的div
window.onload = function () {//当页面加载完之后执行此函数
setTimeout(function () {//延时函数 1s之后执行
div.style.display = 'block'//显示div
}, 1000)
var i = 5;
var id = setInterval(function () {//间隔函数，每过1秒执行一次
if (i === 0) {//判断秒数
clearInterval(id);//退出间隔函数
div.style.display = 'none'//隐藏页面上的div
}
div.innerHTML = ('自动关闭倒计时' + i);//在页面的div显示内容
i--;
}, 1000)
}
</script>
返回顶部
<body style="height: 5000px">//出现滚动条
<div style="position: fixed;right:30px;bottom:30px;background: chocolate;width: 200px;height: 200px;display: none">
</div>
<script>
//返回顶部
var div = document.querySelector('div');//得到页面上的div
window.onscroll = function () {//滚动函数 需要滚动条
var scrollTop = document.body.scrollTop ?
document.body.scrollTop :
document.documentElement.scrollTop//scrollTop为窗口滚动的位置。
//由于窗口滚动的位置存放在body、html中的其中一个值中，但不知是那个值
//所以用三木运算符判断
if (scrollTop > 1000) {//判断如果大于1000显示div
div.style.display = 'block'
} else {
div.style.display = 'none'//否则隐藏
}
}
var id
div.onclick = function () {//div的点击事件
// document.body.scrollTop=0;
// document.documentElement.scrollTop=0;
id = setInterval(function () {//间隔函数 用来显示出过度的效果
var scrollTop = document.body.scrollTop ?
document.body.scrollTop :
document.documentElement.scrollTop//同上一样
if (scrollTop === 0) {//如果为0 删除间隔函数
clearInterval(id);
}
document.body.scrollTop = scrollTop - 200;//每一次减200 这里是改窗口位置的所以不能用
//scrollTop-=200
document.documentElement.scrollTop = scrollTop - 200;//每一次减200
//上面两个值是因为，还是不知道那个里有值
}, 50)
}
window.onmousewheel = function () {//鼠标滚轮事件
clearInterval(id);//鼠标滚轮滚动时删除间隔函数
}
</script>
</body>