用javascript实现两个数字之间:能被7整除的数为红色、不能被7整除的数为绿色
时间: 2023-11-11 19:07:57 浏览: 38
以下是使用JavaScript实现的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Color Numbers</title>
<style>
.red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<button onclick="colorNumbers()">Color Numbers</button>
<div id="numbers"></div>
<script>
function colorNumbers() {
var numbersDiv = document.getElementById("numbers");
numbersDiv.innerHTML = "";
for (var i = 1; i <= 100; i++) {
if (i % 7 === 0) {
numbersDiv.innerHTML += "<span class='red'>" + i + "</span> ";
} else {
numbersDiv.innerHTML += "<span class='green'>" + i + "</span> ";
}
}
}
</script>
</body>
</html>
```
这里我们使用了一个按钮来触发`colorNumbers()`函数,该函数会遍历1到100之间的数字,如果能被7整除则将其包裹在红色`<span>`标签内,否则将其包裹在绿色`<span>`标签内,并将其添加到页面上的`<div>`元素中。最终结果是,能被7整除的数字将会以红色显示,不能被7整除的数字将会以绿色显示。
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)