4.作业--Jquery,JS

目录

作业题目: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遍
  • 有错误请指出,作者会及时改正

上一篇:Linux中六种常见工具


下一篇:云计算监控减少网络安全事件的五种方法