JavaScript基础练习集1

已于 2024-03-18 09:46:15 修改
阅读量1k 收藏 9
点赞数 4
分类专栏： # JavaScript 文章标签： 算法 javascript 学习
于 2023-10-17 10:33:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sakurapaid/article/details/133877352
版权

前言

本博客文章已收录至JavaScript专栏，阅读其他有关博客笔记请转至该专栏下查阅

传送门 -> JavaScript_程序员雨空集

实验二

实验2-1 根据平均分来划分等级

题目

  1. 在弹出框中依次输入语文、数学、英语、化学、历史分数。
  2. 计算平均分
  3. 等级：如果平均分大于等于90为优秀，小于90大于等于80为良好，小于80大于等于70为一般，小于70大于等于60为较差，小于60为很差
  4. 页面弹出框告知等级
  5. 用swich_case方式实现

代码示例

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>根据平均分来划分等级</title>  
</head>  
<body>  
    <script>
        var scores = [parseInt(prompt("请输入语文分数")), parseInt(prompt("请输入数学分数")), 
        parseInt(prompt("请输入英语分数")), parseInt(prompt("请输入化学分数")), 
        parseInt(prompt("请输入历史分数"))];
        var sum = 0;
        for (var i = 0; i < scores.length; i++) {
            sum += scores[i];
        }
        var average = sum / scores.length;
        var grade;
        switch (true) {
            case average >= 90:
                grade = "优秀";
                break;
            case average >= 80:
                grade = "良好";
                break;
            case average >= 70:
                grade = "一般";
                break;
            case average >= 60:
                grade = "较差";
                break;
                default:
            grade = "很差";
            }
            document.write("你的等级是：" + grade);
    </script>
</body>  
</html>

效果展示

（1）全部输入90，输出“优秀”

（2）全部输入1，输出“很差”

实验2-2 加油优惠价格计算

题目

  • 已知92号汽油，每升6元；如果大于等于20升，那么每升5.9；
  • 已知97号汽油，每升7元；如果大于等于40升，那么每升6.5
  • 编写JS程序，用户输入自己的汽油编号，然后输入自己加多少升，弹出价格
  • 输入汽油编号。
  • 输入想要加的油量。
  • 根据编号和油量来规定单价、计算总价
  • 页面中输出单价和总价钱

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加油优惠价格计算</title>
</head>
<body>
    <script>
        // 用户输入汽油编号
        var gasType = prompt("请输入汽油编号（92或97）：");
        // 用户输入加油量
        var gasAmount = prompt("请输入加油量（升）：");

        // 根据用户输入的汽油编号和加油量计算价格
        var price = 0;
        var price02 = 0;
        if (gasType === "92") {
            if (gasAmount >= 20) {
                price = gasAmount * 5.9;
                price02 = 5.9;
            } else {
            price = gasAmount * 6;
            price02 = 6;
            }
        } else if (gasType === "97") {
            if (gasAmount >= 40) {
            price = gasAmount * 6.5;
            price02 = 6.5;
            } else {
            price = gasAmount * 7;
            price02 = 7;
            }
        }
        // 输出价格
        document.write("汽油" + price02 + "元一升；");
        document.write("共计：" + price + "元");
    </script>
</body>
</html>

效果演示

实验2-3 统计成绩最大值和最小值

题目

输入小明的5门成绩，计算出总分，平均分、最高分，最低分。

  1. 定义一个数组arr，存放5门成绩。
  2. 定义总分变量sum=0。
  3. 定义最高分变量max=0。
  4. 定义最低分变量min=100。
  5. for循环遍历数组arr。
  6. 输出结果。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计最大值和最小值</title>
</head>
<body>
    <script>
        // 定义一个数组arr，存放5门成绩
        var arr = [];  
        var sum = 0;
        var max = -Infinity; // 初始化为负无穷大
        var min = Infinity; // 初始化为正无穷大
        // 输入5门成绩，并将其存入数组arr中 
        for (var i = 0; i < 5; i++) { 
            var score = parseInt(prompt("请输入第" + (i+1) + "门成绩：")); 
            arr.push(score);
            sum += score;
            if (score > max) { 
                max = score; 
            } 
            if (score < min) { 
                min = score; 
            } 
        }
        // 计算平均分
        var average = sum / 5; 
        // 输出结果，用wirte形式 
        document.write("5门成绩分别是："+arr[0]+","+arr[1]+","+arr[2]+","+arr[3]+","+arr[4] + "<br>");
        document.write("总分是：" + sum + "<br>");
        document.write("平均分：" + average + "<br>");
        document.write("最高分：" + max + "<br>");
        document.write("最低分：" + min + "<br>");
    </script>
</body>
</html>

效果演示

实验2-4 while、do..while验证用户名和密码

题目

在网站上登录时会用到表单，让用户属于用户名和密码，输入正确才可以进入，本案例将采用while do..while两种循环方式来进行用户名和密码的验证。

  1. 用户输入用户名。
  2. 用户输入密码。
  3. 输入的内容，如果符合语句中的条件则提示“登录成功”，不符合时提示“用户名或者密码有误”，让你一直输入用户名和密码，直到输入正确为止。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录验证</title>
</head>
<body>
    <script>
        var username = "admin";
        var password = "123456";
        var flag = false;

        while(flag === false) {
            var inputUsername = prompt("请输入用户名");
            var inputPassword = prompt("请输入密码");
            if (inputUsername === username && inputPassword === password) {
                alert("登录成功");
                flag = true;
            } else {
                alert("用户名或密码错误");
            }
        }
    </script>
</body>
</html>

效果演示

  1. 先验证正确的

  1. 再验证错误的

实验2-5 按从大到小排序

题目

给出一组数，按照从大到小进行冒泡排序，从大到小序列输出。

  1. 定义数组arr，里边存放8个元素。
  2. 采用冒泡排序（共循环8-1次）
  3. 第一轮是比较7次 结果：（70 67 49 35 59 98 100 20）。
  4. 第二轮是比较6次 结果：（70 67 49 59 98 100 35 20）。
  5. 第三轮是比较5次 结果：（70 67 59 98 100 49 35 20）。
  6. 第四轮是比较4次 结果：（70 67 98 100 59 49 35 20）。
  7. 第五轮是比较3次 结果：（70 98 100 67 59 49 35 20）。
  8. 第六轮是比较2次 结果：（98 100 70 67 59 49 35 20）。
  9. 第七轮是比较1次 结果：（100 98 70 67 59 49 35 20）。
  10. 最后输出排序结果

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按从大到小排序</title>
</head>
<body>
    <script>
        // 定义数组arr
        var arr = [70, 67, 49, 35, 59, 98, 100, 20];
        // 冒泡排序
        for (var i = 0; i < arr.length - 1; i++) {
            for (var j = 0; j < arr.length - 1 - i; j++) {
                if (arr[j] < arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        // 弹出窗口显示排序后的数组
        alert(arr);
    </script>
</body>
</html>

效果演示

拓展2-1 三元运算符比较最大值

题目

给出3个数，在JavaScript中判断最大值，最小值。语法是 条件表达式？表达式1：表达式2。

  1. 在<script>中定义3个数。
  2. 运用三元运算符做比较。
  3. 输出最大值。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三元运算符比较最大值</title>
</head>
<body>
    <script>
        let num1 = 10;
        let num2 = 200;
        let num3 = 30;
        //条件表达式
        //num1>num2的话，就num1和num3去比
        //num1<num2的话，就num2和num3去比
        let max = ( num1 > num2 ? (num1 > num3 ? num1 : num3) : (num2 > num3 ? num2 : num3) );
        window.alert(max)
        console.log(max); 

    </script>
</body>
</html>

效果演示

拓展2-2 判断时间段

题目

使用比较运算符通过弹出框提示用户输入时间信息，根据用户输入的时间弹出问候信息。

  1. 用户输入的时间在6-12之间 弹出“上午好”
  2. 用户输入的时间在13-18之间 弹出“下午好”
  3. 用户输入的时间在19-23之间 弹出“晚上好”
  4. 用户输入的时间在0-5之间 弹出“这是休息时间，不要说话！”

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>判断时间段</title>
</head>
<body>
    <script>
        var InputNum = prompt("您输入的数字是(0~23之间)");
        if (InputNum) {
            InputNum = parseInt(InputNum);
            if (InputNum >= 6 && InputNum <= 12) {
                alert("上午好");
            } else if (InputNum >= 13 && InputNum <= 18) {
                alert("下午好");
            } else if (InputNum >= 19 && InputNum <= 23) {
                alert("晚上好");
            } else if (InputNum >= 0 && InputNum <= 5) {
                alert("这是休息时间，不要说话！");
            } else {
                alert("请输入正确的数字！");
            }
            } else {
        alert("请输入数字！");
        }
    </script>
</body>
</html>

效果演示

  1. 输入0-5之间

  1. 输入6-12之间

  1. 输入13-18之间

  1. 输入19-23之间

  1. 什么都不输入

拓展2-3 求字符串数组中每一项的长度

题目

已知一个字符串数组，求字符串数组中每一个字符的长度，存储到一个新的数组中。

  1. 定义一个数组array，存放字符串元素。
  2. 定义个新数组newArray，用来存放字符串长度。
  3. for循环遍历array数组，并把每一项元素的长度赋值给newArray。
  4. 输出newArray新数组。

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>求字符串数组中每一项的长度</title>
</head>

<body>
    <script>
        let array = ['hello', 'world', 'JavaScript'];
        let newArray = [];
        // for循环遍历array数组，并把每一项元素的长度赋值给newArray
        for (let i = 0; i < array.length; i++) {
            newArray[i] = array[i].length;
        }
        // 输出newArray新数组
        window.alert(newArray);
    </script>
</body>

</html>

效果演示

拓展 2-4 输出数组长度

题目

数组中保存五个学生的数学成绩，遍历数组分别获取每一个学生的数学成绩分数，用length()函数获取数组的长度。

  1. 给数组arr赋值，存放5名同学的数学成绩。
  2. 使用length遍历数组。
  3. 输入每个同学的分数。
  4. 最后输出数组的长度。

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输出数组长度</title>
</head>
<body>
    <script>
        let arr = [];
        let length = 5;
        // 输入每个同学的分数
        for (let i = 0; i < length; i++) {
            arr[i] = prompt("请输入第" + (i + 1) + "个同学分数");
        }
        // 使用length遍历数组
        for (let i = 0; i < arr.length; i++) {
            console.log("第" + (i + 1) + "个同学的分数是：" + arr[i]);
        }
        console.log("数组长度为" + length);
    </script>
</body>
</html>

效果演示

拓展2-5 数组分隔

题目

将字符串数组用|或其他符号分割，使用for循环遍历数组，并打印出分隔之后的数组。

  1. 在数组中定义字符串函数aa,bb,cc,ee。
  2. 定义分隔符为 |。
  3. 输出aa|bb|cc|ee。

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组分隔</title>
</head>

<body>
    <script>
        let arr = ['aa', 'bb', 'cc', 'ee'];
        let delimiter = '|';
        // 初始化结果字符串
        let result = '';
        // 使用循环遍历数组
        for (let i = 0; i < arr.length; i++) {
            // 将当前元素与分隔符连接起来
            result += arr[i];
            // 如果不是最后一个元素，添加分隔符
            if (i !== arr.length - 1) {
                result += delimiter;
            }
        }
        // 输出结果
        console.log(result);

    </script>
</body>

</html>

效果演示

雨空集
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript基础练习
weixin_44440403的博客
01-07 814
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script type="text/javascript"&
JavaScript基础练习题（二）
热门推荐
qqatt的博客
12-29 1万+
一、单选题（共30题，每题2分） 得分：2.0分 1. 已知数组 var arr = [1,2,3,4,5],执行 arr.pop() 后，数组的长度是 A 4 B 5 C 6 D 7 正确答案: A 解析: arr.pop()是删除数组后一个数据 得分：2.0分 2. Math.floor(-3.14) 的结果是（ ） A -3.14 B -3 C -4 D 3.14 正确答案: C 解析: 得...
javascript练习
09-20
其中包含javaScript上机题目，以及答案源码 题目如下 1、 页面两侧的可关闭的对联广告 2、 窗口加载的时候打开一个无状态栏，地址栏的广告窗口 3、 页面中五张轮换播放的最新产品图片 4、 用户名和密码不能为空，用户名只能是数字和字母，密码长度长度大于6位,如果填写不正确用消息框提示错误的消息,并不提交表单如果正确则提交表单 5、 注意代码的规范 6、 使用外部js
JavaScript-练习
StupidlyGrass的博客
02-01 482
JavaScript练习
JavaScript 的基础练习题
最新发布
正是修行时，正是修行时，正式修行时...
07-16 324
js 的基础练习题
JavaScript练习
yyshln的博客
10-30 333
数组类型 var person={ firstnaem: "Bill", lastname: "Gates", id :5566 }; document.write(person.lastname+""); document.write(person["id"]+"");
JavaScript练习(一)
任海丽(3G/移动开发)
02-21 2306
1、用脚本实现上图所示的结果，打印所选择的； 用到的方法： getElementsByTagName() 说明          1、查询给定标签名的所有元素          2、因为在html页面中，标签名不是唯一的，所以返回值为节点的集合。          3、这个集合可以当做数组来处理,length属性为集合里所有元素的个数          4、可以有两种形式来执
JavaScript练习题
Wanan_J的博客
01-13 1546
JavaScript练习题：用于初学者练习的小作业。
Javascript练习题
05-07
这是我自己整理出来的Javascript练习题，非常全面，里面有单选、多选、判断、填空、问答、编程题。
javascript 练习
weixin_30721077的博客
03-13 110
今日练习题打卡 问题：输入m.n参数，获取一个m长度的都是n的数组，不能用循环 之前没有用过这个方法，所以第一反应也没想起来，现在来了解一下这个方法加深一下印象吧！ 第一个参数value是必填参数，作为填充数组的元素，第二、三个参数为可选，分别代表填充的起始位置和终止位置， 填充时 从起始位置开始 至终止位置，终止位置的元素不进行填充 看下面的例子 输入三个参数时：填充...
JavaScript相关练习
m0_51858205的博客
11-24 780
(1）单击“随机产生-20个整数”投钮时，能的随机生成20个 4 位整数 （1000~-9099)。并将产生的20 个整数写人到数组中，，将其从小到大进行排序，输出在我行文本框中。 （2） 单击“找出能微5始除的整数，拉钮时，找出能生被了整除的整数，并在多行文本框中输出; （3）单击“重置”按钮时，将多行文本框中的所有内容清空。
JavaScript的简单练习（每日一练）
qq_53306713的博客
03-17 641
JavaScript的简单练习（每日一练）
JavaScript语法基础学习指南
莫振杰所著的《JavaScript基础教程》是另一本针对Web前端新手的教材，它结合了作者的实际开发经验，以通俗易懂的语言讲解JavaScript，强调编程思维的培养，并通过实例帮助学习者建立流畅的学习路径。全书分为基本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雨空集

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值