打印乘法表

今天看到老师在群里戏谑地发了如下动态:

笑完之后,决定手动实现一番。主要是用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>

最终实现的大概如下所示: