用原生js实现一个页面乘法口诀表

最新推荐文章于 2022-07-25 12:52:00 发布

会做饭的技术男

最新推荐文章于 2022-07-25 12:52:00 发布

阅读量269

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h2h2i12aibab.html

版权

前端专栏收录该内容

2508 篇文章 12 订阅

订阅专栏

今天我自己用js实现了一个页面乘法口诀表（如图），在控制台中输入哦！

来共享给大家，做的不是很好，如果大家有新的想法可以跟我交流哦。

代码如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
for(var r=0;r<=9;r++){
for(var i=1,str="";i<=r;i++){
str+=i+"x"+r+"="+i*r+" ";
}
console.log(str);
}
var tab = document.createElement('TABLE');
tab.style.border = '1px solid black';
tab.style.borderCollapse='collapse';
for(var i = 1; i <=9 ; i++){
var tr = document.createElement('TR');
tab.appendChild(tr);
for(var j = 1,str=""; j<=i ; j++){
str=j+"x"+i+"="+i*j+" ";
var td = document.createElement('TD');
td.style.border = '1px solid black';
td.style.height = '20px';
td.innerHTML=str;
tr.appendChild(td);
}
}
document.body.appendChild(tab);

</script> 
</body>
</html>

会做饭的技术男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用原生js实现一个页面乘法口诀表

今天我自己用js实现了一个页面乘法口诀表（如图），在控制台中输入哦！来共享给大家，做的不是很好，如果大家有新的想法可以跟我交流哦。代码如下：<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><script>for(var r=0;r&lt
复制链接

扫一扫