js图文广告
2018-11-06 本文已影响0人
刘xin_8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>延迟跳转</title>
</head>
<body>
<h3><span id="counter">5</span>秒钟以后自动跳转到百度</h3>
<script>
var countDown = 5;
var span = document.getElementById('counter');
window.setTimeout(function() {
countDown -= 1;
if (countDown == 0) {
// window对象的location属性代表浏览器地址栏
window.location.href = 'https://www.baidu.com';
} else {
span.textContent = countDown;
// arguments是函数中的隐含对象
// 通过arguments[0]、arguments[1]可以获得函数的参数
// 通过arguments.callee可以获得正在被调用的函数
window.setTimeout(arguments.callee, 1000);
}
}, 1000);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#adv {
width: 705px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="adv">
<img src="img/slide-1.jpg" alt="" width="705">
</div>
<script>
var index = 0;
var images = ['slide-1.jpg', 'slide-2.jpg', 'slide-3.jpg', 'slide-4.jpg']
/通过document对象获取页面元素的常用方法有5个:
/ document.getElementById('...') ==> 通过ID获取单个元素
/document.getElementsByTagName('...') ==> 通过标签名获取元素的列表
/ document.getElementsByClassName('...') ==> 通过类名获取元素的列表
/ document.querySelector('...') ==> 通过样式表选择器获取单个元素
/ document.querySelectorAll('...') ==> 通过样式表选择器获取元素的列表
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#one {
width: 400px;
height: 400px;
background-color: indianred;
margin: 60px auto;
}
#two {
width: 300px;
height: 300px;
background-color: darkseagreen;
}
#three {
width: 200px;
height: 200px;
background-color: lightsteelblue;
}
#two, #three {
position: relative;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="one">
<div id="two">
<div id="three"></div>
</div>
</div>
<script>
var one = document.querySelector('#one');
var two = document.querySelector('#two');
var three = document.querySelector('#three');
/ addEventListener方法的第一个参数是事件名
/ 第二个参数是事件发生时需要执行的回调函数
/ 第三个参数是一个布尔值
/ 如果是true表示事件捕获 - 从外层向内层传递事件
/ 如果是false表示事件冒泡 - 从内存向外层传递事件
/ 一般情况下事件处理的方式都是事件冒泡（默认行为）
/ 如果想阻止事件的传播行为可以调用事件对象的stopPropagation方法
one.addEventListener('click', function() {
window.alert('I am one!');
});
two.addEventListener('click', function() {
window.alert('I am two!');
});
// 事件回调函数中的第一个参数是事件对象（封装了和事件相关的信息）
three.addEventListener('click', function(evt) {
window.alert('I am three!');
evt.stopPropagation();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#buttons>button {
border: none;
outline: none;
width: 120px;
height: 40px;
font: 22px/30px Arial;
background-color: red;
color: white;
}
</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>
</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) {
/ 通过事件对象的target属性可以获取事件源（谁引发了事件）
/ 但是有的浏览器是通过srcElement属性获取事件源的
/ 可以通过短路或运算来解决这个兼容性问题
var button = evt.target || evt.srcElement;
/ 当获取到一个元素之后可以通过它的属性来获取它的父元素、子元素以及兄弟元素
/ parentNode - 父元素
/ firstChild / lastChild / children - 第一个子元素 / 最后一个子元素 / 所有子元素
/ previousSibling / nextSibling - 前一个兄弟元素 / 后一个兄弟元素
var checkbox = button.firstChild;
checkbox.checked = !checkbox.checked;
if (checkbox.checked) {
button.style.backgroundColor = 'lightseagreen';
} else {
button.style.backgroundColor = 'red';
}
});
}
</script>
</body>
</html>
