JavaScript九九乘法口诀表的简单实现


Posted in Javascript onOctober 04, 2016

先来看看效果图

JavaScript九九乘法口诀表的简单实现

JavaScript示例代码

<script type="text/javascript">
  var body = document.getElementsByTagName('body')[0];
  var wrap = document.createElement('div');
  wrap.id = 'wrap';
  body.appendChild(wrap);
  var wrap = document.getElementById('wrap');
  for (var i = 1; i < 10; i++) {
   for (var j = 1; j <= i; j++) {
    var p = document.createElement('p');
    //设置格子(p标签)样式
    p.style.width = '100px';
    p.style.height = '30px';
    p.style.lineHeight = '30px';
    p.style.background = 'yellow';
    p.style.display = 'inline-block';
    p.style.border = '1px solid green';
    p.style.textAlign = 'center';
    //格子添加内容
    p.innerHTML = j + "*" + i + "=" +(j * i);
    wrap.appendChild(p);
   }
   var br = document.createElement('br');
   wrap.appendChild(br);
  }
 </script>

注: 这样在浏览器显示出来的每行有间距,可以在style里设置

* {
  padding : 0px;
  margin : 0px;
  }

总结

以上就是这篇文章的全部内容,希望本文对大家的学习和工作能有所帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
js清空form表单中的内容示例
May 20 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 #Javascript
json定义及jquery操作json的方法
Oct 03 #Javascript
javascript中异常处理案例(推荐)
Oct 03 #Javascript
switch语句的妙用(必看篇)
Oct 03 #Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 #Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 #Javascript
JavaScript对象创建模式实例汇总
Oct 03 #Javascript
You might like
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
php ci框架验证码实例分析
2013/06/26 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
浅谈PHP的反射机制
2016/12/15 PHP
yii2安装详细流程
2018/05/23 PHP
JQuery 小练习(实例代码)
2009/08/07 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
vue-rx的初步使用教程
2018/09/21 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
python+django加载静态网页模板解析
2017/12/12 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
个人自荐书怎么写
2015/03/26 职场文书
居安思危观后感
2015/06/11 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏