html原生js实现99乘法表
2024-10-16 20:02:22
原生的js实现99乘法表实现选择下拉框颜色,改变背景颜色为选中的颜色
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>九九乘法表</title>
<style>
p {
width: 100px;
display: inline-block;
padding: 10px;
margin: 0;
font-size: 20px;
background-color: #FFFFFF;
border-top: 1px solid black;
border-right: 1px solid black;
}
div {
display: block;
}
#zheng99 {
width: auto;
display: inline-block;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#group{
display: block;
margin-top: 20px;
width: 200px;
height: 50px;
font-size: 20px;
}
#bianse{
display: inline-block;
width: 200px;
height: 60px;
margin-top: 20px;
font-size: 20px;
}
</style>
</head> <body>
<h1>9*9乘法表</h1>
<div id="zheng99"></div>
<select id="group">
<option value="red">红色</option>
<option value="yellow">黄色</option>
<option value="green">绿色</option>
</select>
<button onclick="changeColor()" id="bianse">改变颜色</button>
</body>
<script>
window.onload = function() {
for(let i = 1; i <= 9; i++) {
divs = document.getElementById("zheng99").innerHTML += "<div></div>";
for(let j = 1; j <= i; j++) {
document.getElementById("zheng99").getElementsByTagName("div")[i - 1].innerHTML +=
"<p>" + j + " x " + i + " = " + (j * i) + "</p>";
}
}
};
function changeColor() {
let tag = document.getElementsByTagName('p');
let select = document.getElementById('group');
let index = select.selectedIndex;
let group = select.options[index].value;
for (let i = 0;i < tag.length; i++){
tag[i].style.backgroundColor = group;
}
}
</script> </html>
在这段代码中用到的修改i颜色的核心代码是
<select id="selectColor">
<option value="red">红色</option>
<option value="yellow">黄色</option>
<option value="green">绿色</option>
</select>
function changeColor() {
let tag = document.getElementsByTagName('p');
let select = document.getElementById('group');
let index = select.selectedIndex;
let group = select.options[index].value;
for (let i = 0;i < tag.length; i++){
tag[i].style.backgroundColor = group;
}
}
小伙伴们可以自己试试
最新文章
- Unity 好坑的Save Scene
- PHP中curl_init函数用法
- iOS开发之功能模块--推送之坑问题解决
- iOS开发 GET、POST请求方法(NSURLSession篇)
- 编写更好的C#代码
- rpm 更新/升级 软件包(libGL-devel手动安装过程)
- JavaScript DOM高级程序设计 2.4-try{}catch{}--我要坚持到底!
- 关于正则表达式的转义 PHP
- 开心菜鸟学习系列学习笔记------------nodejs util公共函数
- MySQl 存储过程+游标
- iOS自动打包并发布脚本
- nyoj_5:Binary String Matching
- 常用校验码(奇偶校验,海明校验,CRC)学习总结
- Android进阶(二十五)setTextColor()的参数设置方式
- mybatis整合spring获取配置文件信息出错
- Entity Framework 异常: &#39;OFFSET&#39; 附近有语法错误。\r\n在 FETCH 语句中选项 NEXT 的用法无效。
- dotnetcore ueditor
- InetAddress and InetSocketAddress
- Java中的引用传递和值传递
- python unicode