您的位置：首页 > Web前端 > JavaScript

javascript--BOM（浏览器对象模型）

2019-09-16 10:47 363 查看

window下的对象的方法
alert() 警告框

window.alert();
var a=100;//声明的变量是加到window 对象上的属性
console.log(window.a);//console.log(a);

confirm() 确认框

confirm('你确定要放弃H5么');//确认框
var flag=confirm('你确定要放弃H5么');//确认框
console.log(flag);

window.onload =function(){
var btn=document.getElementById('btn');
btn.onclick =function(){
var flag=confirm('你确定要放弃H5么');//确认框
console.log(flag);
}
}
<body>
<button id=btn>请选择</button>
</body>

close()

var win=open('https://www.baidu.com/');//新的窗口win. close();//当前窗口关闭

open()

open('https://www.baidu.com/');//新的窗口

setTimeout() 延迟执行

var win=open('https://www.baidu.com/');//新的窗口setTimeout(function(){
win. close();//当前窗口关闭
},3000)

setInterval() 周期执行

var i=0;
//周期执行
setInterval(function(){
console.log(i++);
},1000 );

clearInterval() 清除定时器

window.onload =function(){
var btn=document.getElementById('btn');
var btn=document.getElementById('stop');
var id;
btn.onclick =function(){
var i=0;
//           //周期执行
id = setInterval(function(){
console.log(i++);
},1000 );
console.log(id);
}
stop.onclick= function(){
//清除定时器
clearInterval(id);
}
}
<body>
<button id=btn>请选择</button>
<button id=stop> 停止</button>
</body>

onload() 加载

window下的对象
history 历史对象 back(), forward(),go()
location 位置对象 hash() ,href(),reload(),search(),port(),host()
navigator 导航对象 userAgent()用户代理,appVersion()
screen 屏幕对象 width(),height(),availHeight()分辨率,availWidth()
document 对象

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
*{
padding: 0;
margin: 0;
}
#box{
width: 800px;
height: 120px;
border: 3px solid red;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#slide{
width: 1320px;
position: absolute;
}
#slide img{
width: 200px;
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="box">
<div id="slide">
<img src="img/imgs/s3.jpg" alt="">
<img src="img/imgs/s3.jpg" alt="">
<img src="img/imgs/s3.jpg" alt="">
<img src="img/imgs/s3.jpg" alt="">
<img src="img/imgs/s3.jpg" alt="">
<img src="img/imgs/s3.jpg" alt="">
<img src="img/imgs/s3.jpg" alt="">
</div>
</div>
<script>
var slide = document.getElementById('slide');
var box = document.getElementById('box');
var i = 0;
var id = setInterval(function(){
slide.style.left = i-- + 'px';
},50);
box.onmouseover = function(){
clearInterval(id);
}
box.onmouseout = function(){
id = setInterval(function(){
slide.style.left = i-- + 'px';
},50);
}
</script>
</body>
</html>

var i = 0;
function move(){
// if(i<=-1320){
//     i=0;
// }else{
//     i--;
// }
i = i<=-1320?0:i-1;
slide.style.left = i + 'px';
}
var id = setInterval(move,10);

box.onmouseover = function(){
clearInterval(id);
}
box.onmouseout = function(){
id = setInterval(move,10);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航