JS基础知识day3

最新推荐文章于 2024-07-19 17:45:01 发布

是阿竹呀

最新推荐文章于 2024-07-19 17:45:01 发布

阅读量569

点赞数 4

分类专栏： JS学习文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/lxz1151184225/article/details/121798661

版权

JS学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

今天主要是对前两天的知识的总结和输出，做了两个简单的项目，对目前经常用到的运算符优先级做了一个总结，简单学习了switch语句和循环中的两种语句。

简易计算器的制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="inp1">
    <select name="" id="sec">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="inp2">
    <button id="btn">=</button>
    <input type="text" id="res">


    <script>
        var oInp1 = document.getElementById('inp1')
        var oSec = document.getElementById('sec')
        var oInp2 = document.getElementById('inp2')
        var oBtn = document.getElementById('btn')
        var oRes = document.getElementById('res')
        console.log(inp1, sec, inp2, btn, res);

        oBtn.onclick = function () {
            var n1 = oInp1.value;
            var n2 = oInp2.value;
            console.log(n1, n2);
            if(n1 === '' ||  n2 === ''){
                alert('请输入内容');
            }
            else{ 
                if(isNaN(n1) || isNaN(n2)){
                alert('请输入数字');
                }
                else{
                    if(oSec.value === '+'){
                        oRes.value = n1 * 1 + n2 * 1;
                    }
                    else if(oSec.value === '-'){
                        oRes.value = n1 - n2;
                    }
                    else if(oSec.value === '*'){
                        oRes.value = n1 * n2;
                    }
                    else if(oSec.value=== '/'){
                        oRes.value = n1 / n2;
                    }
                }
            }
            
            
        }
    </script>
</body>
</html>

年月日输入框的合法性判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <span>年</span>
    <input type="text" id="year">
    <span>月</span>
    <input type="text" id="month">
    <span>日</span>
    <input type="text" id="day">
    <button id="btn">判断</button>

    <script>
        // 要求：判断输入的日期是否合法
        //   年1000-2000之间

        // 思路：
        //   先判断年份
        //   再判断月份
        //   再判断日期

        var oYear = document.getElementById('year');
        var oMonth = document.getElementById('month');
        var oDay = document.getElementById('day');
        var oBtn = document.getElementById('btn');

        // 写点击
        oBtn.onclick = function () {  
            // 判断年
            var y = oYear.value ;
            if(y >= 1000 && y <= 2000 && y % 1 === 0) {
                // 判断月份
                var m = oMonth.value ;
                if(m >= 1 && m <= 12 && m % 1 === 0) {
                    // 判断日期
                    var d = oDay.value ;


                    // 日期判断是根据月份来判断

                    var maxDay ;

                    if(m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
                        maxDay = 31
                    }
                    else if(m == 4 || m == 6 || m == 9 || m == 11) {
                        maxDay = 30
                    }
                    else if(m == 2) {
                        // 2月的天数根据年判断
                        if(y % 4 === 0 && y % 100 !== 0 || y % 400 === 0) {
                            maxDay = 29
                        }
                        else {
                            maxDay = 28
                        }
                    }


                    if(d >= 1 && d <= maxDay && d % 1 === 0) {
                        alert('ok')
                    }
                    else {
                        alert('天数输入错误')
                    }
                }
                else {
                    alert('月份输入错误')
                }
            }
            else {
                alert('年份输入错误')
            }
        }

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

判断年月日的合法性，以及当年的天数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="inp1">
    <span>年</span>
    <input type="text" id="inp2">
    <span>月</span>
    <input type="text" id="inp3">
    <span>日</span>
    <button id="btn">判断是否合法</button>
    <br>
    <span>天数</span>
    <input type="text" id="time">

    <script>
        var oInp1 = document.getElementById('inp1');
        var oInp2 = document.getElementById('inp2');
        var oInp3 = document.getElementById('inp3');
        var oBtn = document.getElementById('btn');
        var oTime = document.getElementById('time')
        oBtn.onclick = function () {
            var n1 = oInp1.value;
            var n2 = oInp2.value;
            var n3 = oInp3.value;
            // 判断年是否合法
            if(n1 >= 1000 && n1 <= 2000 && n1 % 1 === 0){
                // 判断月份是否合法
                if(n2 >= 1 && n2 <= 12 && n2 % 1 === 0){
                    // 判断天数是否合法
                    if(n2 == 1 || n2 == 3 || n2 == 5 || n2 == 7 || n2 ==8 || n2 == 10 || n2 ==12){
                        maxday=31;
                    }
                    else if(n2 == 4 || n2 == 6 ||n2 == 9 || n2 == 11){
                        maxday=30;
                    }
                    // 平年闰年2月天数区分
                    else if(n2 == 2){
                            if(n1 % 4 === 0 && n1 % 100 != 0 || n1 % 400 === 0)
                            {
                                maxday=29;
                            }
                            else{
                                maxday=28;
                            }
                        }
                    if(n3 >= 1 && n3 <= maxday && n3 % 1 ===0){
                        alert('ok');
                    }
                    else{
                        alert('天数输入错误');
                    }
                }
                else{
                    alert('月份输入错误');
                }
            }
            else{ 
               alert('年份输入错误');
            }
            // 判断天数
            var tr=28;
            if(n1 % 4 === 0 && n1 % 100 != 0 || n1 % 400 === 0)
                            {
                                tr=29;
                            }
            if(n2 == 1){
                oTime.value = n3 * 1;
            }
            else if(n2 == 2){
                oTime.value = 31 + n3*1;
            }
            else if(n2 == 3){
                oTime.value = 31 + tr*1 +  n3*1;
            }
            else if(n2 == 4){
                oTime.value = 31*1 + 30 + tr*1 +  n3*1;
            }
            else if(n2 == 5){
                oTime.value = 31*2 + 30 + tr*1 +  n3*1;
            }
            else if(n2 == 6){
                oTime.value = 31*2 + 30*2 + tr*1 +  n3*1;
            }
            else if(n2 == 7){
                oTime.value = 31*3 + 30*2 + tr*1 +  n3*1;
            }
            else if(n2 == 8){
                oTime.value = 31*4 + 30*2 + tr*1 +  n3*1;
            }
            else if(n2 == 9){
                oTime.value = 31*4 + 30*3 + tr*1 +  n3*1;
            }
            else if(n2 == 10){
                oTime.value = 31*5 + 30*3 + tr*1 +  n3*1;
            }
            else if(n2 == 11){
                oTime.value = 31*5 + 30*4 + tr*1 +  n3*1;
            }
            else if(n2 == 12){
                oTime.value = 31*6 + 30*4 + tr*1 +  n3*1;
            }
        }
    </script>
</body>
</html>

以上是一些使用前两天所学内容的基础代码。

switch

switch语句中，当一个条件满足之后，后面的代码也会继续执行—— 穿透。

break阻止穿透

语法

case做的是全等判断

switch(){

case0 :{

条件满足执行的代码

}

case1 :{

条件满足执行的代码

}

default :{

以上条件不满足时执行的代码

}

一般范围判断使用if语句

准确值判断使用switch

但是也可以用特殊情况实现两种语句的转换：

        var score = Math.round(Math.random() * 100) ;

        if(score >= 60 && score <= 70) {
            alert(score + '分还可以')
        }
        else if(score > 70 && score <= 80) {
            alert(score + 'just so so')
        }

        }


        var score = 64 ;

        switch(true) {
            case score >= 60 && score < 70 : {
                alert('还阔以') ;
                break ;
            }
            case score >= 70 && score < 80 : {
                alert('just so so') ;
                break ;
            }
        }

用布尔值转换实现switch的范围判断

注意：

switch 穿透 break （if没有此功能）

循环

循环：重复的做同一件事情

包含三种语句：

while

do while

for

while

初始条件

while(){

循环要做事情

变量初始条件产生变化（如果不写会进入死循环）

}

100以内的所有整数

var i = 1 ;

while(i <= 100 ){

console.log(i)

i++;

}

倒着打印100以内的整数

var i = 100 ;

while(i >= 1){

console.log(i);

--i;

}

100以内的偶数

var i = 0;

while(i <= 100 ){

console.log(i)

i += 2;

}

100以内3的倍数

var i = 3;

while(i <= 100 ){

console.log(i)

i += 3;

}

100以内3和7的倍数

var i = 1;

while(i <= 100 ){

if（i % 3===0 && i% 7 === 0）{

console.log(i);

}

i ++;

}

for

语法：

for(初始条件；循环条件；变量变化){

循环要做的事情

}

for(var i = 0 ; i < 10; i++){

console.log(666);

}

for语句的执行效率高于while

是阿竹呀

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础知识day3

今天主要是对前两天的知识的总结和输出，做了两个简单的项目，对目前经常用到的运算符优先级做了一个总结，简单学习了switch语句和循环中的两种语句。简易计算器的制作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">...
复制链接

扫一扫