一、BOM介绍
BOM–browser object model 浏览器对象模型 —》操作浏览器的
（1）浏览器里面有一个顶级对象：window ----》皇上
（2）页面也有一个顶级对象：document------》总管太监
-----页面中所有的内容都是属于浏览器，页面的内容也都是属于window。
二、系统对话框
（1） alert()
（2）prompt();
（3）confirm();
------>由于系统自带的对话框，在不同的浏览器中显示不一样，以后使用对话框我们自己写，使用html和css
三、页面加载事件
Window.onload = function(){ }
页面加载事件
当页面加载完毕的时候，再获取按钮
只要页面加载完毕了，这个事件就会触发------》页面中所有的内容（标签 属性 文本），还包括外部引入的js文件
window.onload = function(){
document.getElementById("btn").onclick = function () {
alert("哈哈");
};
};
页面关闭后才会触发的事件
window.onunload = function () {
alert("呵呵呵");
};
页面关闭之前会触发的事件
window.onbeforeunload = function () {
alert("呵呵呵");
};
三、Location对象
（1）Location对象是window对象下的属性
（2）Location就是地址栏对象，可以设置和获取地址栏中的url
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn">
<script>
console.log(location);
//地址栏上的#及后面的内容
console.log(location.hash);
//主机名和端口号
console.log(location.host);
//主机名
console.log(location.hostname);
//文件路径
console.log(location.pathname);
//端口号
console.log(location.port);
//协议
console.log(location.protocol);
onload = function () {
document.getElementById("btn").onclick = function () {
location.href = "http://www.jd.com";//属性 可以后退
location.assign("http://www.jd.com");//方法 可以后退
location.reload(); //刷新
location.replace("http://www.jd.com"); //没有历史记录 不可以后退
}
}
</script>
</body>
</html>
四、url
url ：统一资源定位符
url的组成：
http://localhost:63342/code/06%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E4%BA%8B%E4%BB%B6.html?_ijt=p40d3f7gdnuaqgeio0l863nqs
scheme://host:port/path?
（1）query scheme----通信协议 http ip ftp tcp udp
（2）host–主机 域名和ip地址
（3）port—》端口号
（4）path—》路径
五、history
方法：
forward();
back();
<input type="button" value="跳过去" id="btn1">
<input type="button" value="前进" id="btn2">
<script src="common.js"></script>
<script>
//跳转
my$("btn1").onclick = function () {
location.href = "text.html";
};
//前进
my$("btn2").onclick = function () {
history.forward();
};
</script>
六、navigator
（1）判读用户的浏览器类型 userAgent
（2）判断浏览器所在系统平台类型 platform
<script>
//可以判读用户的浏览器类型
console.log(window.navigator.userAgent);
//可以判读浏览器所在的系统平台类型
console.log(window.navigator.platform);
</script>
七、setInterval定时器
执行流程：当页面加载完毕后，过了一定的时间就会执行函数的代码，又过了时间再次执行函数代码，只要不清除定时器就一直执行。
<input type="button" value="停止" id="btn">
<script>
var timeId = setInterval(function () {
alert("哈哈");
},1000);
//清除定时器
my$("btn").onclick = function () {
clearInterval(timeId);
};
</script>
八、setTimeout
执行流程：在指定的毫秒数到达后会执行指定的函数，只执行一次。
<script>
var timeId = setTimeout(function () {
alert("哈哈");
},1000);
//清除定时器
clearTimeout(timeId);
</script>
九、协议禁用
<textarea>
小苏真的好帅的！
</textarea>
<input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled">
<script>
var time = 5;
var timeId = setInterval(function () {
time--;
my$("btn").value = "请仔细阅读协议("+time+")";
if (time <= 0 ){
//清除定时器
clearInterval(timeId);
my$("btn").value = "同意";
my$("btn").disabled = false;
}
},1000);
</script>
十、偏移量
（1） offsetLeft:–获取元素距离左边的距离
（2）offsetTop—》获取元素距离顶部的距离
（3）offsetWidth----》获取元素的宽度
（4）offsetHeight----》获取元素的高度
十一、直接通过document获取元素
<script>
获取body
console.log(document.body);
获取title
console.log(document.title)
获取html
console.log(document.documentElement);
</script>
十二、移动元素
如果样式代码在style标签中，外面是获取不到
如果样式代码在style属性中，外面是可以获取的
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 200px;
height: 100px;
background-color: pink;
margin-top: 20px;
}
</style>
<input type="button" value="移动到400px" id="btn1">
<input type="button" value="移动到800px" id="btn2">
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn1").onclick = function () {
var timeId = setInterval(function () {
获取元素当前的位置
var current = my$("dv").offsetLeft;//没有单位
设置div一次移动的像素
var step = 10;
每次移动后的距离
current += step;
if (current <= 400){
my$("dv").style.marginLeft = current+"px";
}else {
clearInterval(timeId);
}
},20);
};
my$("btn2").onclick = function () {
var timeId = setInterval(function () {
获取元素当前的位置
var current = my$("dv").offsetLeft;//没有单位
设置div一次移动的像素
var step = 10;
每次移动后的距离
current += step;
if (current <= 800){
my$("dv").style.marginLeft = current+"px";
}else {
clearInterval(timeId);
}
},20);
};
封装动画函数
function animate(element,target) {
var timeId = setInterval(function () {
获取元素当前的位置
var current = element.offsetLeft;//没有单位
设置div一次移动的像素
var step = 10;
每次移动后的距离
current += step;
if (current <= target){
element.style.marginLeft = current+"px";
}else {
clearInterval(timeId);
}
},20);
}
</script>
十三、封装动画函数
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 100px;
margin-top: 20px;
background-color: pink;
position: absolute;
}
</style>
<input type="button" value="移动到400px" id="btn1">
<input type="button" value="移动到800px" id="btn2">
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn1").onclick = function () {
animate(my$("dv"), 400);
};
my$("btn2").onclick = function () {
animate(my$("dv"), 800);
};
封装动画函数---->能实现任意一个元素移动到指定位置
function animate(element, target) {
var timeId = setInterval(function () {
获取元素当前的位置
var current = element.offsetLeft;没有单位
设置div一次移动的像素
var step = 9;右移动 正数 左移动 复数
step = current < target ? step : -step;
每次移动后的距离
current += step;
判断当前移动后的位置是否到达指定位置
if (Math.abs(target - current) > Math.abs(step)){
element.style.marginLeft = current + "px";
}else {
clearInterval(timeId);
element.style.marginLeft = target + "px";
}
}, 20);
}
</script>
十四、clientX & clientY
<style>
img {
position: absolute;
}
</style>
<img src="images/tianshi.gif" alt="" id="im">
<script src="common.js"></script>
<script>
document.onmouseover = function (e) {
my$("im").style.left = e.clientX+"px";
my$("im").style.top = e.clientY+"px";
};
</script>
十五、简单的轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
img {
vertical-align: top
}
.box {
width: 730px;
height: 454px;
margin: 100px auto;
padding: 5px;
border: 1px solid #ccc;
}
.inner {
width: 730px;
height: 454px;
background-color: pink;
overflow: hidden;
position: relative;
}
.inner ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}
.inner li {
float: left;
}
.square {
position: absolute;
right: 10px;
bottom: 10px;
}
.square span {
display: inline-block;
width: 16px;
height: 16px;
background-color: #fff;
text-align: center;
line-height: 16px;
cursor: pointer;
}
.square span.current {
background-color: orangered;
color: #fff;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner"><!--相框-->
<ul>
<li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/6.jpg" alt=""/></a></li>
</ul>
<div class="square">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</div>
</div>
<script src="common.js"></script>
<script>
//获取最外面的div
var box = my$("box");
//获取相框
var inner = box.children[0];
//获取相框的宽度
var imgWidth = inner.offsetWidth;
//获取ul
var ulObj = inner.children[0];
//获取span
var spans = inner.children[1].children;
for (var i = 0 ; i <spans.length ; i++){
spans[i].setAttribute("index",i);
//注册鼠标进入事件
spans[i].onmouseover = function () {
//先干掉所有的span的背景颜色
for (var j = 0 ; j < spans.length;j++){
spans[j].removeAttribute("class");
}
//这是当前的span的背景颜色
this.className = "current";
//获取自定义属性的值
var index = this.getAttribute("index");
//移动ul
animate(ulObj,-index*imgWidth);
};
}
//封装动画函数---->能实现任意一个元素移动到指定位置
function animate(element, target) {
var timeId = setInterval(function () {
//获取元素当前的位置
var current = element.offsetLeft;//没有单位
//设置div一次移动的像素
var step = 9;//右移动 正数 左移动 复数
step = current < target ? step : -step;
//每次移动后的距离
current += step;
//判断当前移动后的位置是否到达指定位置
if (Math.abs(target - current) > Math.abs(step)){
element.style.marginLeft = current + "px";
}else {
clearInterval(timeId);
element.style.marginLeft = target + "px";
}
}, 20);
}
</script>
十六、左右焦点轮播图
<style>
body, ul, ol, li, img {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 520px;
height: 280px;
padding: 5px;
position: relative;
border: 1px solid #ccc;
margin: 100px auto 0;
}
.ad {
width: 520px;
height: 280px;
overflow: hidden;
position: relative;
}
#box img {
width: 520px;
}
.ad ol {
position: absolute;
right: 10px;
bottom: 10px;
}
.ad ol li {
width: 20px;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
text-align: center;
background: #fff;
float: left;
margin-right: 10px;
cursor: pointer;
_display: inline;
}
.ad ol li.current {
background: yellow;
}
.ad ul li {
float: left;
}
.ad ul {
position: absolute;
top: 0;
width: 2940px;
}
.ad ul li.current {
display: block;
}
#focusD {
display: none;
}
#focusD span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#focusD #right {
right: 5px;
left: auto;
}
</style>
<div id="box" class="all">
<div class="ad">
<ul id="imgs">
<li><img src="images/01.jpg"/></li>
<li><img src="images/02.jpg"/></li>
<li><img src="images/03.jpg"/></li>
<li><img src="images/04.jpg"/></li>
<li><img src="images/05.jpg"/></li>
</ul>
</div><!--相框-->
<div id="focusD">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script src="common.js"></script>
<script>
var box = my$("box");
var ad = box.children[0];
var ulObj = ad.children[0];
var step = ad.offsetWidth;
var focusD = my$("focusD");
//鼠标进入
box.onmouseover = function () {
focusD.style.display = "block";
};
//鼠标离开
box.onmouseout = function () {
focusD.style.display = "none";
};
var index = 0;
//点击右箭头
my$("right").onclick = function () {
if (index < ulObj.children.length - 1){
index++;
animate(ulObj,-index*step);
}
};
//点击左箭头
my$("left").onclick = function () {
if (index > 0){
index--;
animate(ulObj,-index*step);
}
};
//封装动画函数---->能实现任意一个元素移动到指定位置
function animate(element, target) {
var timeId = setInterval(function () {
//获取元素当前的位置
var current = element.offsetLeft;//没有单位
//设置div一次移动的像素
var step = 9;//右移动 正数 左移动 复数
step = current < target ? step : -step;
//每次移动后的距离
current += step;
//判断当前移动后的位置是否到达指定位置
if (Math.abs(target - current) > Math.abs(step)){
element.style.marginLeft = current + "px";
}else {
clearInterval(timeId);
element.style.marginLeft = target + "px";
}
}, 20);
}
</script>
十七、无缝轮播图
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
vertical-align: top;
}
/*取消图片底部3像素距离*/
.box {
width: 300px;
height: 200px;
margin: 100px auto;
background-color: pink;
border: 1px solid red;
position: relative;
overflow: hidden;
}
.box ul li {
float: left;
}
.box ul {
width: 1500px;
position: absolute;
left: 0;
top: 0;
}
</style>
<div class="box" id="screen">
<ul>
<li><img src="imagess/01.jpg" alt=""/></li>
<li><img src="imagess/02.jpg" alt=""/></li>
<li><img src="imagess/03.jpg" alt=""/></li>
<li><img src="imagess/04.jpg" alt=""/></li>
<li><img src="imagess/01.jpg" alt=""/></li>
</ul>
</div>
<script src="common.js"></script>
<script>
var current = 0;//声明了一个变量
function f1() {
var ulObj = my$("screen").children[0];
current -= 10;
if (current < -1200){
ulObj.style.marginLeft = 0+"px";
current = 0;
}else {
ulObj.style.marginLeft = current+"px";
}
}
//定时器
var timeId = setInterval(f1, 20);
//鼠标进入
my$("screen").onmouseover = function () {
//停止
clearInterval(timeId);
};
//鼠标离开
my$("screen").onmouseout = function () {
timeId = setInterval(f1, 20);
};
</script>
554
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
