search

Wscats / CV

:see_no_evil:Front End Engineer Curriculum Vitae - 面试宝典和简历生成器
http://wscats.github.io/CV/omi/build/index.html
1.04k stars 203 forks source link

day2 #16

Closed Wscats closed 7 years ago

Wscats commented 7 years ago

01判断奇数偶数.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01判断奇数偶数</title>
    <style>
        .even{color:#f00;}
        .odd{color:#0f0;}
    </style>
    <script>
        // 判断一个数是偶数还是奇数，并输出判断结果；

        function oddEven(){
            // 先获取输入的数字
            var num = document.getElementById('num');
            var _num = num.value;

            // 获取输出信息的元素
            var output = document.getElementById('output');

            // 判断奇偶
            // 通过判断是否能被2整除，如果能被2整除，则为偶数，否则为奇数
            if(_num%2 === 0){
                // alert('偶数');
                // 如何把信息写入html元素：innerHTML
                // 的
                output.innerHTML = '<span class="even">偶数</span>';
            }else{
                // alert('奇数');
                output.innerHTML = '<span class="odd">奇数</span>';
            }
        }
    </script>
</head>
<body>
    <input type="number" id="num"><button onclick="oddEven()">判断奇偶</button>
    <div id="output"></div>
</body>
</html>
Wscats commented 7 years ago

02判断为星期几.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02判断为星期几</title>
    <script>
        /* 
            输入数字，显示星期几
                0:星期天
                1:星期一
                2:星期二
                3:星期三
                4:星期四
                5:星期五
                6:星期六

            判断今天是星期几
        */

        // 先获取当前的时间
        var now = new Date();

        // 获取星期几
        var num = now.getDay();

        if(num===0){
            document.write('星期天');
            document.write('<img src="img/0.png">');
        }else if(num===1){
            document.write('星期一');
            document.write('<img src="img/1.png">');
        }else if(num===2){
            document.write('星期二');
            document.write('<img src="img/2.png">');
        }else if(num===3){
            document.write('星期三');
            document.write('<img src="img/3.png">');
        }else if(num===4){
            document.write('星期四');
            document.write('<img src="img/4.png">');
        }else if(num===5){
            document.write('星期五');
            document.write('<img src="img/5.png">');
        }else if(num===6){
            document.write('星期六');
            document.write('<img src="img/6.png">');
        }else{
            document.write('没有你要的星期八');
        }
    </script>
</head>
<body>
    <h1>判断今天时星期几</h1>
    <div id="output"></div>
</body>
</html>
Wscats commented 7 years ago

03三元运算.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03三元运算</title>
    <script>
        // 格式：条件 ? 条件成立代码 : 条件不成立代码
        // 判断奇偶
        var num = 11;
        /*if(num%2 === 0){
            // 偶数
        }else{
            //奇数
        }*/

        num%2 === 0 ? alert('偶数') : alert('奇数');
    </script>
</head>
<body>

</body>
</html>
Wscats commented 7 years ago 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04求最大数</title>
    <script>
        function max(){
            var num1 = document.getElementById('num1');
            var num2 = document.getElementById('num2');

            var _num1 = Number(num1.value);//这里得到的是字符串
            var _num2 = Number(num2.value);

            // 判断大小
            if(_num1 > _num2){
                document.write('最大值为：'+_num1);
            }else{
                document.write('最大值为：'+_num2);
            }
        }
    </script>
</head>
<body>
    <input type="text" id="num1"> 
    <input type="text" id="num2">
    <button onclick="max()">求最大数</button>
</body>
</html>
Wscats commented 7 years ago 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05成绩判定</title>
    <script>
        /*
            成绩判定(要求用if和switch两种写法)
                * 大于85 优秀
                * 大于等于75小于等于85 良好
                * 大于等于60小于75 及格
                * 小于60  不及格

                ():圆括号
                {}:花括号
                []:方括号
         */
        function check(){
            // 获取输入的成绩
            var score = document.getElementById('score');
            var _score = score.value;

            // 获取输出信息的元素
            var output = document.getElementById('output');

            if(_score > 85){
                // document.write('成绩优秀');
                output.innerHTML = '成绩优秀';
            }

            //  * 大于等于75小于等于85 良好
            else if(_score>=75 && _score<=85){
                output.innerHTML = '成绩良好';
            }

            // * 大于等于60小于75 及格
            else if(_score>=60 && _score<75){
                output.innerHTML = '刚过及格线，很危险哦';
            }

            // * 小于60  不及格
            else{
                output.innerHTML = '<span style="color:#f00;">亲，继续努力哦</span>';
            }
        }
    </script>
</head>
<body>
    <input type="text" id="score">
    <button onclick="check()">判定成绩</button>
    <div id="output"></div>
</body>
</html>
Wscats commented 7 years ago

06判断当前月份的天数.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        /*
            输入月份，显示当月的天数
                * 不考虑闰年
                * 利用case穿透简化代码

            思路：
                1）获取输入的月份
                2）根据月份得到当月的天数
                    1,3,5,7,8,10,12：31天
                    4,6,9,11:30天
                    2：28天
         */
        function getDays(){
            var month = document.getElementById('month');

            // 通过.value属性得到的值为字符串，所以需要转换数据类型
            var currentMonth = Number(month.value);

            var output = document.getElementById('output');

            switch(currentMonth){
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                case 12:
                    output.innerHTML = '本月有31天';

                    // 跳出switch
                    break;
                case 4:
                case 6:
                case 9:
                case 11:
                    output.innerHTML = '本月有30天';
                    break;
                case 2:
                    output.innerHTML = '本月有28天';
                    break;

                // 当所有的case都不满足的情况下会执行defalut下面的语句
                // 一般写在switch语句的最后
                default:
                    output.innerHTML = '没有你输入的月份'
            }
        }
    </script>
</head>
<body>
    <input type="text" id="month">
    <button onclick="getDays()">查询天数</button>
    <div id="output"></div>
</body>
</html>
Wscats commented 7 years ago

07测试身材.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07测试身材</title>
    <style>
        #output{padding:20px;color:#0c0;}
    </style>
    <script>
        /*
            开发一款软件，根据公式（身高-108）*2=体重，可以有10斤左右的浮动。来观察测试者体重是否合适
            思路：
                1）获取输入的身高和体重
                2）利用公式“(身高-108)*2=体重”来判断身材是否标准
         */
        function check(){
            var output = document.getElementById('output');

            // 1）获取输入的身高和体重
            var height = document.getElementById('height');
            var weight = document.getElementById('weight');

            var _height = Number(height.value);
            var _weight = Number(weight.value);

            // 根据身高计算标准体重
            var sWeight = (_height-108)*2;

            if(_weight === sWeight){
                output.innerHTML = '你的身材异常标准，你可以做教练了';
            }

            // 肥胖
            else if(_weight > sWeight + 10){
                output.innerHTML = '你应该减肥了';
            }

            // 太瘦
            else if(_weight < sWeight - 10){
                output.innerHTML = '你太瘦了，多吃肉';
            }

            // 微胖
            else if(_weight > sWeight && _weight <= sWeight+10){
                output.innerHTML = '欢迎加入微胖界';
            }

            // 微瘦
            else if(_weight < sWeight && _weight >= sWeight - 10){
                output.innerHTML = '欢迎加入微瘦界';
            }
        }
    </script>
</head>
<body>
    <h1>测试身材</h1>
    身高：<input type="text" id="height">
    体重：<input type="text" id="weight">
    <button onclick="check()">测试</button>
    <div id="output"></div>
</body>
</html>
Wscats commented 7 years ago

08while循环.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08while循环</title>
    <script>
        var num = 1;
        /*if(num == 10){
            document.write('111');
        }*/

        // while循环
        /*while(num<=10){
            // 只要条件返回true,则不断执行这里的代码
            document.write(num + '<br/>');

            // 变量更新
            num++;
        }*/

        // 在今天这个特别的日子里，我要对你说10000次“我爱你”
        var num = 1;
        while(num<=10000){
            document.write('我爱你'+num+'次<br>');

            // 变量更新
            num++;
        }
    </script>
</head>
<body>

</body>
</html>
Wscats commented 7 years ago

09打印100内所有7的倍数.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09打印100内所有7的倍数</title>
    <script>
        /*
            打印100以内 7的倍数
                对7求余如果为0，就7的倍数
         */

        // 变量初始化
        var num = 1;

        /*while(num<=100){
            if(num%7 === 0){
                // document.write(num + '<br/>');

                // 把结果打印到控制台
                // 一般用于调试
                console.log(num);
            }

            num++;
        }*/

        // do...while
        do{
            console.log(num);//1，2，3，4

            // 条件更新
            num++;
        }while(num<5)
    </script>
</head>
<body>

</body>
</html>
Wscats commented 7 years ago

10for循环.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09打印100内所有7的倍数</title>
    <script>
        // for循环格式：
        /*
            for(变量初始化; 条件判断; 变量更新){
                //循环条件成立，则执行这里的代码
            }

            1）变量初始化
            2）条件判断
            3）如果条件成立，则执行花括号中的代码
            4）变量更新
                * 变量更新后，再次进入第二步；
                * 当变量更新后，如果不满足条件则终止for循环
         */

        for(var num=1;num<5;num++){
            console.log(num);
        }

        console.log('num最终值：'+num);

        // 打印100以内的奇数
        for(var i=0;i<=100;i++){
            // 判断奇数
            if(i%2 !== 0){
                console.log(i);
            }
        }
    </script>
</head>
<body>

</body>
</html>
Wscats commented 7 years ago

11薪资增幅计算.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09打印100内所有7的倍数</title>
    <script>
        /*
            入职薪水10K，每年涨幅5%，50年后工资多少？
         */
        var salary = 10000;

        // 计算50年后工资
        for(var i=2;i<=50;i++){
            salary += salary*0.05;
        }
        console.log('50年后工资:' + salary.toFixed(2));
    </script>
</head>
<body>

</body>
</html>