DOM的操作
2017-07-16 本文已影响5人
阿凡提说AI
1.来回切换图片
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<p></p>
<button class="pre" onclick="pre();">上一张</button>
<button class="next" onclick="next();">下一张</button>
<!--<script src="js/index.js"></script>-->
<script type="text/javascript">
// 拿到所有的标签
var icon = document.getElementsByClassName('icon')[0];
var maxImgCount = 9;
var minImgCount = 1;
var currentImg = minImgCount;
// 点击上一张
function pre(){
if(currentImg == minImgCount){
currentImg = maxImgCount;
}else{
currentImg = currentImg - 1;
}
icon.src = "image/icon_0" + currentImg + ".png"
}
// 点击下一张
function next(){
if(currentImg == maxImgCount){
currentImg = minImgCount;
}else{
currentImg = currentImg + 1;
}
icon.src = "image/icon_0" + currentImg + ".png"
}
</script>
</body>
</html>
2.倒计时
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
img{
margin: 50px;
display: none;
}
.time{
margin: 50px;
font-size: 200px;
color: red;
}
</style>
</head>
<body>
<div class="time">5</div>
<script type="text/javascript">
// 拿到对应的标签
var img = document.getElementsByName('icon')[0];
var div = document.getElementsByClassName('time')[0];
// 计时器
var timer = setInterval(function(){
div.innerHTML = div.innerHTML -1;
// 判断
if(div.innerHTML == '0'){
// 清除计时器
clearInterval(timer);
// 隐藏div
div.style.display = 'none';
// 显示图片
img.style.display = 'inline-block';
}
}, 1000);
</script>
</body>
</html>
3.js的事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
background-color: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>111</div>
<script type="text/javascript">
window.onload = function(){
alert('加载完毕');
}
// window.onunload = function(){
// alert('退出');
// }
var div = document.getElementsByTagName('div')[0];
// 点击鼠标
div.onmousedown = function(){
div.style.background = 'green';
}
// 抬起鼠标
div.onmouseup = function(){
div.style.backgroundImage = 'url("image/img_03.jpg")';
}
</script>
</body>
</html>
