今天我自己用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. Python生成器 yield

    迭代器与list相比较,就for in句型循环拿数据而言: 用list写很简洁,但如果list数据过大,会很消耗资源. 用iteration 迭代器写,则不会消耗那么多资源.他会随用随取,用一个拿一个 ...

  2. bzoj 4034 [HAOI2015] T2（树链剖分，线段树）

    4034: [HAOI2015]T2 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1536  Solved: 508[Submit][Status] ...

  3. cout internal

    cout internal */--> pre { background-color: #2f4f4f;line-height: 1.6; FONT: 10.5pt Consola," ...

  4. Shell while循环

    while循环用于不断执行一系列命令,也用于从输入文件中读取数据:命令通常为测试条件.其格式为: while command do Statement(s) to be executed if com ...

  5. JSP实现数据库（MySQL）查询——Java Web练习（二）

    1.创建数据库表student(数据库test01) 2.修改success.jsp页面,修改后的页面整体代码如下: <%@ page language="java" imp ...

  6. Android基础知识回顾

  7. [置顶] 文件io（一）--unix环境高级编程读书笔记

    unix-like(后面以linux为例)系统中的文件操作只需要五个函数就足够了,open.close.read.write以及lseek.这些操作被称为不带缓存的io,这里有必要说一下带缓存和不带缓 ...

  8. 什么是jetty

    转自:http://www.cnblogs.com/eafy/archive/2007/10/24/906792.html 1. 简介 Jetty 是一个开源的servlet容器,它为基于Java的w ...

  9. NSLayoutConstraint-代码实现自己主动布局的函数使用方法说明

    [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelat ...

  10. pip安装 MySQLDb 和 Django

    wget "https://pypi.python.org/packages/source/p/pip/pip-1.5.4.tar.gz#md5=834b2904f92d46aaa33326 ...