第二阶段 day7
2018-11-06 本文已影响0人
大漠判官1
延迟跳转
<div><span id="count">5</span>秒后跳转到百度</div>
<script>
var countDown = 5;
var span = document.getElementById('count')
window.setTimeout(function(){
countDown -=1;
if(countDown == 0){
window.location.href='http://www.baidu.com';
}else{
span.textContent=countDown
window.setTimeout(arguments.callee,1000)
}
},1000);
</script>
广告轮番播放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#adv{
margin: 100px 150px;
}
#adv ul {
width: 120px;
height: 30px;
margin: 0 auto;
position: relative;
top: -30px;
}
#adv li {
width: 30px;
height: 30px;
list-style: none;
float: left;
color: #ccc;
cursor: pointer;
}
#adv li:first-child {
color: lightseagreen;
}
</style>
</head>
<body>
<div id="adv">
<img src="img/slide-1.jpg" alt="" width="705">
<ul>
<li class="dot">●</li>
<li class="dot">●</li>
<li class="dot">●</li>
<li class="dot">●</li>
</ul>
</div>
<script>
var index = 0;
// var img = document.getElementsByTagName('img')[0]; /*拿到一堆标签，取第一个原素*/
var img = document.querySelector('img');
// 通过document对像获取页面原素的常用方法5个:
// document.getElementById('...')===>通过ID获取单个原素
// document.getElementsByTagName('....')===>通过标签名获取标签的列表
// document.getElementsByClassName('...')===>通过类名获取标签的列表
// document.querySelector('...')===>通过样式表选择器获取单个原素
// document.querySelectorAll('...')===>通过样式表选择器获取原素的列表
var images=['slide-1.jpg','slide-2.jpg','slide-3.jpg','slide-4.jpg',]
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>
事件冒泡和事件捕获
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
#d1{
height: 400px;
width: 400px;
background-color: red;
margin: 100px auto;
}
#d2{
height: 300px;
width: 300px;
background-color: green;
}
#d3{
height: 200px;
width: 200px;
background-color: blue;
}
#d2,#d3{
position: relative;
left: 50px;
top:50px
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<div id="d3">
</div>
</div>
</div>
</body>
<script>
var one = document.querySelector('#d1');
var two= document.querySelector('#d2');
var three = document.querySelector('#d3');
// addEvenlistenner方法的第一个参数是事件名
// 第二个参数是事件发生时需要执行的毁掉函数
// 第三个参数是一个布尔值
// 如果是true 表示事件捕获
// 如果是false 表示事件冒泡
// 一般情况事件处理方式都是事件冒泡(默认行为)
// 如果想阻止事件的传播行为,可以调用事件对象的stopPropagation
one.addEventListener('click',function(){
window.alert(' I an one!');
},true)
two.addEventListener('click',function(){
window.alert(' I an two!');
},true)
// 事件回调函数中的第一个参数是事件对象(封装了和事件相关的信息)
three.addEventListener('click',function(evt){
window.alert(' I an three!');
evt.stopPropagation();
},true) //事件冒泡
</script>
</html>
获取事件源和访问相关元素
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
button{
height: 70px;
width: 70px;
background-color: red;
margin-left: 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();
// });
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 ='blue';
}else{
checkbox.parentNode.style.backgroundColor ='red';
}
evt.stopPropagation();
}
);
// 通过事件对象的target属性可以获取事件源
// 但是有的浏览器是通过srcElement属性事件获取事件源的
// 可以通过短路或运算来解决兼容性问题
buttons[i].addEventListener('click',function(evt){
var button =evt.target||evt.srcElement;
// window.alert('你选中了' + button.textContent);
// 当获取的一个元素之后可以通过他的属性来获取他的父节点,子节点以及兄弟节点
// parentNode--父元素
// frirstChild/lastChild/chilen---第一个子元素/最后一个子元素/所有的子元素
// previousSibling/nextSibling ---前一个兄弟元素/后一个兄弟元素
var checkbox = button.firstChild;
checkbox.checked =!checkbox.checked;
if(checkbox.checked){
button.style.backgroundColor ='blue';
}else{
button.style.backgroundColor ='red';
}
});
}
</script>
</body>
</html>
