JavaScript实现九九乘法表的简单实例

每个学过编程的人都写过“HelloWorld”

但99乘法表，我想也应该成为每个编程初学者的必编程序

这是JavaScript的实现方法，非常适合初学者！！！

以下是代码及注释

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript九九乘法表</title> 

<style type="text/css">
table{
  width:600px;     //表格height属性可设置可不设置,建议不设置
  border-collapse:separate;
  }
table td{
  border:#000000 1px solid;
  text-align: center;  //使<td>标签中的内容居中显示，若是<th>标签，没有此行代码亦可自动居中
  }
</style>

</head>
<body> 

<script type="text/javascript">
//下面部分是核心代码

document.write("<table>");   //<table></table>添加一个表格样式来显示乘法表
for (var x = 1; x <= 9; x++)
{
  document.write("<tr>");   //<tr></tr>标签
  for (var y = 1; y <= x; y++)
  {
    document.write("<td>"+y+"x"+x+"="+y*x+"</td>");//亦可用<th>标签来起到居中加粗内容的作用
  }
  document.write("</tr>");
}
document.write("</table>");
</script> 

</body>
</html>

下面是上面代码中涉及的一些内容

•<table>标签是定义一个表格！

<tr> - 定义表行

<th> - 定义表头

<td> - 定义表元(表格的具体数据)

border=""属性可以设置表格的边框！

<th>里的字默认为加粗居中显示！

bgcolor=""也就是我熟悉的设置表格背景颜色！

•cellspacing=""和cellspadding=""是设置表格间的间距和单元格里的间距！但这两个标签都被HTML5移除了，取而代之的是border-collapse:separate | collapse | inherit。

separate 默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。
collapse 如果可能，边框会合并为一个单一的边框。会忽略border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承border-collapse属性的值。

以上这篇JavaScript实现九九乘法表的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用JavaScript实现一个小程序之99乘法表

    使用JavaScript实现一个小程序之99乘法表

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title>99乘法表</title> <meta charset="utf-8"> </head> <body> <script type="text/javascript"> for (var i = 1; i <= 9; i++) {

  • JavaScript实现99乘法表及隔行变色实例代码

    JavaScript实现99乘法表及隔行变色实例代码

    项目需求:实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if和switch两种判断方式都能实现: 额,分析一下实例要求:一个99乘法表,一个多方法的隔行变色,鼠标滑过变另外一个颜色,离开恢复原色. 嗯,我们一步步来吧! 99乘法表的实现,我相信很多人都知道怎么实现,无非是2个for循环得到的结果,这里我就不多做解释,还不理解的同学可以仔细研究一下代码,研究一

  • JS实现上下左右对称的九九乘法表

    JS实现上下左右对称的九九乘法表

    九九乘法表使用很多种语言都可以实现.本文讲述JavaScript中常用的两种循环(For.While)来完成这四种对称的九九乘法表,这个例子是一个练习循环基础很好的方法,由于排版上对不整齐,因此循环了一个表格. 一.左下角为度的梯形乘法表: For循环代码 document.write("<table width='' border='>"); for(var i=; i<=; i++){ document.write("<tr>");

  • jsp/javascript打印九九乘法表代码

    jsp表达式方式: 复制代码 代码如下: <center> <table border="1"> <% for (int i = 1; i <= 9; i++) { %> <tr> <% for (int j = 1; j <= 9; j++) { %> <td> <% if (j <= i) { %> <%=i%>*<%=i%>=<%=i * j%>

  • jsp输出九九乘法表的简单实例

    jsp输出九九乘法表的简单实例

    <% String st = ""; for(int i = 1; i <= 9; i++){ for(int j = 1; j <= i; j++){ st += j+"x"+i+"="+i*j; st += "  "; } st += "<br>"; } %> <table width="400" height="200"

  • javascript和jquery分别实现的九九乘法表代码

    javascript实现的九九乘法表代码 99乘法表 for(var i=1;i"); } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] jquery实现的九九乘法表代码 jquery 九九乘法表 $(document).ready(function(){ $(" ").data('fact',8).css('margin','10px') .appendTo(document.body) .bind('error',function(){ $(this).pa

  • JavaScript实现九九乘法表的简单实例

    每个学过编程的人都写过"HelloWorld" 但99乘法表,我想也应该成为每个编程初学者的必编程序 这是JavaScript的实现方法,非常适合初学者!!! 以下是代码及注释 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript九

  • JSP生成九九乘法表的简单实例

    JSP生成九九乘法表的简单实例

    JSP生成九九乘法表的简单实例 一 用表达式和脚本方式实现九九乘法表 <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://&quo

  • 基于c#实现的九九乘法表（简单实例）

    基于c#实现的九九乘法表（简单实例）

    话不多说,跟着小编来看下实现代码吧 static void Main(string[] args) { for (int i = 1; i < 10; i++) { for (int s = 1; s <= i; s++) { Console.Write(s + "*" + i + "=" + i * s + " "); if (i == s) { Console.Write("\n"); } } } Consol

  • 基于javascript实现九九乘法表

    基于javascript实现九九乘法表

    本文实例为大家分享了javascript实现九九乘法表的相关代码,具体内容如下 <script type="text/javascript"> var sum=0; var wite; for (var i = 1; i < 10; i++){ var div=$('<div class="class'+i+'"></div>'); $("body").append(div); for(var j = i

  • Java实现九九乘法表的完整实例（对齐版）

    Java实现九九乘法表的完整实例（对齐版）

    Java实现九九乘法表 思路: 1.看到九九乘法表就可以想到for循环,1-9可以写成一个for循环,自增1 2.那就是双重for循环,第一个for循环用于生成1-9的数值 3.第二个for循环的终止条件让其小于等于第一个for循环的值 4.最后输出一行之后换行,避免堆积在一起! 贴出代码: public class MultiplicationTable { /** * Java实现九九乘法表 * */ public static void main(String[] args) { for

  • JavaScript编写九九乘法表（两种任选）

    JavaScript编写九九乘法表（两种任选）

    话不多说,请看代码: <script language=javascript> for(i=1;i<=9;i++){ for(j=1;j<=9;j++){ document.write (i+"*"+j+"="+i*j+" "); if(i==j) {document.write ("<br/>"); break;} //用的if语句,如果这两个数字相同了 那么跳出,另起一行 } } <

随机推荐