js打印内容没有样式_JavaScript实验之打印九九乘法表

2023-04-06 22:37:42

实验要求：

1、使用JavaScript计时器打印出九九乘法表；

2、网页中有一个按钮，点击之后开始输出九九乘法表；

3、所有九九乘法表输出到一个table中；

4、表格的边框需要使用CSS进行合并；

5、在所有式子输出完毕之后，将表格中的单元格背景改为红色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>九九乘法表</title>
		<script type="text/javascript">
			var i=1,
				j=1;
 
			function show(){
				i == 1&&document.write("<table style='border: 1px solid green; border-collapse: collapse ;'>");
				j == 1&&document.write("<tr>");
				document.write("<td style='border: 1px solid; '>"+i+"*"+j+"="+i*j+"</td>");
				if(i==j){
					document.write("</tr>");
					i++;
					j=1;
				}else{
					j++;
				}
				if(i==10){ /* 当i为10时，不再添加单元格 */
					document.write("</table>");
					document.write("<style>td{background-color: red;}></style>");
					clearInterval(timer); /*清除计时器*/
				}
			}
 
		</script>
	</head>
	<body>
		<div id="content">
			<button id="btn">显示九九乘法表</button>
		</div>
	</body>
	<script>
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			timer = setInterval(show, 100);
		}
	</script>
</html>

参考技术：

向网页输出内容document.write()，包括文本的输出、HTML的输出、CSS内部样式和外部样式的输出；
JS计时器的设置setTimeOut()或setInterval()
JS计时器的清除clearTimeOut()或clearInterval()

原文出自个人博客：

JavaScript实验之打印九九乘法表laiczhang.com

js打印内容没有样式_JavaScript实验之打印九九乘法表

js打印内容没有样式_JavaScript实验之打印九九乘法表

实验要求：

继续阅读