java-js-通过javascript实现九九乘法表

最新推荐文章于 2021-08-31 18:40:35 发布

刺伟

最新推荐文章于 2021-08-31 18:40:35 发布

阅读量398

点赞数

分类专栏： java-js 文章标签： javascript

本文链接：https://blog.csdn.net/tuyanyi7356/article/details/78348190

版权

java-js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

通过js实现九九乘法表，
要想实现九九乘法表，使用循环既可以实现九九乘法表
首先在一个div里需要9行，而每一行分别为一到九
即：第一行一个span
第二行两个span
第三行三个span
....
第九行九个span

所以 var html = '';
for (var i = 1; i <= 9; i++) {
html+= '<p>'
for (var j = 1; j <= i; j++) {
html+= '<span>'+j+'x'+i+'='+(i*j)+'</span>';
};
html+='</p>';
};
最后获取到box，把以上的内容写入box，即：
document.getElementById("box").innerHTML = html;
通过以上即可完成九九乘法表；
源码如下：

<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8" />
<title>templet</title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" href="" />
<link rel="shortcut icon" type="image/x-icon" href="" />

<style type="text/css">
*{margin:0;padding:0;}
span{padding: 5px 8px;display: inline-block;margin: 3px;background: #111;color: #fff;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var html = '';
for (var i = 1; i <= 9; i++) {
html+= '<p>'
for (var j = 1; j <= i; j++) {
html+= '<span>'+j+'x'+i+'='+(i*j)+'</span>';
};
html+='</p>';
};
document.getElementById("box").innerHTML = html;

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