#JavaScript（作业01）

bestwishesn

已于 2023-09-06 20:13:37 修改

阅读量147

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-09-06 18:37:36 首次发布

本文链接：https://blog.csdn.net/2301_79501633/article/details/132720956

版权

一，if-else语句练习：

题目描述：

//1.写出if-else语句，分别分为三种情况：

//现金大于等于150；现金大于等于100并小于150；现金小于100

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>if语句练习</title>
	<link rel="stylesheet" href="style.css" />
	<script>
		window.onload = function () {
			//定义初始result
			let result = ''
			let cash = 160;  //初始口袋里的现金
			cash = +prompt('你现在有多少钱：')//添加弹出框
			//1.写出if-else语句，分别分为三种情况：
			//现金大于等于150；现金大于等于100并小于150；现金小于100
			if (cash >= 150) {
				result += '大吃一顿团票看电影';
			}
			else if (cash >= 100 && cash < 150) {
				result += '吃开封菜团票看电影';
			}
			else if (cash < 100) {
				15
				result += '宿舍吃泡面电脑看电影';
			}
			//可优化if-else 语句用三目运算符
			// cash >= 150 ? `大吃一顿团票看电影` : (cash >= 100 ? `吃开封菜团票看电影` : `宿舍吃泡面电脑看电影`);
			//将结果输出到网页中
			let el = document.querySelector('#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>

二，switch语句练习

题目描述： //1.用level作为switch后的表达式，根据level值写出完整switch语句

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>switch语句练习</title>
	<link rel="stylesheet" href="style.css" />
	<script>
		window.onload = function () {
			let msg;        //显示的信息
			let level = 2;  //当前第几关
            let level =  +prompt('输入Level的值（1-3）')
			//1.用level作为switch后的表达式，根据level值写出完整switch语句
			switch (level) {
				case 1:
					msg = '第一关';
					break;
				case 2:
					msg = '第二关。继续！';
					break;
				case 3:
					msg = '最后一关';
					break;
				default:
					msg = '好运';
			}

			//输出到页面
			let el = document.querySelector('#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>

三，while语句练习

题目描述：

//1.用while循环分别计算1至9的5倍

//将“ix5=?”字符串添加到变量msg中，并添加换行标签

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>while循环练习</title>
  <link rel="stylesheet" href="style.css" />
  <script>
    window.onload = function () {
      let i = 1;       //设置循环变量初始值
      let msg = '';    //显示的信息

      //1.用while循环分别计算1至9的5倍
      //将“ix5=?”字符串添加到变量msg中，并添加换行标签。
      while (i <= 9) {
        let result = i * 5
        msg += `${i}x5=${result}`
        //在msg中添加换行标签
        msg += '<br>';
        //将i的值加1
        i++;
      }
      //用变量msg的值替换原网页中显示的信息
      //2.写完1-2后将下面语句中的注释符删除
      document.querySelector('#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>

四，do-while语句练习.

题目描述： //1.用do-while循环分别计算1至9的5倍

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>do-while循环练习</title>
  <link rel="stylesheet" href="style.css" />
  <script>
    window.onload = function () {
      //1.用do-while循环分别计算1至9的5倍
      //声明一个变量i，初始值为1
      let i = 1;
      //声明一个变量msg，初始值为空字符串
      let msg = '';
      //使用do-while循环，先执行一次循环体，然后判断i是否小于等于9，如果是则继续执行循环体
      do {
        //计算i的5倍，赋值给一个变量result
        let result = i * 5;
        //将“ix5=result”字符串添加到msg中，使用反引号和模板字面量
        msg += `${i}x5=${result}`;
        //在msg中添加换行标签
        msg += '<br>';
        //将i的值加1
        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>

五，for循环练习

题目描述：

//使用for循环遍历数组scores的元素，显示每关的得分。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>for循环练习</title>
  <link rel="stylesheet" href="style.css" />
  <script>
    window.onload = function () {
      let scores = [90, 70, 50];  //游戏中每一关得分
      let arrayLength = scores.length; //数组长度
      let roundNumber = 0;             //当前第几关
      let msg = '';  //显示的信息

      //使用for循环遍历数组scores的元素，显示每关的得分。
      //1.写出for循环的条件
      for (let i = 0; i < arrayLength; i++) {
        //   2.存放当前关数
        roundNumber += 1;
        //   3.将“第几关”字符串添加到变量msg的值中
        //   msg ;
        msg += `第${roundNumber}关`
        //   4.将数组scores中当前关的得分添加到变量msg的值中，并添加换行标签
        //   msg ;
        msg += `当前得分为${scores[i]}`
        msg += `<br>`
      }

      //用变量msg的值替换原网页中显示的信息
      //5.写完1-4后将下面语句前的注释符删掉
      document.querySelector('#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>