JavaScript实验之打印九九乘法表

laiczhang
laiczhang
laiczhang
67
文章
0
评论
2020年5月10日21:30:54 评论 17 970字阅读3分14秒

JavaScript实验之打印九九乘法表

实验要求:

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

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

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

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

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

 

JavaScript实验之打印九九乘法表

源代码

<!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>

 

参考技术:

  1. 向网页输出内容document.write(),包括文本的输出、HTML的输出、CSS内部样式和外部样式的输出;
  2. JS计时器的设置setTimeOut()或setInterval()
  3. JS计时器的清除clearTimeOut()或clearInterval()
继续阅读
laiczhang
WordPress禁用文章修订和自动保存功能 网站维护

WordPress禁用文章修订和自动保存功能

前言 WordPress有个文章修订和自动保存功能,作用是在你编辑文章后就会帮你自动保存 那么无论是遇到浏览器奔溃,电脑故障等等问题都不会有太大的损失 但有个问题在于:文章修订和自动保存功能一方面会有...
Hostloc发超链接的方法 骚操作

Hostloc发超链接的方法

Hostloc是一个讨论全球云服务器的面向国内用户的论坛,采用的是Discuz程序。 Discuz是支持UBB的,但是在Hostloc对超链接的UBB进行了一定的处理,常规的UBB会自动转为文本 那么...