<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业4.2</title>
<style>
body {
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right, #5f9cff, #15367d);
transition: background 0.5s ease;
}
</style>
</head>
<body>
<script>
var gradientDirection = 'to right';
document.body.addEventListener('click', function() {
gradientDirection = (gradientDirection === 'to right') ? 'to left' : 'to right';
document.body.style.background = 'linear-gradient(' + gradientDirection + ', #5f9cff, #15367d)';
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业4.1</title>
<script src="../03JS/jq/"></script>
<head>
<script>
$(document).ready(function(){
$('#change-color-image').click(function(){
// 改变图片颜色
$(this).css('filter', 'hue-rotate(120deg)');
});
});
</script>
</head>
<body>
<img id="change-color-image" src="../02css/2.3css样式/image.png" alt="Image">
</body>
</html>