【JavaScript】打印乘法表

最新推荐文章于 2024-07-11 20:52:38 发布

等时钟成长

最新推荐文章于 2024-07-11 20:52:38 发布

阅读量363

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：打印乘法表

本文链接：https://blog.youkuaiyun.com/pangji0417/article/details/94554417

JavaScript 专栏收录该内容

83 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态创建HTML元素的方法，以生成一个乘法表。通过嵌套循环和模板字符串，实现了从1到10的乘法表，并应用了基本的样式使其更易于阅读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打印乘法表

今天看到老师在群里戏谑地发了如下动态：
打印乘法表

笑完之后，决定手动实现一番。主要是用JavaScript动态拼接模板字符串，最后再渲染成HTML。

		<!-- javascript -->
		<script>
			var depth = 10;
			var str = "";
			function row(content) {
				return `<div class='row'>${content}</div>`;
			}
			function cell(content) {
				return `<div class='cell'>${content}</div>`;
			}
			function multiplyify(x, y) {
				return `${x}x${y}=${x * y}`;
			}
			for (let i = 1; i < depth; i++) {
				let cellStr = "";
				for (let j = 1; j <= i; j++) {
					cellStr += cell(multiplyify(i, j));
				}
				str += row(cellStr);
			}
			document.write(str);
		</script>
		<!-- 样式 -->
		<style>
			.row {
				display: block;
				text-align: center;
			}

			.cell {
				margin: 0;
				margin-right: -1px;
				display: inline;
				border: 1px grey solid;
				padding: 5px;
				line-height: 2em;
			}
		</style>