一、图片延时变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片延时变化</title>
</head>
<body>
<div id="adv" >
<img src="img/归档/picture-1.jpg"/>
</div>
<script type="text/javascript">
var imgs = ['picture-1.jpg','picture-2.jpg','picture-3.jpg','slide-1.jpg']
var index =0
//通过document对象获取页面元素（标签）的常用方法有5个；
//1、document.getElementById('...')——》通过ID获取单个元素；
//2.document.getElementsByTagName('...')——>通过标签名获取标签的列表;后面跟[x]可获取列表中下标对应的单个元素;
//3.document.getElementsByClassName('...')——>通过类名获取标签的列表;
//4.document.querySelector('...')——>通过样式表选择器获取单个元素;括号里可以是标签名、类名、ID；
//5.document.querySelectorAll('...')——>通过样式表选择器获取元素的列表;括号里可以是标签名、类名、ID；
var img =document.getElementsByTagName('img')[0]
var timerId
var div =document.querySelector('#adv')
//事件回调方法,好过在标签里设置onmouseover属性
div.addEventListener('mouseover',stopIt)
div.addEventListener('mouseout',startIt)
startIt()
function startIt() {
timerId=window.setInterval(function(){
index += 1
index %= imgs.length
img.src='img/归档/'+imgs[index]
},2000)
}
function stopIt() {
window.clearInterval(timerId)
}
</script>
</body>
</html>
二、延时跳转百度首页
<!--window.Location.reload
window.History
window.Navigator
window.Screen
window对象 ——》http://www.runoob.com/jsref/obj-window.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>延时跳转百度首页</title>
</head>
<body>
<h6>延时<span id="counter">5</span>秒跳转到百度首页</h6>
<script type="text/javascript">
var span=document.getElementById("counter")
var countDown=5
/*
function delayGo(){
countDown-=1
if (countDown==0){
// window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
window.location.href='https://www.baidu.com'
}else{
span.innerHTML=countDown
window.setTimeout(delayGo,1000)
}
}
window.setTimeout(delayGo,1000)
*/
window.setTimeout(function(){
countDown-=1
if (countDown==0){
//window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
//location.href 属性返回当前页面的 URL。
window.location.href='https://www.baidu.com'
}else{
span.innerHTML=countDown
//arguments是函数中的隐含对象
//arguments.callee代表正在被调用的函数
//通过arguments[0]、arguments[1]可以获得函数的参数
window.setTimeout(arguments.callee,1000)
}
},1000)
</script>
</body>
</html>
三、绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绑定事件</title>
</head>
<body>
<button id="ok">确定</button>
<script type="text/javascript">
var okButton = document.querySelector('#ok')
function sayHello(){
window.alert('Hello World!')
removeEventListener('click',arguments.callee)
}
//当你知道事件发生时要做什么，但你不知道什么时候发生
//这种情况下通常处理的方式都是绑定一个事件回调函数（callback）
//closeWindow以及下面的匿名函数都属于事件发生时才执行的回调函数
okButton.addEventListener('click',sayHello)
okButton.addEventListener('click',function (){
if (window.confirm('Close the window?')){
window.close()
}
})
</script>
</body>
</html>
四、事件回调
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件回调</title>
<style type="text/css">
#d1{width: 400px;
height: 400px;
background-color:red ;
margin: 0 auto;
}
#d2{
width: 300px;
height: 300px;
background-color: green;
margin: 50px;
}
#d3{
width: 200px;
height: 200px;
background-color: blue;
margin: 50px;
}
div{
position: relative;
top: 50px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<div id="d3">
</div>
</div>
</div>
<script type="text/javascript">
var one=document.querySelector('#d1')
var two=document.querySelector('#d2')
var three=document.querySelector('#d3')
//addEventListener('a',b,true/flase)方法的第一个参数a是事件名;
//第二个参数b是事件发生是需要执行的回调函数;
//第三个参数是一个布尔值,如果是true,表示事件捕获——>从外层向内层传递事件
//如果是flase,表示事件冒泡——>从内层向外层传递事件
//一般情况下事件处理的方式都是事件冒泡,默认值为flase;
//如果想阻止事件的传播行为,可以调用事件对象的stopPropagation方法
one.addEventListener('click',function(){
window.alert('I\'m One!')
},true)
two.addEventListener('click',function(){
window.alert('I\'m Two!')
},true)
//事件回调函数中的第一个参数是事件对象(封装了和事件相关的信息)
three.addEventListener('click',function(evt){
window.alert('I\'m Three!')
evt.stopPropagation() //阻止事件捕获
},true) //true代表 事件捕获
document.body.addEventListener('click',function(evt){
window.alert('I\'m body!')
evt.stopPropagation()
},true)
</script>
</body>
</html>
五、事件回调练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件回调练习</title>
</head>
<body>
<div id="">
<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
</div>
<script type="text/javascript">
var b=document.querySelectorAll('div>button')
for (i=0;i<b.length;i+=1){
b[i].addEventListener('click',function(evt){
//通过事件对象的target属性可以获取事件源(谁引发的事件)
//但是有的浏览器是通过srcElement属性获取的事件源
//可以通过短路或运算来解决这个兼容性问题
var a=evt.target || evt.srcElement
//当获取到一个元素之后,可以通过他的属性来获取他的父元素,子元素以及兄弟元素
//parentNode-父元素
//firstChild/lastChild/children-第一个子元素/最后一个子元素/所有子元素
//previousSibling/nextSibling-前一个兄弟元素/后一个兄弟元素
window.alert('你选中了'+a.innerHTML)
})
}
</script>
</body>
</html>
六、淘宝页面图片跳动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝页面图片跳动效果</title>
<style>
* {
margin: 0;
padding: 0;
}
#adv {
width: 940px;
margin: 0 auto;
}
#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="">
<ul>
<li class="dot">●</li>
<li class="dot">●</li>
<li class="dot">●</li>
<li class="dot">●</li>
</ul>
</div>
<script>
var img = document.querySelector('#adv>img');
var items = document.querySelectorAll('#adv li');
var timerId = 0;
for (var i = 0; i < items.length; i += 1) {
items[i].index = i;
items[i].addEventListener('mouseover', function(evt) {
index = evt.target.index;
changeItemsColor(index);
img.src = 'img/' + images[index];
if (timerId != 0) {
window.clearInterval(timerId);
timerId = 0;
}
});
items[i].addEventListener('mouseout', startIt);
}
var images = ['slide-1.jpg', 'slide-2.jpg', 'slide-3.jpg', 'slide-4.jpg'];
var index = 0;
startIt();
function startIt() {
if (timerId == 0) {
timerId = window.setInterval(function() {
index += 1;
index %= images.length;
changeItemsColor(index);
img.src = 'img/' + images[index];
}, 2000);
}
}
function changeItemsColor(index) {
for (var i = 0; i < items.length; i += 1) {
items[i].style.color = '#ccc';
}
items[index].style.color = 'lightseagreen';
}
</script>
</body>
</html>
网友评论