JS一些简单案例

各种简单案例

变量案例弹出用户名

题目：
1、弹出一个输入框，提示用户输入姓名。
2、弹出一个对话框，输出用户刚才输入的姓名。

// 1、用户输入姓名 存储到一个 myname 的变量里面
var myname = prompt('请输入您的名字');
// 2、输出这个用户名
alert(myname);

显示年龄案例

题目：
弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示 “您今年XX岁了” （XX表示刚才输入的年龄）
思路：
弹出一个输入框（prompt），让用户输入年龄（用户输入）
把用户输入的值用变量保存起来，把刚才输入的年龄与所要输出的字符串拼接（程序内部处理）
使用 alert 语句弹出警示框（输出结果）

var age = prompt('请输入您的年龄');
var str = '您今年已经' + age + '岁了';
alert(str);

计算年龄案例

题目：
要求在页面中弹出一个输入框，我们输入出生年份后，能计算出我们的年龄
思路：
弹出一个输入框（prompt），让用户输入出生年份（用户输入）
把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄（程序内部处理）
弹出警示框（alert），把计算的结果输出（输出结果）

var year = prompt('请您输入您的出生年份');
var age = 2022 - year; // year 取过来的是字符串型 但是这里用的减法 有隐式转换
alert('您今年已经' + age + '岁了');

简单加法器案例

题目：
计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果。
思路：
先弹出第一个输入框，提示用户输入第一个值 保存起来
再弹出第二个框，提示用户输入第二个值 保存起来
把这两个值相加，并将结果赋给新的变量（注意数据类型转换）
弹出警示框（alert），把计算的结果输出（输出结果）

var num1 = prompt('请您输入第一个值：');
var num2 = prompt('请您输入第二个值：');
var result = parseFloat(num1) + parseFloat(num2);
alert('您的结果是：' + result);

进入网吧案例

题目：
弹出一个输入框，要求用户输入年龄，如果年龄大于等于18岁，允许进入网吧，否则回家写作业去
思路：
弹出 prompt 输入框，用户输入年龄，程序把这个值取过来保存到变量中
使用 if 语句来判断年龄，如果年龄大于 18 就执行 if 大括号里边的输出语句

var age = prompt('请输入您的年龄：');
if (age >= 18) {
	alert('您已成年，请到前台激活');
} else {
	alert('滚回家做作业去');
}

判断闰年案例

题目：
接收用户输入的年份，如果是闰年就弹出闰年，否则弹出是平年
思路：
1、算法：能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被400整除的就是闰年
2、弹出 prompt 输入框，让用户输入年份，把这个值取过来保存到变量中
3、使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行 else 里面的输出语句
4、一定要注意里面的且 && 还有 || 的写法，同时注意判断整除的方法是取余为 0

var year = prompt('请您输入年份：');
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            alert('您输入的年份是闰年');
        } else {
            alert('您输入的年份是平年');
        }

判断成绩级别案例

题目：
接收用户输入的分数，根据分数输出对应的等级字母A、B、C、D、E。其中：
90分（含）以上，输出：A，
80分（含）~90分（不含），输出：B
70分（含）~80分（不含），输出：C
60分（含）~70分（不含），输出：D
60分（不含）以下，输出：E
思路：
1、按照从大到小判断的思路
2、弹出 prompt 输入框，让用户输入分数（score），把这个值取过来保存到变量中
3、使用多分支 if else if 语句来分别判断输出不同的值

var score = prompt('请您输入分数');
        if (score >= 90) {
            alert('宝贝，你是我的骄傲');
        } else if (score >= 80) {
            alert('宝贝，你已经很出色了');
        } else if (score >= 70) {
            alert('你要继续加油哦');
        } else if (score >= 60) {
            alert('孩子，你很危险');
        } else {
            alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');
        }

数字补0案例——适用于倒计时的使用

题目：
用户输入数字，如果数字小于10，则在前面补0，比如01，09，如果数字大于10，则不需要补，比如20。
思路：
1、用户输入0~59之间的一个数字
2、如果数字小于10，则在这个数字前面补0，（加0 拼接）否则 不作操作
3、用一个变量接受这个返回值，输出

var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');
        // 三元表达式  表达式 ？表达式1 ：表达式2
        var result = time < 10 ? '0' + time: time; // 把返回值赋值给一个变量
        alert(result);

查询水果案例

题目：
用户在弹出框里面输入一个水果，如果有就弹出该水果的价格，如果没有该水果就弹出“没有此水果”。
思路：
1、弹出 prompt 输入框，让用户输入水果名称，把这个值取过来保存到变量中。
2、将这个变量作为 switch 括号里面的表达式。
3、弹出不同价格即可。同样注意每个 case 之后加上 break ，以便退出 switch 语句。
4、将 default 设置为没有此水果。

var fruit = prompt('请输入您要查询的水果：');
        switch (fruit) {
            case '苹果':
                alert('苹果的价格是 3.5/斤');
                break;
            case '榴莲':
                alert('榴莲的价格是 35/斤');
                break;
            default:
                alert('没有此水果');           
        }

for循环案例

求1-100之间所有整数的累加和

思路：
1、需要循环100此，我们需要一个计时器 i
2、我们需要一个存储结果的变量 sum，但是初始值一定是0
3、核心算法：1+2+3+4…，sum = sum + i；

var sum = 0; // 求和 的变量
for (var i = 0; i <= 100; i++) {
    sum = sum + i;
}
console.log(sum);

求1-100之间所有数的平均值

需要一个sum 和的变量， 还需要一个平均值 average 变量

var sum = 0;
var average = 0;
for (var i = 1; i <= 100; i++) {
    sum = sum + i;
}
average = sum / 100;
console.log(average);

求1-100之间所有偶数和奇数的和

我们需要一个偶数的和变量 even 还需要一个奇数 odd

var even = 0;
var odd = 0;
for (var i = 1; i <= 100; i++){
    if (i % 2 ==0){
      even = even + i;
   } else {
       odd = odd + i;
    }
}
console.log('1~100 之间所有的偶数和是' + even);
console.log('1~100 之间所有的奇数和是' + odd);

求1-100之间所有能被3整除的数字的和

var result = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 3 == 0) {
         result = result + i;
    }
}
console.log('1~100 之间所有能被3整除的数字的和是' + result);

求学生成绩案例

题目：
要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩。
思路：
1、弹出输入框输入总的班级人数（num）
2、依次输入学生的成绩（保存起来 score），此时我们需要用到for循环，弹出的次数跟班级总人数有关系 条件表达式 i <= num
3、进行业务处理：计算成绩。先求总成绩（sum），之后求平均成绩（average）
4、弹出结果

 var num = prompt('请输入班级的总人数：'); // num 总的班级人数
        var sum = 0; // 求和的变量
        var average = 0; // 求平均值的变量
        for (var i = 1; i <= num; i++) {
            var score = prompt('请您输入第' + i + '个学生的成绩');
            // 因为从prompt取过来的数据是 字符串类型，需要转换为数字型
            sum = sum + parseFloat(score);
        }
        average = sum / num;
        alert('班级总的成绩是' + sum);
        alert('班级平均分是：' + average);

一行打印多个星星案例

采取追加字符串的方式，利用一个空的字符串来写

var num = prompt('请输入星星的个数');
        var str = '';
        for (var i = 1; i <= num; i++) {
            str = str + '☆'
        }
        alert(str)
            // console.log(str);

打印n行n列的星星案例

要求用户输入行数和列数，之后在控制台打印出用户输入行数和列数的星星。

var rows = prompt('请输入行数：');
        var cols = prompt('请输入列数：');
        var str = '';
        for (var i = 1; i <= rows; i++) {
            for (var j = 1; j <= cols; j++) {
                str = str + '★';
            }
            str += '\n';
        }
        console.log(str);

九九乘法表案例

一共有9行，但是每行的个数不一样，因此需要用到双重 for 循环
外层的 for 循环控制行数 i ，循环9次，可以打印 9 行
内层的 for 循环控制每行公式 j
核心算法： 每一行公式的个数正好和行数一致， j <= i ;
每行打印完毕，都需要重新换一行

var str = '';
        for (var i = 1; i <= 9; i++) { //外层循环控制行数
            for (var j = 1; j <= i; j++) { //里层循环控制每一行的个数 j <= i
                // 1 x 2 = 2
                // str = str +'★'
                str += j + 'x' + i + '=' + i * j + '\t';
            }
            str += '\n';
        }
        console.log(str);

ATM取款机案例

里面现存有100块钱
如果存钱，就用输入钱数加上现存的钱数，之后弹出显示余额提示框
如果取钱，就减去取的钱数，之后弹出显示余额提示框
如果显示余额，就输出余额
如果退出，弹出退出信息提示框

var money = 100;
        var price = 0;
        while (num != 4) {
            var num = prompt('请输入你要的操作:\n1.存钱\n2.取钱\n3.显示余额\n4.退出')
            switch (num) {
                case '1':
                    price = prompt('输入要存的钱数；');
                    money = money + parseFloat(price);
                    alert('您的余额；' + money);
                    continue;
                case '2':
                    price = prompt('输入你要取出的钱: ');
                    if (price > money) {
                        alert('对不起当前您的余额不足');
                    } else {
                        money = money - parseFloat(price);
                    }
                    alert('您的余额' + money);
                    continue;
                case '3':
                    alert('您的余额：' + money);
                    continue;
                case '4':
                    alert('正在退出...')
                    break;
            }
        }