在网页上显示1-9共9个链接,单击每个链接,能够在当前页面显示该数字的平方
时间: 2024-09-26 07:02:30 浏览: 26
要在网页上创建这样的功能,你可以使用HTML来构建链接结构,JavaScript来处理用户的点击事件并显示数字的平方。这里是一个简单的示例:
首先,在HTML部分,为你1到9的数字创建链接,每个链接都有一个唯一的ID关联一个数字:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<title>数字平方展示</title>
</head>
<body>
<a id="link1" href="#">1</a>
<a id="link2" href="#">2</a>
<!-- ...重复以上结构直到... -->
<a id="link9" href="#">9</a>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
```
接下来,在`script.js`文件中编写JavaScript代码,处理点击事件并计算平方:
```javascript
window.onload = function() {
var links = document.querySelectorAll('a'); // 获取所有链接
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) { // 为每个链接添加点击事件处理
e.preventDefault(); // 阻止默认跳转
var num = parseInt(this.id.slice(-1)); // 提取数字
var resultDiv = document.getElementById('result'); // 获取结果区域
resultDiv.textContent = '该数的平方是:' + num * num; // 显示平方值
});
}
};
```
当用户单击任何一个数字链接时,会看到相应的数字平方显示在页面底部的`<div id="result">`元素内。