在界面上显示1~9共9个链接,单击每个链接,能够在 同一个页面中打印该数字的平方
时间: 2024-10-06 18:04:28 浏览: 18
在网页设计中,为了实现在一个页面上点击链接显示相应数字的平方效果,你可以采用HTML、CSS和JavaScript相结合的方式来创建这个功能。以下是简单的步骤:
1. HTML部分:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<title>数字平方计算器</title>
<style>
.number-link {
display: inline-block;
margin-right: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="result"></div>
<div class="number-links">
<a href="#" onclick="displaySquare(1)">1</a>
<a href="#" onclick="displaySquare(2)">2</a>
<a href="#" onclick="displaySquare(3)">3</a>
<a href="#" onclick="displaySquare(4)">4</a>
<a href="#" onclick="displaySquare(5)">5</a>
<a href="#" onclick="displaySquare(6)">6</a>
<a href="#" onclick="displaySquare(7)">7</a>
<a href="#" onclick="displaySquare(8)">8</a>
<a href="#" onclick="displaySquare(9)">9</a>
</div>
<script src="script.js"></script>
</body>
</html>
```
2. JavaScript部分 (script.js):
```javascript
function displaySquare(num) {
document.getElementById("result").textContent = "数字 " + num + " 的平方是:" + num * num;
}
```
在这个例子中,当用户点击任意一个数字链接时,`displaySquare`函数会被调用,传入的数字会计算其平方,并将结果显示在id为"result"的元素中。