目录
作业题目：1.使用Jquery完成点击图片变换图片颜色
A图
B代码
HTML的部分
JQ的部分
作业题目：2.使用JS中的DOM操作完成背景颜色渐变方向变换。点击背景，渐变方向发生改变。
A图
B代码
学习产出：
作业题目：1.使用Jquery完成点击图片变换图片颜色
A图
B代码
HTML的部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击图片变换图片颜色</title>
<style>
.background-color {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="background-color" id="background" style="background-color: #f0f0f0;"></div>
<img src="D:\桌面\web\code\图片\image.jpg" id="toggleButton" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px;">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="点击图片变换图片颜色.js"></script>
</body>
</html>JQ的部分
$(document).ready(function() {
$('#toggleButton').on('click', function() {
var currentColor = $('#background').css('background-color');
if (currentColor === 'rgb(240, 240, 240)') {
$('#background').css('background-color', 'blue'); // 切换为蓝色背景
} else {
$('#background').css('background-color', '#f0f0f0'); // 切换回原始背景色
}
});
});作业题目：2.使用JS中的DOM操作完成背景颜色渐变方向变换。点击背景，渐变方向发生改变。
A图
B代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击背景颜色渐变方向变换</title>
<style>
body, html {
height: 100%;
margin: 0;
background: linear-gradient(to right, rgb(255, 255, 255), blue);
transition: background-size 1s;
}
</style>
</head>
<body>
<script>
document.body.addEventListener('click', function() {
this.style.background = 'linear-gradient(to top, rgb(255, 255, 255), blue)';
});
</script>
</body>
</html>学习产出：
3.作业--静态页面
3.作业--静态页面-****博客
2.作业2
2.作业2-****博客
1.html的作业
html的作业-****博客
- 技术笔记 1遍
- 有错误请指出，作者会及时改正
