前言

本篇文章是对于javaScript中if ,switch,while ,do-while,,for语法的作业练习.对于我来说也是对自己知识掌握的一种检验.

思维导图

1，作业资源

css代码部分: 此文件保存在style.css文件中,因后续所有作业都会使用本次样式

body {
	background-color: #523620;
	color: #fff;
	font-family: 微软雅黑,黑体;
	font-size: 150%;
	margin: 0px 0px 0px 0px;
}

h1 {
	background-image: url('images/bullseye-logo.png');
	background-repeat: no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	height: 109px;
	width: 643px;
	margin: 40px auto;
}

#teacher {
	float:right;
	margin:135px 30px 0px 0px;
}

#page1 {
	background-color: #fecc6f;
	height: 730px;
	padding: 10px;
	min-width: 779px;
}

#answer {
	background-color: #425a5a;
	border: 25px solid #523620;
	border-radius: 20px;
	padding: 40px 20px;
	margin: 0px auto;
	height: 370px;
	width: 600px;
	text-align: center;
}

图片部分在images文件夹中:

2，if语句练习

如果不知道输出文本到页面的基础方面的知识,那么可以看我前面的文章:

JavaScript基础输出

2.1代码解读:

这里是对if语句与else if 语句的练习

其中语法格式为(这里用法与c语言一致):

if{

代码块

}

else if {

代码块

}

<!doctype html>
<html lang="cn">
<head>
<meta charset="utf-8">
<title>if语句练习</title>
<link rel="stylesheet" href="style.css" />
<script>
window.onload= function(){	
	var cash= 160;  //口袋里的现金
	//1.写出if-else语句，分别分为三种情况：
	//现金大于等于150；现金大于等于100并小于150；现金小于100
	if(cash>=150){
		result= '大吃一顿团票看电影';
    }
    else if (100<=cash&&cash<150){
        result= '吃开封菜团票看电影';
    }
    else if(cash<100){
		result= '宿舍吃泡面电脑看电影';
    }
	//将结果输出到网页中
	var el = document.getElementById('answer');
    el.innerHTML = '决定: ' + result;
}
</script>
</head>

<body>
  <section id="page1">
      <h1>Bullseye</h1>
      <img src="images/teacher.png" id="teacher" alt="teacher" />
      <section id="answer"></section>
    </section>
</body>
</html>

2.2,结果展示:

3，switch语句练习

3.1,代码解读:

这里是对switch语句的练习

语法格式:

switch(判断条件)

{

case 条件1: 代码快;break;

case 条件2: 代码块;break;

}

default : 代码块; //如果条件都不都满足,执行代码块

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>switch语句练习</title>
<link rel="stylesheet" href="style.css" />
<script>
window.onload= function(){
	var msg;        //显示的信息
	var level = 2;  //当前第几关
	//1.用level作为switch后的表达式，根据level值写出完整switch语句
    switch (level){
        case 1:msg = '第一关';break;
        case 2:msg = '第二关。继续！';break;
        case 3:msg = '最后一关';break;
        case 4:msg = '好运';break;//默认
    }
	
	//输出到页面
	var el = document.getElementById('answer');
	el.textContent = msg;
}
</script>
</head>
<body>
    <section id="page1">
      <h1>Bullseye</h1>
      <img src="images/teacher.png" id="teacher" alt="teacher" />
      <section id="answer"></section>
    </section>
</body>
</html>

3.2,结果展示:

4.while循环练习

4.1,代码解读:

这里是对于while循环的练习

语法格式:

while(循环条件){

代码块;

控制循环的条件(i++);

}

`${i} * 5 = ${result}<br>` 其中` ` 为使用站位符时必须使用的符号

${}代表站位符,如果学过python就知道,这是在f"{name}"初始化,代表将上面代码中的变量的值填写在其中.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>while循环练习</title>
<link rel="stylesheet" href="style.css" />
<script>
window.onload=function(){
  var i = 1;       //设置循环变量初始值  
  var msg = '';    //显示的信息
  
  //1.用while循环分别计算1至9的5倍
  //将“ix5=?”字符串添加到变量msg中，并添加换行标签。
    while (i < 10) {
        const result = i * 5;
        msg += `${i} * 5 = ${result}<br>`;
        i++;
    }

  //用变量msg的值替换原网页中显示的信息
  //2.写完1-2后将下面语句中的注释符删除
  document.getElementById('answer').innerHTML = msg;
}
</script>
</head>

<body>
    <section id="page1">
      <h1>Bullseye</h1>
      <img src="images/teacher.png" id="teacher" alt="teacher" />
      <section id="answer">1x5=5<br>2x5=10<br>……<br>9x5=45</section>
    </section>
</body>
</html>

4.2.结果展示:

5.do-while循环练习

5.1,代码解读:

这里是对do-while循环的练习

语法格式:

do{

代码块;

}while(控制条件);

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>do-while循环练习</title>
<link rel="stylesheet" href="style.css" />
<script>
window.onload=function(){
  var i = 1;       //设置循环变量初始值
  var msg = '';    //显示的信息
  
  //1.用do-while循环分别计算1至9的5倍
  do{
      const result = i * 5;
      msg += `${i} * 5 = ${result}<br>`;
      i++;
  }while(i<=9);
  
  //用变量msg的值替换原网页中显示的信息
  //2.完成第1步后将下面语句前的注释符删掉
  document.getElementById('answer').innerHTML = msg;
}
</script>
</head>

<body>
    <section id="page1">
      <h1>Bullseye</h1>
      <img src="images/teacher.png" id="teacher" alt="teacher" />
      <section id="answer">1x5=5<br>2x5=10<br>……<br>9x5=45</section>
    </section>
</body>
</html>

5.2,结果展示:

6.for循环练习

6.1,代码解读:

这里是for循环练习

语法格式:

for(定义式;条件判断;迭代){

代码块;

}

字符拼接 + "<br>" 代表换行字符拼接使用 + 号

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>for循环练习</title>
<link rel="stylesheet" href="style.css" />
<script>
window.onload=function(){
  var scores = [90, 70, 50];  //游戏中每一关得分
  var arrayLength = scores.length; //数组长度
  var roundNumber = 0;             //当前第几关
  var msg = '';  //显示的信息
  
  //使用for循环遍历数组scores的元素，显示每关的得分。
  //1.写出for循环的条件
    //2.存放当前关数
    //3.将“第几关”字符串添加到变量msg的值中
    //4.将数组scores中当前关的得分添加到变量msg的值中，并添加换行标签
    for (var i = 0; i < arrayLength; i++) {
        roundNumber += 1;
        msg += '第' + roundNumber + '关'+ ':';
        msg += scores[i] + '<br>';
    }
  //用变量msg的值替换原网页中显示的信息
  //5.写完1-4后将下面语句前的注释符删掉
  document.getElementById('answer').innerHTML = msg;
}
</script>
</head>

<body>
    <section id="page1">
      <h1>Bullseye</h1>
      <img src="images/teacher.png" id="teacher" alt="teacher" />
      <section id="answer">第1关：10<br>第2关：20<br>第3关：30</section>
    </section>
</body>
</html>