编程 Javascript

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

Posted in Javascript onJune 07, 2016

每个学过编程的人都写过“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实现九九乘法表的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)

Jun 28 Javascript

jQuery阻止事件冒泡具体实现

Oct 11 Javascript

变量声明时命名与变量作为对象属性时命名的区别解析

Dec 06 Javascript

从数组中随机取x条不重复数据的JS代码

Dec 24 Javascript

js实现的二级横向菜单条实例

Aug 22 Javascript

jqTransform美化表单

Oct 10 Javascript

jQuery基本选择器之标签名选择器

Sep 03 Javascript

React Native实现简单的登录功能(推荐)

Sep 19 Javascript

微信小程序实现展示评分结果功能

Feb 15 Javascript

Vue 实现html中根据类型显示内容

Oct 28 Javascript

vue实现页面内容禁止选中功能,仅输入框和文本域可选

Nov 09 Javascript

vue大型项目之分模块运行/打包的实现

Sep 21 Javascript

javascript如何定义对象数组

Jun 07 #Javascript

jQuery控制div实现随滚动条滚动效果

Jun 07 #Javascript

bootstrap输入框组代码分享

Jun 07 #Javascript

javascript 数组的定义和数组的长度

Jun 07 #Javascript

jQuery实现按钮点击遮罩加载及处理完后恢复的效果

Jun 07 #Javascript

原生js三级联动的简单实现代码

Jun 07 #Javascript

AngularJS 遇到的小坑与技巧小结

Jun 07 #Javascript