他有一个两个数比大小的游戏,做一个关于检测两个数的大小,并自动使用鼠标划出大于号或者小于号的脚本吗
时间: 2024-10-10 20:06:31 浏览: 16
当然可以。为了创建这样一个简单的脚本,你可以使用JavaScript编写网页应用程序,比如HTML和JavaScript结合起来。以下是一个基础示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>比较数字</title>
<style>
.result {
font-size: 40px;
margin-top: 20px;
}
</style>
</head>
<body>
<input type="number" id="num1" placeholder="Number 1">
<input type="number" id="num2" placeholder="Number 2">
<button onclick="compareNumbers()">Compare</button>
<div class="result" id="result"></div>
<script>
function compareNumbers() {
const num1 = document.getElementById('num1').value;
const num2 = document.getElementById('num1').value; //这里假设两个输入框是一样的,如果需要区分,应改为 'num2.value'
if (num1 > num2) {
document.getElementById('result').innerText = ` ${num1} > ${num2}`;
document.getElementById('result').classList.add('greater');
} else if (num1 < num2) {
document.getElementById('result').innerText = ` ${num1} < ${num2}`;
document.getElementById('result').classList.add('less');
} else {
document.getElementById('result').innerText = ` ${num1} == ${num2}`;
document.getElementById('result').classList.add('equal');
}
// 使用CSS样式添加动态线条
const resultElement = document.getElementById('result');
if (resultElement.classList.contains('greater')) {
drawLine(resultElement, '>');
} else if (resultElement.classList.contains('less')) {
drawLine(resultElement, '<');
} else if (resultElement.classList.contains('equal')) {
drawLine(resultElement, '=');
}
function drawLine(element, sign) {
const lineHeight = element.offsetHeight;
element.style.position = 'relative';
element.style.top = `${lineHeight / 2}px`;
const line = document.createElement('span');
line.className = 'line';
line.textContent = sign;
element.appendChild(line);
line.style.left = `${element.innerText.length * 15}px`; // 根据数字长度调整线条位置
line.style.width = `${lineHeight - 5}px`; // 线条宽度
line.style.lineHeight = '1px';
line.style.borderTop = '1px solid black';
}
}
</script>
<style>
.line {
position: absolute;
pointer-events: none;
}
</style>
</body>
</html>
```
这个例子中,用户可以在两个输入框中输入数字,点击按钮后会比较这两个数并显示结果,同时在结果下方画出相应的比较符号。
阅读全文