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 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 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
destoon常用的安全设置概述
2014/06/21 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
php中的登陆login实例代码
2016/06/20 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
javascript操作cookie
2017/01/17 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
使用python统计文件行数示例分享
2014/02/21 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
python redis 删除key脚本的实例
2019/02/19 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
东方红海科技面试题软件测试方面
2012/02/08 面试题
大学毕业生求职自荐信
2014/02/20 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
采购员工作总结范文
2015/08/12 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL