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

 更新时间:2016年10月04日 11:32:12   投稿:daisy  
这篇文章主要介绍了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;
  }

总结

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

相关文章

  • TypeScript中的交叉类型和联合类型示例讲解

    TypeScript中的交叉类型和联合类型示例讲解

    交叉类型简单来说就是通过&符号将多个类型进行合并成一个类型,然后用type来声明新生成的类型,联合类型和交叉类型比较相似,联合类型通过|符号连接多个类型从而生成新的类型,本文就这两个类型结合示例代码详细讲解,感兴趣的朋友跟随小编一起学习吧
    2022-12-12
  • JS去除字符串两端空格的简单实例

    JS去除字符串两端空格的简单实例

    本篇文章主要是对JS去除字符串两端空格的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • Bootstrap学习笔记之进度条、媒体对象实例详解

    Bootstrap学习笔记之进度条、媒体对象实例详解

    这篇文章主要介绍了Bootstrap进度条、媒体对象实例详解,进度条包括基础进度条,多彩进度条,条纹状进度条等内容,具体实现代码大家参考下本文
    2017-03-03
  • JavaScript中Promise的执行顺序详解

    JavaScript中Promise的执行顺序详解

    Promise 是 JS 中进行异步编程的新的解决方案(旧的是纯回调形式) ,下面这篇文章主要给大家介绍了关于JavaScript中Promise执行顺序的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • 用canvas 实现个图片三角化(LOW POLY)效果

    用canvas 实现个图片三角化(LOW POLY)效果

    这篇文章主要介绍了用canvas 实现个图片三角化(LOW POLY)效果 的相关资料,需要的朋友可以参考下
    2016-02-02
  • 基于JavaScript实现飘落星星特效

    基于JavaScript实现飘落星星特效

    这篇文章主要为大家详细介绍了基于JavaScript实现飘落星星特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 详解CocosCreator华容道数字拼盘

    详解CocosCreator华容道数字拼盘

    这篇文章主要介绍了详解CocosCreator华容道数字拼盘,对华容道感兴趣的同学,看完之后,可以回去亲手试一下
    2021-04-04
  • 小程序Request的另类用法详解

    小程序Request的另类用法详解

    这篇文章主要介绍了小程序Request的另类用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 微信小程序实现滑动切换自定义页码的方法分析

    微信小程序实现滑动切换自定义页码的方法分析

    这篇文章主要介绍了微信小程序实现滑动切换自定义页码的方法,结合实例形式分析了微信小程序页码动态切换相关实现技巧与注意事项,需要的朋友可以参考下
    2018-12-12
  • 基于ajax与msmq技术的消息推送功能实现代码

    基于ajax与msmq技术的消息推送功能实现代码

    这篇文章主要介绍了基于ajax与msmq技术的消息推送功能实现代码,具有一定的参考价值,有兴趣的可以了解一下。
    2016-12-12

最新评论