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 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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
You might like
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
php json相关函数用法示例
2017/03/28 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
Keras自定义IOU方式
2020/06/10 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
申请任职学生会干部自荐书范文
2014/02/13 职场文书
委托证明书
2014/09/17 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
请客吃饭开场白
2015/06/01 职场文书
欠条范文
2015/07/03 职场文书
升学宴学生致辞
2015/09/29 职场文书