今天我自己用js实现了一个页面乘法口诀表（如图）来共享给大家，做的不是很好，如果大家有新的想法可以跟我交流哦。

代码如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
for(var r=0;r<=9;r++){
for(var i=1,str="";i<=r;i++){
str+=i+"x"+r+"="+i*r+" ";
}
console.log(str);
}
var tab = document.createElement('TABLE');
tab.style.border = '1px solid black';
tab.style.borderCollapse='collapse';
for(var i = 1; i <=9 ; i++){
var tr = document.createElement('TR');
tab.appendChild(tr);
for(var j = 1,str=""; j<=i ; j++){
str=j+"x"+i+"="+i*j+" ";
var td = document.createElement('TD');
td.style.border = '1px solid black';
td.style.height = '20px';
td.innerHTML=str;
tr.appendChild(td);
}
}
document.body.appendChild(tab);

</script>
</body>
</html>

用原生js实现一个页面乘法口诀表的更多相关文章

  1. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  2. 原生js实现一个DIV的碰撞反弹运动，并且添加重力效果

    继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...

  3. 原生js实现一个DIV的碰撞反弹运动

     原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...

  4. js用for循环实现乘法口诀表

    for循环可以打印一个乘法口诀表.需要使用for循环的嵌套 <script> for(var i = 0; i <= 9; i++){ // 外层循环控制行数,外层循环执行一次,内层 ...

  5. JS一些小算术、1加到50、乘法口诀表、买鸡等

    //从1加到50 for (var a=1,i=0;a<51; a++) {i=a+i} document.write(i);//1加到50 var num=0; for(var i=1;i&l ...

  6. 简单的用js打印乘法口诀表

    <script type="text/javascript"> //乘法口诀表 for (var i = 1; i < 10; i++) { for (var j ...

  7. javascript小程序——用嵌套循环来输出乘法口诀表

    在学习javascript过程中,一开始接触循环语句时一般拿乘法口诀表来练手,这里我将自己的练习贴在这里,希望能给和我一样的初学者些许帮助,也希望大神们能够不吝指教. 首先,来看一下乘法口诀表是什么样 ...

  8. python的乘法口诀表

    python的乘法口诀表 python的乘法口诀表 用python来写一个脚本,使得这个脚本在运行后自动输出乘法口诀表. pyton的脚本如下: #!/usr/bin/env python #codi ...

  9. 用列表+for循环生成乘法口诀表

    1 # 结合一下列表生成, 准备设计乘法表 2 # numlist = [1,2,3,4,5] 3 # [pow(i,3) for i in numlist] 4 # ## [1, 8, 27, 64 ...

随机推荐

  1. usaco 猜数游戏

    Description 为了提高智商,锻炼思维能力,奶牛设计了一个猜数游戏.游戏开始前,贝西会在牛棚后面摆上N个数字.所有数字排成一条直线,按次序从1到N编号.每个数字在1到10^9之间,没有两个数字 ...

  2. xutils Error:(37, 39) 错误: 无法访问HttpRequestBase 找不到org.apache.http.client.methods.HttpRequestBase的类文件

    Android 6.0(api 23)SDK已经强制移除httpclient 解决方案: 1降低api 2build.gradle中添加一句话 android { useLibrary'org.apa ...

  3. 转载-Linux下搭建VPN服务器（CentOS、pptp）

    转自:http://www.cnblogs.com/sixiweb/archive/2012/11/20/2778732.html 搭建过程参考这篇文章 先说我搭建过程中出现的问题吧: 按照 教程搭建 ...

  4. java消息队列使用场景

    http://blog.163.com/sir_876/blog/static/11705223201332444647261/ 目前能用到的比较不错的消息队列组件 ,kafka,activeMq, ...

  5. tcpdump来抓取执行的sql语句

    # tcpdump -n -nn -tttt -i eth1 -s 65535 'port 3306' -w tcpdump_mysql.ret -C 100 一个TCP包中包含多个mysql协议包, ...

  6. Microsoft SyncToy 文件同步工具

    Microsoft SyncToy SyncToy 是由 微软 推出的一款免费的文件夹同步工具.虽然名字中有一个 Toy,但是大家可千万不要误以为它的功能弱爆了.实际上,我感觉这款软件还真是摆脱了微软 ...

  7. springMVC零配置吐槽

    此时此刻,哥哥我不得不大大的吐槽一下.从github上down下来一个spring-mvc的chat演示样例,牛逼作者用的是注解的方式,项目全然零配置.而我眼下用的springMVC框架,还是在xml ...

  8. Makefile 入门与基本语法 分类： C/C++ ubuntu 2015-05-18 11:16 466人阅读 评论(0) 收藏

    在我看来,学会写简单的Makefile,阅读较复杂的makefile,是每一个Linux程序员都必须拥有的基本素质.Makefile可以自动识别哪些源文件被更改过,需要重新编译,那些不需要.从而节省大 ...

  9. UVA 11551 - Experienced Endeavour(矩阵高速幂)

    UVA 11551 - Experienced Endeavour 题目链接 题意:给定一列数,每一个数相应一个变换.变换为原先数列一些位置相加起来的和,问r次变换后的序列是多少 思路:矩阵高速幂,要 ...

  10. ExecutorService与Executors例子的简单剖析(转)

    对于多线程有了一点了解之后,那么来看看java.lang.concurrent包下面的一些东西.在此之前,我们运行一个线程都是显式调用了 Thread的start()方法.我们用concurrent下 ...