使用JavaScript输出带有边框的乘法表
在学习JavaScript(以下简称为js)过程中,会遇到输出9*9乘法表的问题,我们都知道利用双重for循环可以很简单的在网页中打印出来,可是你在做的过程中有没有想着给这个乘法表加一点花样呢?
下面我们来说一下给乘法表加上边框(虽然我知道我加上的并不好看!!)
话不多说,直接上代码。具体代码在这
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--输出99乘法表 !-->
<script language="JavaScript">
document.write("<table border='1'>");
for(var i=1;i<=9;i++){
document.write("<tr>");
for(var j=i;j<=9;j++){
document.write("<td>"+i+"x"+j+"="+i*j+"</td>");
}
document.write('</tr>');
}
document.write("</table>");
</script>
</body>
</html>
个人的感悟:
我认为这段代码并不是多么的有科技含量,但是他对刚刚接触js的同学还是会有很大的帮助,帮助你理解好for循环,循环的嵌套这些知识点;同时也对之前的html代码进行了使用,希望大家不要学着新的忘了旧的,要争取做到:“温故而知新”!
代码的理解:
这段代码注释几乎没有,是因为我感觉太简单容易理解了,,哈哈哈。言归正传,首先使用双重循环输出9*9乘法表是第一步的操作,之后利用html的table标签,tr和td标签把输出的内容表格化,真的真的不难理解。有什么不懂得欢迎私信我,我们一起探讨学习!
使用JavaScript输出带有边框的乘法表的更多相关文章
- Lua习题练习(9*9乘法表,输出所指定的图像,斐波那契数列)
1. (循环语句的嵌套使用)有 1,2,3,4四个数字,能组成多少个互不相同且无重复数字的 三位数,并输出在屏幕上面2. 计算斐波那携数列的前20个数字,并输出在屏幕上面 .指的是这样一个数列(1,1 ...
- 用Python实现九九乘法表
1.用“#”组成的矩形的实现 代码 eight = int(input("Height:")) #用户输入高度 width = int(input("Width:&quo ...
- python3 第八章 - 完善九九乘法表
前面我们在第四章的时候挖了个坑:怎么用优雅的方式来打印九九乘法表.这一章我们就来填上这个坑. 首先,我们再来看下九九乘法表是什么样子的 1 x 1 = 1 1 x 2 = 2 2 x 2 = 4 1 ...
- 7-2 jmu-python-九九乘法表(矩形) (10 分)
本题目要求输出如下图所示的九九乘法表 注:乘积要求做格式控制,占4个位置的宽度 输入样例: 无 输出样例: 1*1=1 1*2=2 1*3=3 1*4=4 1*5=5 1*6=6 1*7=7 1*8= ...
- 输出九九乘法表(Python、Java、C、C++、JavaScript)
最近在学python的过程中,接触到了循环的知识,以及这个案例,于是写了下!感觉还不错,然后就用其它几种语言也试了下!! 接下来,就跟大家分享下实现方法!! 实现输出九九乘法表,主要用到的是循环的知识 ...
- 使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数,内循环控制当前行要输出的乘法表达式,在页面上输出九九乘法表
查看本章节 查看作业目录 需求说明: 在页面上输出九九乘法表,实现效果如图所示 实现思路: 创建HTML页面 在页面中嵌入 <script type="text/javascript& ...
- javascript实现九九乘法表
CSS代码部分: <style type="text/css"> table { width: 800px; height: 300px; border-collaps ...
- JavaScript——99乘法表
<!DOCTYPE html> <html> <head> <title>99乘法表</title> <style type=&quo ...
- 9x9乘法表输出[Java]
笔试,9x9乘法表输出的问题,看似简单,回来把当时写的结果输入一遍后发现,并没有想象中的“完美”.把改写的pos在此,警示...不要忘记任何细节. public class NXN { public ...
随机推荐
- SpringBoot面试题 (史上最全、持续更新、吐血推荐)
文章很长,建议收藏起来,慢慢读! 疯狂创客圈为小伙伴奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 大厂必备 ...
- NOIP模拟测试16「Drink·blue·weed」
话说这次考试 Drink 非常棒的一道卡常练习题,适合练习卡常 真的很棒 前置卡常知识 1.char要比int快 char是最快的 输出putchar,输入getchar 在这个题快了7000豪 2. ...
- 【Javascript + Vue】实现随机生成迷宫图片
前言 成品预览:https://codesandbox.io/s/maze-vite-15-i7oik?file=/src/maze.js 不久前写了一篇文章介绍了如何解迷宫:https://www. ...
- 『心善渊』Selenium3.0基础 — 7、XPath轴定位详解
目录 1.XPath轴定位介绍 2.位置路径表达式概念 3.步的路径表达式范例 4.练习 使用XPath轴方式,可根据文档中元素的相对位置,来进行元素的定位.例如:先找到一个相对好定位的元素,在根据与 ...
- C#进阶学习4--反射(Reflection)
一.反射的定义 审查元数据并收集关于它的类型信息的能力. 二.基础概念 (1)Assembly:定义和加载程序集,加载在程序集中的所有模块以及从此程序集中查找类型并创建该类型的实例. (2)Modul ...
- Linux定时任务-cronie
1.cronie服务介绍 Linux crontab(cronie)是用来定期执行程序的命令. 当安装完成操作系统之后,默认就会启动此任务调度命令. crond 命令每分钟会定期检查是否有要执行的工作 ...
- 6.11、制作windos虚拟机
1.下载kvm支持windows系统的驱动程序: cd /tmp/ wget https://fedorapeople.org/groups/virt/virtio-win/direct-downlo ...
- gRPC(3):拦截器
在 gRPC 调用过程中,我们可以拦截 RPC 的执行,在 RPC 服务执行前或执行后运行一些自定义逻辑,这在某些场景下很有用,例如身份验证.日志等,我们可以在 RPC 服务执行前检查调用方的身份信息 ...
- CentOS-yum安装chrome+chromeDriver+xvfb
安装chrome 创建yum源文件 $ vim /etc/yum.repos.d/google-chrome.repo [google-chrome] name=google-chrome baseu ...
- Java:jar包与war包的差异
一般将项目分为两层:服务层和表现层(视图层),通常我们把服务层打包成jar,而把视图层的包打成war包. 仔细对比可以发现: jar包中包含了你写程序的所有服务或者第三方类库,它通常是作为幕后工作者, ...