今天我自己用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. HDOJ/HDU 1328 IBM Minus One(水题一个，试试手)

    Problem Description You may have heard of the book '2001 - A Space Odyssey' by Arthur C. Clarke, or ...

  2. （转载）TRS的WCM6漏洞权限绕过以及绕过密码的登陆方式

    转载于:http://www.2cto.com/Article/201302/191261.html 1.由来:建立在 TRS的WCM6可直接获取管理员密码 漏洞的基础上   2.首先访问wcm目录, ...

  3. 天涯html&css基础框架

    html申明 对ie6-8在html中添加no-css3这个class和各个版本的class,对ie7以下添加lte7这个class,然后根据我们目前使用浏览器的比例,把第一的ie6放在判断第一位. ...

  4. 什么时候使用Shell

    因为Shell似乎是各UNIX系统之间通用的功能,并且经过了POSIX的标准化.因此,Shell脚本只要“用心写”一次,即可应用到很多系统上.因此,之所以要使用Shell脚本是基于: 简单性:Shel ...

  5. [置顶] shell变量赋值-linux

    Shell变量赋值 命名须规则: 1)使用变量无需事先声明 2)首个字符必须为字母(a-z,A-Z) 3)中间不能有空格,可以使用下划线(_) 4)不能使用标点符号 5)不能使用bash里的关键字(可 ...

  6. JAVA基础英语单词表（下）

    quantity                     / 'kwɔntiti /                    量,数量 query                             ...

  7. iOS中SQLite知识点总结2

    数据库(SQLite) 01-多表查询 格式:select 字段1,字段2,... from 表名1,表名2; 别名:select 别名1.字段1 as 字段别名1,别名2.字段2 as 字段别名2, ...

  8. git push 报错

    git push报错误: Git push error: RPC failed; result=56, HTTP code = 200 fatal: The remote end hung up un ...

  9. C++的静态分发(CRTP)和动态分发(虚函数多态)的比较

    虚函数是C++实现多态的工具,在运行时根据虚表决定调用合适的函数.这被称作动态分发.虚函数很好的实现了多态的要求,但是在运行时引入了一些开销,包括: 对每一个虚函数的调用都需要额外的指针寻址 虚函数通 ...

  10. js 设置cookie

    function GetCookieVal(offset) // 获得Cookie解码后的值 { var endstr = document.cookie.indexOf(";", ...