4.作业--Jquery，JS

news2024/9/23 15:27:32

作业题目：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>