JS在页面输出九九乘法表
<!--小练习,练习使用循环实现一个九九乘法表
第一步,最低要求:在Console中按行输出 n * m = t
然后,尝试在网页中,使用table来实现一个九九乘法表
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td {
width: 200px;
height: 40px;
border: 1px solid #CCCCCC;
}
tr {
text-align: center;
}
</style>
</head>
<body>
<!--小练习,练习使用循环实现一个九九乘法表
第一步,最低要求:在Console中按行输出 n * m = t
然后,尝试在网页中,使用table来实现一个九九乘法表
--> <table>
<th>九九乘法表</th> </table> <script> for(var i=1;i<=9;i++){
var str="";
var arr=[];
var tr=document.createElement("tr");
for(var j=1;j<=i;j++){
str=i+"*"+j+"="+i*j;
arr.push(str);
// console.log(arr);
var td=document.createElement("td");
tr.appendChild(td);
td.innerHTML=arr[j-1]; //注意这里是j-1 因为当i=1 j=1的时候 由于 arr[1]不存在 所以会报错
//console.log(str);把每次内部循环的结果也都输出了 第一行:3*1=3 第二行:3*1=3 3*2=6 第三行:3*1=3 3*2=6 3*3=9
}
//
// console.log(str); //将一次外循环作为一次输出
var table=document.getElementsByTagName("table")[0];
table.appendChild(tr);
} </script>
</body>
</html>

JS在页面输出九九乘法表的更多相关文章
- JSP页面输出九九乘法表--JSP基础
index.jsp: <%@ page language="java" import="java.util.*" pageEncoding="U ...
- 使用JSP脚本在页面输出九九乘法表
<% int i,j; for(i=1;i<10;i++) { for(j=1;j<=i;j++) { out.println(i+"*"+j+"=&q ...
- 使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数,内循环控制当前行要输出的乘法表达式,在页面上输出九九乘法表
查看本章节 查看作业目录 需求说明: 在页面上输出九九乘法表,实现效果如图所示 实现思路: 创建HTML页面 在页面中嵌入 <script type="text/javascript& ...
- JavaWeb 输出九九乘法表,三角形,菱形
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- For循环输出九九乘法表
题:使用For循环输出九九乘法表 解析: 1*1=1 1*2=2 2*2=4 1*3=3 2*3=6 3*3=9 .... 1*9=9 ........ .....9*9=81 可以看做j*i ...
- 输出九九乘法表(Python、Java、C、C++、JavaScript)
最近在学python的过程中,接触到了循环的知识,以及这个案例,于是写了下!感觉还不错,然后就用其它几种语言也试了下!! 接下来,就跟大家分享下实现方法!! 实现输出九九乘法表,主要用到的是循环的知识 ...
- python学习:输出九九乘法表
输出九九乘法表 代码: num1 = 1while num1 <= 9: num2 = 1 while num2 <= num1: print(str(num2)+"*" ...
- shell脚本输出九九乘法表
#!/bin/bash#输出九九乘法表 for ((i=1;i<=9;i++)) do for ((j=1;j<=$i;j++)) do echo -n $j'x'$i=$(($i*$j) ...
- Python练习题 006:输出九九乘法表
[Python练习题 006] 输出九九乘法表 --------------------------------------------------- 照理这题不难,逻辑关系弄对了就好办,但数学渣的我 ...
随机推荐
- honpeyhonepy
2019.09.15 简历编辑功能: 2019.09.23 爬虫功能(智联招聘) 2.1 AI同步功能 2019.10.08 登录功能(包括普通用户登录.管理员.招聘人员) 2019.11.10 鉴权 ...
- git上传代码到code.csdn.net
国内有code.csdn.net速度很快 用git上传需要去下载git程序 很简单. 我是Windows下 先code.csdn.net创建一个项目 https://code.csdn.net/das ...
- H5微信授权登录
这里介绍H5微信授权登录,采用了微信公众号授权原理,是oauth2的登录授权方式,简单的来讲,就是用户通过手机微信确认登录之后,微信方会返回一个授权码code给回第三方(接入方),这个授权码code一 ...
- Codeforces Round #430 (Div. 2) - D
题目链接:http://codeforces.com/contest/842/problem/D 题意:定义Mex为一个序列中最小的未出现的正整数,给定一个长度为n的序列,然后有m个询问,每个询问给定 ...
- Nginx cpu亲和性调整
意义 Nginx默认没有开启利用多核cpu,我们可以通过worker_processes指令来启动多个worker,但是worker最终运行在哪些cpu核上是系统层进行调度的:我们可以通过增加work ...
- vue无线滚动组件封装
<template> <div class="scroll-wapper" :style="{height: scrollHeight + 'px'}& ...
- 缓存promise技术不错哦
1. pageManager.js const promiseList = {}; module.exports = { putData: function(pageName,data){ promi ...
- Rails3:使用bundler管理gems
Rails3:使用bundler管理gems bundler 是一套为了 Rails3 所打造的全新 Gem dependencies 管理工具:一套基于 Rubygems 的更高阶套件管理工具,适合 ...
- vue组件样式scoped
1.vue组件中的样式如果没加scrped,样式代表的是全局样式(避免组件之间样式的冲突).加了属性代表是模块化的. 其他组件引用button组件 上面分析了单个组件渲染后的结果,那么组件互相调用之后 ...
- poj 3352 : Road Construction 【ebcc】
题目链接 题意:给出一个连通图,求最少加入多少条边可使图变成一个 边-双连通分量 模板题,熟悉一下边连通分量的定义.最后ans=(leaf+1)/2.leaf为原图中size为1的边-双连通分量 #i ...