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 操作XML入门
Dec 25 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
JS实现随机抽取三人
Nov 06 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
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
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
php递归json类实例
2014/12/02 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
js中eval详解
2012/03/30 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
python下载文件时显示下载进度的方法
2015/04/02 Python
python 爬取微信文章
2016/01/30 Python
python django事务transaction源码分析详解
2017/03/17 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
微信小程序python用户认证的实现
2019/07/29 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
python 基于wx实现音乐播放
2020/11/24 Python
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
培训演讲稿范文
2014/01/12 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
ktv筹备计划书
2014/05/03 职场文书
大学四年个人总结
2015/03/03 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书