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 相关文章推荐
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
小程序实现多列选择器
Feb 15 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
原生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 autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
深入分析PHP设计模式
2020/06/15 PHP
JavaScript 程序编码规范
2010/11/23 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
js实现常用排序算法
2016/08/09 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
SVG描边动画
2017/02/23 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
详解Python发送email的三种方式
2018/10/18 Python
python3实现点餐系统
2019/01/24 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
如何用Django处理gzip数据流
2021/01/29 Python
计算机科学与技术应届生求职信
2013/11/07 职场文书
八年级历史教学反思
2014/01/10 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
工商局调档介绍信
2015/10/22 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript