web将数组【1,2,3,4,5,6,7,8,9,10】用列表形式显示出来,单击“求和按钮”,将求和结果,显示在p元素里面,p元素背景颜色为lightblue。
时间: 2024-05-05 19:18:06 浏览: 18
好的,您可以使用以下代码实现您的要求:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>数组求和</title>
</head>
<body>
<ol id="myList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ol>
<button onclick="sumList()">求和</button>
<p id="result"></p>
</body>
</html>
```
JavaScript代码:
```javascript
function sumList() {
// 获取ol元素
var myList = document.getElementById("myList");
// 获取所有li元素
var listItems = myList.getElementsByTagName("li");
// 定义变量,用于累加数组中的所有数字
var sum = 0;
// 循环遍历所有li元素,将数字累加起来
for (var i = 0; i < listItems.length; i++) {
sum += parseInt(listItems[i].innerHTML);
}
// 获取p元素
var result = document.getElementById("result");
// 将累加结果显示在p元素中
result.innerHTML = "数组的和为:" + sum;
// 设置p元素背景颜色为lightblue
result.style.backgroundColor = "lightblue";
}
```
请注意,以上代码中使用了 HTML 和 JavaScript 语言,需要将它们保存为 .html 和 .js 文件,并在浏览器中打开 HTML 文件才能正常运行。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)