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實驗之列印九九乘法表

實驗要求：

繼續閱讀