1.百度的延时跳转
arguments是函数中的隐含对象[index]
arguments.callee---代表正在被调用的函数
window.location.href - 返回完整的URL
/* 例子：
function add(){
// 对象--伪数组
window.alert(arguments.callee)
return arguments[0] + arguments[1]
}
window.alert(add(1,2))
*/
# 5秒之后会跳转到百度页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h3><span id="counter">5</span>秒钟以后跳到百度去</h3>
<script type="text/javascript">
/*
function add(){
// 对象--伪数组
window.alert(arguments.callee)
return arguments[0] + arguments[1]
}
window.alert(add(1,2))
*/
var countDown = 5;
var span = document.getElementById('counter')
window.setTimeout(function(){
countDown -= 1;
if(countDown==0){
window.location.href = 'https://www.baidu.com';
}else{
span.textContent = countDown;
// arguments是函数中的隐含对象
// arguments.callee---代表正在被调用的函数
window.setTimeout(arguments.callee,1000);
}
} , 1000);
</script>
</body>
</html>
2.广告的切换
通过document对象获取页面元素的常用方法有5个:
document.getElementById('') ==>通过ID获取单个元素
document.getElementsByTagName('')[]==>通过标签名获取元素的列表
document.getElementsByClassName('')[]==>通过类名获取元素的列表
document.querySelector('')==>通过样式表选择器获取单个元素
document.querySelectorAll('')==>通过样式表选择器获取的列表
document.querySelectorAll('')[]==>通过样式表选择器获取的列表
setInterval()-按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()-在指定的毫秒数后调用函数或计算表达式。
clearInterval()-显示当前时间 ( setInterval() 函数会每秒执行一次函数，类似手表)。使用 clearInterval() 来停止执行;clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值
#每过2S会切换图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 705px;
}
</style>
</head>
<body>
<div id="adv">
<img src="img/4.jpg" >
</div>
<script>
var index = 0;
var images = ["4.jpg","5.jpg","6.jpg","7.jpg"];
var img = document.querySelector('img')
// var img = document.getElementsByTagName('img')[0];
var timerId;
startIt();
var div = document.querySelector('#adv');
div.addEventListener('mouseover', stopIt);
div.addEventListener('mouseout',startIt);
function startIt(){
timerId = window.setInterval(function(){
index += 1;
index %= images.length;
img.src = 'img/' + images[index]
},2000);
}
function stopIt(){
window.clearInterval(timerId);
}
</script>
</body>
</html>
3.标签的绑定事件
当你知道事件发生时要做什么,但是你不知道事件什么时候发生
在这种情况下通常的处理方式都是绑定一个事件回调函数(callback)
closeWindow以及下面的匿名函数都属于事件发生时才执行的回调函数
# 给标签绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button id="ok">确定</button>
<script type="text/javascript">
// 给okButton绑定click事件的回调函数
function closeWindow(){
if(window.confirm('Clolse the window?')){
window.close();
}
}
// okButton.addEventListener('click',closeWindow)
var okButton = document.querySelector('#ok')
okButton.addEventListener('click', function(){
// window可以去掉,默认对象就是window
window.alert('hello world!')
// 移除事件
okButton.removeEventListener('click',arguments.callee)
// okButton.removeEventListener('click',closeWindow)
});
/*
okButton.onclick = function(){
window.alert('hello,world!');
};
function showInfo(){
window.alert('hello,world!');
};
okButton.onclick = showInfo;
*/
</script>
</body>
</html>
4.事件的冒泡处理
// addEventListener方法的第一个参数是事件名
// 第二个参数是事件发生时需要执行的回调函数
// 第三个参数是一个布尔值
// 如果是true 表示事件捕获 - 从外层向内层传递事件
// 如果是false 表示事件冒泡 - 从内层向外层传递事件
// 一般情况下 我们事件处理的方式都是事件冒泡(默认行为)
// 如果想阻止事件的传播行为可以调用事件对象的stopPropagation方法
#点击子标签会一级一级向上传递事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#d1{
height: 400px;
width: 400px;
background-color: red;
margin: 60px auto;
}
#d2{
height: 300px;
width: 300px;
background-color: blue;
}
#d3{
height: 200px;
width: 200px;
background-color:yellow;
}
#d2,#d3{
position: relative;
left: 50px;
top:50px
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<div id="d3"></div>
</div>
</div>
<script>
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
d1.addEventListener('click',function(){
window.alert('I am d1!')
})
d2.addEventListener('click',function(){
window.alert('I am d2')
})
// 事件回调函数中的第一个参数就是事件对象(封装了和事件相关的信息)
d3.addEventListener('click',function(evt){
window.alert('I am d3')
evt.stopPropagation();
})
</script>
</body>
</html>
5.按钮显示事件
#选中按钮后会产生相应的事件(背景颜色改变)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
div button{
width: 85px;
height: 40px;
background-color: #FF0000;
color: antiquewhite;
outline: none;
border: 0;
margin: 20px;
}
</style>
</head>
<body>
<div id="buttons">
<button ><input type="checkbox"/>狮子</button>
<button ><input type="checkbox"/>老虎</button>
<button ><input type="checkbox"/>老鼠</button>
<button ><input type="checkbox"/>老鹰</button>
<button ><input type="checkbox"/>海豚</button>
<button ><input type="checkbox"/>海马</button>
<button ><input type="checkbox"/>大象</button>
<button ><input type="checkbox"/>猎豹</button>
<button ><input type="checkbox"/>刺猬</button>
<button ><input type="checkbox"/>蚂蚁</button>
</div>
<script>
var buttons = document.querySelectorAll('#buttons>button');
for (var i = 0; i < buttons.length; i += 1){
buttons[i].firstChild.addEventListener('click' , function(evt){
var checkbox = evt.target || evt.srcElement;
if(checkbox.checked){
checkbox.parentNode.style.backgroundColor = 'lightseagreen';
}else{
checkbox.parentNode.style.backgroundColor = 'red';
}
evt.stopPropagation();
});
buttons[i].addEventListener('click', function(evt){
var button = evt.target || evt.srcElement;
var checkbox = button.firstChild;
checkbox.checked = ! checkbox.checked;
if(checkbox.checked){
checkbox.parentNode.style.backgroundColor = 'lightseagreen';
}else{
checkbox.parentNode.style.backgroundColor = 'red';
}
});
}
// window.alert('你选中了' + evt.target.textContent);
/*浏览器兼容性处理
通过事件对象的target属性可以获取事件源(谁引发了事件)
但是有的浏览器是通过srcElement属性获取事件源的
可以通过短路或运算来解决这个兼容性问题
var button = evt.target || evt.srcElement;
window.alert('你选中了' + button.textContent);
*/
/*
当获取到一个元素只会可以通过它的属性来获取他的父元素、子元素和兄弟元素
parentNode - 父元素
firstChild/lastChild/children - 第一个元素/最后一个元素/所有的元素
previousSibling / nextSibiling - 前一个兄弟元素 / 后一个兄弟元素
*/
</script>
</body>
网友评论