JavaScript 基础语法循环案例练习

JavaScript 基础语法循环案例练习

---

前言

之前学习HTML语言属于标记语言，不用向计算机发出指令，常用于格式化和链接，标记语言是用来被读取的，是被动的。而现在学习的JavaScript则属于编程语言，包含很多逻辑性和行为能力的指令。本文记录初入JavaScript时练习编写的几个循环语句条件语句的案例。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、早午晚安喵喵喵

案例描述：
提示用户输入时间，判断时间
6-8点显示‘早安喵’
11-14点显示‘午安喵’
23-24点显示‘晚安喵’
其余时间显示‘喵喵喵’
超过24小时显示‘请重新输入’

<script>
	//if else 语句
    var time = prompt('请输入时间');
    if(time >= 6 && time <= 8){
        alert('早安喵');
    }else if (time >= 11 && time <= 14){
        alert('午安喵');
    }else if (time >= 23 && time <= 24){
        alert('晚安喵');
    }else if (time <= 24 ){
        alert('喵喵喵');
    }else {
        alert('请重新输入时间');
    }
</script>

二、判断奇偶数

案例描述：
提示用户输入一个数，判断其奇偶

 <script>
 	//三元表达式
	//表达式1 ? 表达式2 : 表达式3;     1为真返回2，1为假返回3
        var num = prompt('请输入一个数');
        num % 2 == 0 ? alert(num + '是偶数') : alert(num + '是奇数');
</script>

三、班长请客

案例描述：
询问用户班长有多少钱,根据金钱额度区间显示不同信息

<script>
		//if else语句
        var money = parseInt(prompt('请问班长有多少钱'));
        if (money >= 2000){
            alert('班长请大家吃西餐');
        }else if (money >= 1500){
            alert('班长请大家吃快餐');
        }else if (money >= 1000) {
            alert('班长请大家喝饮料');
        }else if (money >= 500) {
            alert('班长请大家吃棒棒糖');
        }else {
            alert('班长下次可要把钱带够哦!');
        }
</script>

四、1-100跳过个位为3的数求和

案例描述:
100以内除去个位数为三的数之和

<script>
        var sum = 0 ;
        for (var i = 1; i <= 100; i++) {
        	 //  个位数为3 = 减去3能被10 整除
            if ((i - 3) % 10 == 0) {    
                continue;  //跳过本次循环
            }
            sum += i;
        }
        alert('100以内跳过个位数为3的数的和为:' + sum);
    </script>

五、第几个能被7和3整除的数

案例描述：
提示用户输入需要第几个能被3和7整除的数

<script>
        var arr = [];   //定义一个数组存放能被整除的数
        var count = parseInt(prompt('请问你需要第几个能被3和7整除的数'));
    //方法一    //缺点，只能找到1000以内的数
         for ( var i = 0; i <= 1000; i++ ) {
             if (i % 3 == 0 && i % 7 == 0) {
                arr[arr.length] = i; 
             }  
         }
         //打印索引为count-1的数即第count个数
          console.log(arr[count-1]);  

	//方法二
        var i = 0;
         while (arr.length !== count) {
             if (i % 3 == 0 && i % 7 == 0) {
                 arr[arr.length] = i;
             }
             i++;
         }
        console.log(arr[count - 1]);
        alert(arr[count - 1])
        
    </script>

六、双重for循环矩形三角形

案例描述：
双重for循环打印矩形三角形

 <script>

        // 打印矩形
        var row = parseInt(prompt('请输入矩形行数'));
        var col = parseInt(prompt('请输入矩形列数'));
        var str = '';
        for (var i = 1;i <= row; i++) {
            for (var j = 1; j <= col; j++){
                str = str + '💗';
            }
            str = str + '\n';
        }
        console.log(str);
        alert(str);

        // 打印正三角
        var strr = '';
        var roww = parseInt(prompt('请输入正三角行数'));
        for (var i = 1; i <= roww; i++) {
            for (var j = 1; j <= i; j++) {
                strr += '💗';
            }
             strr += '\n';
        }
        console.log(strr);
        alert(strr);

        // 打印倒三角
        var strrr = '';
        for (var i = 1; i <= 5; i++) {
            for (var j = i; j <= 5; j++) {
                strrr += '💗';
            }
             strrr += '\n';
        }
        console.log(strrr);
        alert(strrr);
    </script>

七、九九乘法表

案例描述：
双重for循环打印九九乘法表

<script>
        var str = '';
        for (var i =1; i <=9; i++) {
            for (var j = 1; j <= i; j++) {
                // 2 x 4 = 8   列数 x 行数 =（列乘行计算后的数）加tab空格
                str += j + 'x' + i + '=' + i * j + '\t';
            }
            // 一行循环完后加换行符
            str += '\n';
        }
        console.log(str);
        alert(str);
    </script>

八、ATM机

案例描述：
模拟ATM机操作
预存余额100元
提示用户选择操作，执行后显示余额

var money = 100;
     
        do{
            var caozuo = parseInt(prompt('请输入您要的操作: \n 1、存钱 \n 2、取钱 \n3、显示余额 \n4、退出'));
        switch (caozuo) {
            case 1 :
                var cunru = parseInt(prompt('请输入你要存入的金额:'));
                money = money + cunru
                alert('当前余额为'+ money );
                break;
            case 2 :
                var quchu = parseInt(prompt('请输入你要取出的金额'));
                money = money - quchu
                alert('当前余额为'+ money );
                break;
            case 3 :
                alert('你当前的余额为'+ money);
                break;
            case 4 :
                // alert('您已退出!');
                break;
            default :
                alert('无此操作，请重新选择');
        }

        } while( caozuo !== 4);
        alert('你已退出');

    </script>

九、冒泡排序

案例描述:
将数组中的数按照从大到小的顺序排列

 <script>
        // 冒泡排序
        var arr = [5,2,4,3,1];
        //外层循环管趟数
        for (var i = 0; i <= arr.length - 1; i++) {   
            // 里面的循环管每一趟的交换次数 
            for (var j = 0; j <= arr.length - i - 1; j++){
                // 内部交换2个变量的值 前一个和后一个数组元素相比较
                if (arr[j] < arr[j+1]) {
                    // 定义一个空变量用来辅助交换位置
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        console.log(arr);     
    </script>

---

总结

以上是利用条件语句及循环语句编写的小案例练习。虽然循环语句书写简单，但编写时的逻辑性很强，一个案例可以有多种实现方法，还需要多看案例，积累算法经验，找到最适合的算法。
加油加油！