第二阶段 day8
2018-11-07 本文已影响0人
大漠判官1
homework
<!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;
var images = ['slide-1.jpg', 'slide-2.jpg', 'slide-3.jpg', 'slide-4.jpg'];
var index = 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);
}
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>
HOMEWORK2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
margin: 10px 20px;
}
#container li {
float: left;
list-style: none;
width: 60px;
height: 60px;
}
</style>
</head>
<body>
<div id="container">
<img src="img/picture-1.jpg" alt="狗屎">
<ul id="items">
<li><img src="img/thumb-1.jpg" alt=""></li>
<li><img src="img/thumb-2.jpg" alt=""></li>
<li><img src="img/thumb-3.jpg" alt=""></li>
</ul>
</div>
<script>
var img = document.querySelector('#container>img');
var images = document.querySelectorAll('#items img');
for (var i = 0; i < images.length; i += 1) {
// 事件回调函数在for循环的时候并没有执行所以也取不到循环变量i当前的值
// JavaScript是动态弱类型语言可以在运行时动态的添加(或删除)对象的属性
images[i].picture = 'img/picture-' + (i + 1) + '.jpg';
images[i].addEventListener('mouseover', function(evt) {
// var a =evt.target||evt.srcElement
img.src = evt.target.picture;
});
}
</script>
</body>
</html>
动态添加和删除元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
margin: 10px 20px;
}
#container li {
float: left;
list-style: none;
width: 60px;
height: 60px;
}
</style>
</head>
<body>
<div id="container">
<img src="img/picture-1.jpg" alt="狗屎">
<ul id="items">
<li><img src="img/thumb-1.jpg" alt=""></li>
<li><img src="img/thumb-2.jpg" alt=""></li>
<li><img src="img/thumb-3.jpg" alt=""></li>
</ul>
</div>
<script>
var img = document.querySelector('#container>img');
var images = document.querySelectorAll('#items img');
for (var i = 0; i < images.length; i += 1) {
// 事件回调函数在for循环的时候并没有执行所以也取不到循环变量i当前的值
// JavaScript是动态弱类型语言可以在运行时动态的添加(或删除)对象的属性
images[i].picture = 'img/picture-' + (i + 1) + '.jpg';
images[i].addEventListener('mouseover', function(evt) {
// var a =evt.target||evt.srcElement
img.src = evt.target.picture;
});
}
</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/40px 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>
闪烁
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
#container{
width: 800px;
height: 400px;
margin: 20px auto;
overflow: hidden;
border: 1px solid black;
}
#buttons{
width: 800px;
margin: 10px auto;
text-align: center;
}
#fla,#add{
border: none;
outline: none;
width: 80px;
height: 30px;
background-color: red;
color: white;
font-size: 16px;
cursor: pointer;/*鼠标放上去的时候有 手掌*/
}
.small{
width: 80px;
height: 80px;
float: left;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="buttons">
<button id="add">添加</button>
<button id="fla">闪烁</button>
</div>
<script src="js/mylib.js"></script>
<script>
var bigDiv = document.querySelector('#container');
var addButton = document.querySelector('#add');
addButton.addEventListener('click', function() {
var smallDiv = document.createElement('div');
// smallDiv.className = 'small';
smallDiv.style.width = '80px';
smallDiv.style.height = '80px';
smallDiv.style.float = 'left';
smallDiv.style.backgroundColor = randomColor();
bigDiv.insertBefore(smallDiv, bigDiv.firstChild);
});
var flaButton = document.querySelector('#fla');
flaButton.addEventListener('click', function() {
});
</script>
</body>
</html>
