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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
vue实现简单学生信息管理
May 30 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 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
Thinkphp中Create方法深入探究
2014/06/16 PHP
php创建session的方法实例详解
2015/01/27 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python 回调函数和回调方法的实现分析
2016/03/23 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
10个Python小技巧你值得拥有
2018/09/29 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
python3获取当前目录的实现方法
2019/07/29 Python
python实现canny边缘检测
2020/09/14 Python
Django model class Meta原理解析
2020/11/14 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
班级活动策划书
2014/02/06 职场文书
土木工程求职信
2014/05/29 职场文书
企业晚会策划方案
2014/05/29 职场文书
争做文明公民倡议书
2014/08/29 职场文书
趣味运动会开幕词
2015/01/28 职场文书
民事上诉状范文
2015/05/22 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL