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 相关文章推荐
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
微信JS接口大全
Aug 25 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 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
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
js Dialog 实践分享
2012/10/22 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
Express.JS使用详解
2014/07/17 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
canvas知识总结
2017/01/25 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python sys.path详细介绍
2013/10/17 Python
python中的全局变量用法分析
2015/06/09 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
教师绩效工资方案
2014/02/01 职场文书
家长写给老师的建议书
2014/03/13 职场文书
男女朋友协议书
2014/04/23 职场文书
社会调查研究计划书
2014/05/01 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书