页面居中有一个圆，圆中间有数字（初值为0），鼠标移动到圆上，圆的底部会显示“版...

黑脸艺术家 · 发表于 2023-12-27 17:01:55

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

页面居中有一个圆，圆中间有数字（初值为0），鼠标移动到圆上，圆的底部会显示“版权所有：xxx”字样，圆的背景色初始为绿色；单击圆时，数字会递增，并且背景色会改变。
帮我看看哪里错误，不要机器人谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程题</title>
</head>
<style>
body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #ffffff;
}

.yuan-container {
      position: relative;
      width: 200px;
      height: 200px;
}

.yuan {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background-color: green;
      transform: translate(-50%, -50%);
}

.number {
      position: absolute;
      top: 50%;
      left: 50%;
      width: fit-content;
      transform: translate(-50%, -50%);
      color: black;
}
</style>
<body>
<div class="yuan-container">
<div class="yuan" id="yuan">
<div class="number" id="number">0</div>
</div>
</div>
<div class="word">版权所有：xxx</div>
<script src="1227.js"></script>
<script>
let count = 0; // 数字递增的计数器。
const yuan = document.getElementById('yuan');
const number = document.getElementById('number');
const word = document.querySelector('.word');
const yuanWidth = yuan.offsetWidth;
const yuanHeight = yuan.offsetHeight;
const yuanRadius = Math.floor(Math.min(yuanWidth, yuanHeight) / 2);
const yuanCenterX = yuan.getBoundingClientRect().left + yuanWidth / 2;
const yuanCenterY = yuan.getBoundingClientRect().top + yuanHeight / 2;
const minDistanceToShowFooter = yuanRadius / 2;
const maxDistanceToShowFooter = yuanRadius * 2;
let currentDistance = 0;
let currentBackgroundColor = 'green';
</script>
</body>

</html>

FishC · 发表于 2023-12-27 17:04:15

你好，我看到你的代码有一些错误。首先，你的HTML中没有给圆和文字设置id属性，导致在JavaScript中无法使用getElementById获取元素。你可以给圆添加id属性并将其设为"yuan"，给数字添加id属性并将其设为"number"。另外，在JavaScript部分，你引用了一个类名为"word"的元素，但是在HTML中并没有这个类名。所以，我会对你的代码进行一些修改：

<!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 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #ffffff;
}
.yuan-container {
position: relative;
width: 200px;
height: 200px;
}
.yuan {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: green;
transform: translate(-50%, -50%);
}
.number {
position: absolute;
top: 50%;
left: 50%;
width: fit-content;
transform: translate(-50%, -50%);
color: black;
}
</style>
</head>
<body>
<div class="yuan-container">
<div id="yuan" class="yuan"></div>
<div id="number" class="number">0</div>
</div>
<div>版权所有：xxx</div>
<script>
let count = 0; // 数字递增的计数器。
const yuan = document.getElementById('yuan');
const number = document.getElementById('number');
const footer = document.querySelector('div:last-child'); // 获取最后一个div元素
yuan.addEventListener('click', function () {
count++;
number.textContent = count;
if (count % 2 === 0) {
yuan.style.backgroundColor = 'green';
} else {
yuan.style.backgroundColor = 'red';
}
});
yuan.addEventListener('mousemove', function (event) {
const mouseX = event.clientX;
const mouseY = event.clientY;
const distanceX = Math.abs(mouseX - yuanCenterX);
const distanceY = Math.abs(mouseY - yuanCenterY);
const distance = Math.sqrt(distanceX ** 2 + distanceY ** 2);
if (distance >= minDistanceToShowFooter && distance <= maxDistanceToShowFooter) {
footer.style.display = 'block';
} else {
footer.style.display = 'none';
}
});
</script>
</body>
</html>

复制代码

在这个修改后的代码中，我给圆和数字添加了id属性，并在JavaScript中通过getElementById获取了相应的元素。同时，我修复了当点击圆时，数字递增和背景色变化的问题。另外，我通过选择器querySelector选择了页面中最后一个div元素作为底部版权信息。在鼠标移动事件监听中，我通过鼠标位置与圆心的距离计算来判断是否显示底部版权信息。希望这次修改可以满足你的需求。如果还有其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

不二如是 · 发表于 2023-12-27 19:03:12

CSS调整：添加对.word的样式，并确保它只有在鼠标悬停在圆上时才显示。

JavaScript功能实现：添加事件监听器来处理鼠标悬停和点击事件，并实现相应的功能。

这是一些调整后的代码示例：

CSS调整（添加到<style>标签中）:

.word {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: none;
color: black;
}
.yuan:hover + .word {
display: block;
}

复制代码

JS 代码：

yuan.addEventListener('click', function() {
count++; // 递增计数器
number.textContent = count; // 更新数字显示
changeBackgroundColor(); // 改变背景颜色
});
function changeBackgroundColor() {
const colors = ['green', 'blue', 'red', 'yellow', 'purple'];
currentBackgroundColor = colors[count % colors.length];
yuan.style.backgroundColor = currentBackgroundColor;
}

复制代码

账号		自动登录	找回密码
密码			立即注册