任务1：输出”金字塔“
任务描述：
金字塔是世界建筑的奇迹之一。本案例将利用循环语句以及条件判断语句输出一个由“*”组成的金字塔形状的图形（下称金字塔）。
金字塔的层数是由用户输入的，例如，用户输入5，表示输出5层的金字塔，顶端为金字塔的第1层，金字塔从第1层起，每层的“*”遵循“1、3、5、7、9、11，…”的规律。本程序需要判断用户输入的值是否为纯数字。
下面以5层金字塔为例，案例效果如下。
任务分析：
每层中“*”的数量 = 当前层数 × 2 - 1。例如当前为第4层，则“*”数量 = 4 × 2-1=7。
每层“*”前的空格 = 金字塔层数 – 当前层数。例如当前行数为第3层，则空格数= 5 – 3 =2。
案例的实现思路：
声明变量，用于接收用户输入的金字塔层数。
判断用户输入的数据是否为纯数字。
外层for语句控制金字塔的层数。
内层for语句控制“*”前的空格和“*”的数量。
任务实现：
<script>
var str="";
var level = prompt('请设置金字塔的层数'); //获取金字塔的层数
//判断用户输入的数据是否合法
if (isNaN(level)){
alert('金字塔的层数必须是纯数字');
}
//循环遍历金字塔的层数
for(var i=1;i<=level;i++){
//计算*前面的空格并且累加到str
var blank=level-i;
for(var k=1;k<=blank;k++){
str+=" ";
}
//计算*的数量并且累加到str
var star=i*2-1;
for(j=0;j<star;j++){
str+="*";
}
//换行
str+="\n";
}
console.log(str);
</script>
任务二：输出影厅座位图
任务描述：
万达影城7号厅的观众席有4排，每排有10个座位，其中，3排5座和3排6座已经出售，在页面中输出该影厅当前的座位图。
任务分析：
通过循环语句的嵌套输出座位图，其中用if语句判断是否为3排3座和3排6座，如果是则用continue语句跳出本次循环。
任务实现：
<body bgcolor="#F3F3F3">
<hr width="500" size="5">
<center>万达影城7号厅</center>
<br><br>
<script type="text/javascript">
document.write("<table align='center'>");//输出表格标签
for(var i = 1; i <= 4; i++){//定义外层for循环语句
document.write("<tr height=70>");//输出表格行标签
for(var j = 1; j <= 10; j++){//定义内层for循环语句
if(i == 3 && j == 5){//如果当前是3排5座
document.write("<td align='center' width=80 background=yes.png>已售</td>");//将座位标记为“已售”
continue;//应用continue语句跳过本次循环
}
if(i == 3 && j == 6){//如果当前是3排6座
document.write("<td align='center' width=80 background=yes.png>已售</td>");//将座位标记为“已售”
continue;//应用continue语句跳过本次循环
}
document.write("<td align='center' width=80 background=no.png>"+i+"排"+j+"座"+"</td>");//输出排号和座位号
}
document.write("</tr>");//输出表格行结束标签
}
document.write("</table>");//输出表格结束标签
</script>
</body>
素材下载：
任务三：循环输出年份和月份
任务要求：
为了使用户能够方便地选择年、月、日等日期方面的信息，可以把它们放在下拉列表中。编写程序，通过循环语句输出年份和月份，实现效果如下图所示；
任务分析：
通过循环语句输出年份和月份。
任务实现：
<body>
请选择您的出生年月：
<script type="text/javascript">
document.write("<select name='year'>");
for(var i=1980;i<2000;i++){
document.write("<option value='"+i+"'"+(i==1985?"selected":"")+">"+i+"年</option>");
}
document.write("</select> ");
document.write("<select name='month'>");
for(var i=1;i<=12;i++){
document.write("<option value='"+i+"'>"+i+"月</option>");
}
document.write("</select>");
</script>
</body>
原创视频
