<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>12.18作业</title>
<script>
$(document).ready(function () {
alert('已经准备好了，开始使用吧！')
})
</script>
<style>
.chi {
width: 960px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background-color: antiquewhite;
}
.chi img {
padding: 35px 38px;
}
.chi p {
text-align: center;
font-size: 30px;
color: springgreen;
}
</style>
</head>
<body>
<div class="chi">
<p>今天停水，出来吃火锅了！看2小家伙多爽！</p>
<img src="d1.jpg" alt="" width="400">
<img src="d2.jpg" alt="" width="400">
<button>图片背景变色 按钮1</button>
<button>图片背景变色 按钮2</button>
<button>背景色为天空蓝3</button>
<button>背景色为浅灰色4</button>
</div>
<script>
var btn = document.getElementsByTagName('button')[0]
btn.onclick = function () {
document.querySelector('img').style.backgroundColor = 'yellow'
}
var btn = document.getElementsByTagName('button')[2]
btn.onclick = function () {
document.querySelector('body').style.backgroundColor = 'skyblue'
}
var btn = document.getElementsByTagName('button')[3]
btn.onclick = function () {
document.querySelector('body').style.backgroundColor = 'darkgrey'
}
</script>
<script>
var btn = document.getElementsByTagName('button')[1]
btn.onclick = function () {
var img = document.querySelectorAll('img')
for (var i = 0; i < img.length; i++) {
img[i].style.backgroundColor = 'red'
}
}
</script>
<script>
$('img').click(function () {
$('p',document).css('color', 'red')
})
$('img').mouseenter(function () {
$(this).hide(3000)
}).mouseleave(function () {
$(this).show(3000)
})
</script>
</body>
</html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
