一篇文章教你用JavaScript使用流程控制打印九九乘法表

目录
  • 一、选择结构
    • if单分支语句
    • if…else双分支语句
    • if…elseif…else多分支语句
    • switch多分支语句
  • 二、循环结构
    • while循环语句
    • do…while循环语句
    • for循环语句
  • 三、跳转语句
  • 四、动手实践九九乘法表
  • 总结

一、选择结构

概念:选择结构语句需要根据给出的条件进行判断来决定执行对应的代码。

if单分支语句

概念:if条件判断语句也被称为单分支语句,当满足某种条件时,就进行某种处理。

举例:只有年龄大于等于18周岁,才输出已成年,否则无输出。

if…else双分支语句

概念:if…else语句也称为双分支语句,当满足某种条件时,就进行某种处理,否则进行另一种处理。

举例:判断一个学生的年龄,大于等于18岁则是成年人,否则是未成年人。

if…else if…else多分支语句

概念:if…else if…else语句也称为多分支语句,可针对不同情况进行不同的处理。

举例:对一个学生的考试成绩进行等级的划分,分数在90——100分为优秀,分数在80——90分为优秀为良好,分数在70——80分为中等,分数在60——70分为及格,分数小于60则为不及格。

注意

“if…else if…else”语句在使用时,“else if”中间要有空格,否则程序会报语法错误。

switch多分支语句

概念:switch语句也是多分支语句,功能与if系列条件语句相同,不同的是它只能针对某个表达式的值作出判断,从而决定执行哪一段代码。

特点:代码更加清晰简洁、便于阅读。

举例:根据学生成绩score进行评比(满分为100分)。

二、循环结构

概念:所谓循环语句就是可以实现一段代码的重复执行。

举例:连续输出1~100之间的数字。

while循环语句

概念:while循环语句是根据循环条件来判断是否重复执行一段代码。

注意

需要注意的是,若循环条件永远为true时,则会出现死循环,因此在开发中应根据实际需要,在循环体中设置循环出口,即循环结束的条件。

do…while循环语句

do…while循环语句的功能与while循环语句类似,唯一的区别在于,while是先判断条件后执行循环体,而do…while会无条件执行一次循环体后再判断条件。

for循环语句

概念:for循环语句是最常用的循环语句,它适合循环次数已知的情况。

for关键字后面小括号“()”中包括了三部分内容:

初始化表达式。循环条件。操作表达式。

它们之间用“;”分隔,{}中的执行语句为 ③循环体。

注意

for循环语句小括号“()”内的每个表达式都可以为空,但是必须保留分号分割符。当每个表达式都为空时,表示该for循环语句的循环条件永远满足,会进入无限循环的状态,此时如果要结束无限循环,可在for语句循环体中用跳转语句进行控制。

三、跳转语句

概念:跳转语句用于实现程序执行过程中的流程跳转。

常用的跳转语句:有break和continue语句。

break与continue的区别:break语句可应用在switch和循环语句中,其作用是终止当前语句的执行,跳出switch选择结构或循环语句,执行后面的代码。而continue语句用于结束本次循环的执行,开始下一轮循环的执行操作。

其他功能:break和continue语句还可跳转到指定的标签语句处,实现嵌套语句的多层次跳转。

  • label表示标签的名称,如start、end等任意合法的标识符。
  • statement表示具体执行的语句,如if、while、变量的声明等。
  • 标签语句必须在使用之前定义,否则会出现找不到标签的情况。

【案例】打印金字塔

代码实现思路:

  • 分析金字塔组成:由空格和星星“*”组成的三角形。
  • 分析“*”和空格的分布规律(假设最上面的一个星星作为金字塔的第一层)。
  • 每层中星星的数量 = 当前层数2 -1。例如当前为第4层,则星星数= 42-1=7。
  • 每层星星前的空格 = 金字塔层数 – 当前层数。例如当前行数为第3层,则空格数=5-3=2。

代码实现

	<script>
	var level = prompt('请设置金字塔的层数');
	// 获取输入的纯数字,其余情况皆转为NaN
	level = parseInt(level);
	// 判断用户输入的数据是否合法
	if (isNaN(level)) {
	alert('金字塔的层数必须是纯数字');
	}
	// 循环遍历金字塔的层数
	for(var i = 1; i <= level; ++i){
	// 输出星星前的空格
	var blank = level - i;
	for(var k=0; k < blank; ++k){
	document.write('&nbsp;');
	}
	// 打印星星
	var star = i*2 - 1;
	for(var j = 0; j < star; ++j){
	document.write('*');
	}
	// 换行
	document.write('<br>');
	}
	</script>

四、动手实践九九乘法表

九九乘法表体现了数字之间乘法的规律,成为了学生在学习数学时必不可少的一项内容。

代码实现

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>九九乘法表</title>
	<style>
	table{border-collapse:collapse;}
	table td{border:2px solid #ccc;padding:3px 6px;}
	</style>
	</head>
	<body>
	<table>
	<script>
	for (var i = 1; i < 10; ++i) { // 遍历表中所有的行
	document.write('<tr>');
	for (var j = 1; j <= i; ++j) { // 遍历每行中的列
	// 拼接单元格
	document.write('<td>');
	document.write(j);
	document.write('×');
	document.write(i);
	document.write('=');
	document.write(j * i);
	document.write('</td>');
	}
	document.write('</tr>');
	}
	</script>
	</table>
	</body>
	</html>

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

(0)

相关推荐

  • javascript流程控制语句集合

    一.if语句 if语句是最基本的条件判断语句.根据表达式条件来执行相应的处理.语法示例如下: var a=5; //声明变量a,并赋值为5. var b; //声明变量b. if(a==b){ //判断,如果a=b,则执行下面内容 alert("b=5"); //弹窗,b=5. } 1.a==b是if语句中的条件.     2.alert("a=c")是if语句中的结果.     此段脚本的含义是:声明变量a.b,且赋值a=5:当a=b时,弹窗b=5.     注:

  • JavaScript流程控制(循环)

    目录 一.for 循环 二.双重 for 循环 三.while 循环 四.do while 循环 五.循环小结 六.continue break 1.continue关键字 2.break关键字 一.for 循环 在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件.由循环体及循环的终止条件组成的语句,被称之为循环语句. for 循环主要用于把某些代码循环若干次,通常跟计数有关系. 其语法结构如下: for(初始化变量; 条件表达式; 操作表达式 ){ //循环体

  • js实现华丽的九九乘法表效果

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>span实现的乘法表</title> <style type="text/css"> .wrap { width: 800px; margin: 20px auto; -webkit-user-selec

  • JavaScript流程控制(分支)

    目录 一.流程控制 二.顺序流程控制 三.分支流程控制 if 语句 1.分支结构 2. if 语句 3. if else语句(双分支语句) 4.if else if 语句(多分支语句) 四.三元表达式 五.分支流程控制 switch 语句 1.语法结构 2.switch 语句和 if else if 语句的区别 一.流程控制 流程控制主要有三种结构: 分别是顺序结构 分支结构 循环结构 这三种结构代表三种代码执行的顺序. 二.顺序流程控制 顺序结构是程序中最简单.最基本的流程控制,它没有特定的语

  • JSP生成九九乘法表的简单实例

    JSP生成九九乘法表的简单实例 一 用表达式和脚本方式实现九九乘法表 <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://&quo

  • JavaScript编写九九乘法表(两种任选)

    话不多说,请看代码: <script language=javascript> for(i=1;i<=9;i++){ for(j=1;j<=9;j++){ document.write (i+"*"+j+"="+i*j+" "); if(i==j) {document.write ("<br/>"); break;} //用的if语句,如果这两个数字相同了 那么跳出,另起一行 } } <

  • 一篇文章教你用JavaScript使用流程控制打印九九乘法表

    目录 一.选择结构 if单分支语句 if…else双分支语句 if…elseif…else多分支语句 switch多分支语句 二.循环结构 while循环语句 do…while循环语句 for循环语句 三.跳转语句 四.动手实践九九乘法表 总结 一.选择结构 概念:选择结构语句需要根据给出的条件进行判断来决定执行对应的代码. if单分支语句 概念:if条件判断语句也被称为单分支语句,当满足某种条件时,就进行某种处理. 举例:只有年龄大于等于18周岁,才输出已成年,否则无输出. if…else双分

  • jsp/javascript打印九九乘法表代码

    jsp表达式方式: 复制代码 代码如下: <center> <table border="1"> <% for (int i = 1; i <= 9; i++) { %> <tr> <% for (int j = 1; j <= 9; j++) { %> <td> <% if (j <= i) { %> <%=i%>*<%=i%>=<%=i * j%>

  • javascript和jquery分别实现的九九乘法表代码

    javascript实现的九九乘法表代码 99乘法表 for(var i=1;i"); } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] jquery实现的九九乘法表代码 jquery 九九乘法表 $(document).ready(function(){ $(" ").data('fact',8).css('margin','10px') .appendTo(document.body) .bind('error',function(){ $(this).pa

  • 一篇文章教你学会使用Python绘制甘特图

    目录 优点 局限 一日一书 用来制作甘特图的专业工具也不少,常见的有:Microsoft Office Project.GanttProject.WARCHART XGantt.jQuery.Gantt.Excel等,网络上也有一些优质工具支持在线绘制甘特图. 可是这种现成的工具,往往也存在一些弊端,让编程人员不知所措.比如说,花里胡哨的UI,让人目不暇接,不知点哪个才好: 比如说,有些基于浏览器的图表需要掌握HTML.JS等编程语言,只会点Python的我直接被劝退: 再比如,进来就是注册.登

  • 一篇文章教你使用SpringBoot如何实现定时任务

    前言 在 Spring + SpringMVC 环境中,一般来说,要实现定时任务,我们有两中方案,一种是使用 Spring 自带的定时任务处理器 @Scheduled 注解,另一种就是使用第三方框架 Quartz ,Spring Boot 源自 Spring+SpringMVC ,因此天然具备这两个 Spring 中的定时任务实现策略,当然也支持 Quartz,本文我们就来看下 Spring Boot 中两种定时任务的实现方式. 一.第一种方式:@Scheduled 使用 @Scheduled

  • 一篇文章教你学会js实现弹幕效果

    目录 新建一个html文件: 建好html文件,搞出初始模版 HTML添加 CSS填充 js逻辑代码 动画效果 下面是弹幕效果 : 相信小伙伴们都看过了,那么它实现的原理是什么呢,那么我们前端怎么用我们web技术去实现呢?? 新建一个html文件: 哈哈哈,大家别像我一样用中文命名. 中文命名是不合规范的,行走江湖,大佬们看见你的中文命名会笑话你的. 上图中,我们引入了jquery插件,没错我们用jq写,回归原始(找不到cdn链接的小伙伴可以百度bootcdn,在里面搜索jquery).并且取了

  • 一篇文章带你吃透JavaScript中的DOM知识及用法

    目录 一.前言 二.DOM框架 三.认识DOM节点 四.JS访问DOM 1.获取节点 2.改变 HTML 3.改变 CSS 4.检测节点类型 5.操作节点间的父子及兄弟关系 6.操作节点属性 7.创建和操作节点 总结 一.前言 DOM:Document Object Model(文档对象模型),定义了用户操作文档对象的接口,可以说DOM是自HTML将网上相关文档连接起来后最伟大的创新.它使得用户对HTML有了空前的访问能力,并使开发者将HTML作为XML文档来处理. 本文知识导图如下: 二.DO

  • Javascript异步流程控制之串行执行详解

    这篇文章主要讲一下如何串行执行一组异步任务,例如有下面几个任务,在这里我们用setTimeout模拟一个异步任务: let taskA = () => setTimeout(() => console.log('run task A'), 100); let taskB = () => setTimeout(() => console.log('run task B'), 50); let taskC = () => setTimeout(() => console.l

  • 基于javascript实现九九乘法表

    本文实例为大家分享了javascript实现九九乘法表的相关代码,具体内容如下 <script type="text/javascript"> var sum=0; var wite; for (var i = 1; i < 10; i++){ var div=$('<div class="class'+i+'"></div>'); $("body").append(div); for(var j = i

  • JavaScript实现九九乘法表的简单实例

    每个学过编程的人都写过"HelloWorld" 但99乘法表,我想也应该成为每个编程初学者的必编程序 这是JavaScript的实现方法,非常适合初学者!!! 以下是代码及注释 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript九

随机推荐