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 扩展方法
May 06 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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的库,结果发现很多东西
2006/12/31 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
python中对list去重的多种方法
2014/09/18 Python
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
python框架django项目部署相关知识详解
2019/11/04 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
Python运行异常管理解决方案
2020/03/09 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
外贸实习生自荐信范文
2013/11/24 职场文书
读书心得体会
2013/12/28 职场文书
高三毕业寄语
2014/04/10 职场文书
学生实习证明范文
2014/09/28 职场文书
2015年预算员工作总结
2015/05/14 职场文书