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 相关文章推荐
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
json的使用小结
Jun 08 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 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
用PHP生成自己的LOG文件
2006/10/09 PHP
php printf输出格式使用说明
2010/12/05 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
JavaScript 常用函数
2009/12/30 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
详解python配置虚拟环境
2019/04/08 Python
python多进程读图提取特征存npy
2019/05/21 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python socket 聊天室实例代码详解
2019/11/14 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
临床医学专业个人的自我评价
2013/09/27 职场文书
金融专业个人求职信范文
2013/11/28 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
幼儿园中秋节活动方案2013
2014/01/29 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
建议书怎么写
2014/03/12 职场文书
出国留学计划书
2014/04/27 职场文书
介绍信模板
2015/01/31 职场文书