11.17 JS基础2

发现昨天的学习记录有些繁琐，今天开始精简文章内容（凸出重点难点易遗漏点）
课堂练习1：数字累加求和，点击“计算”按钮，将结果显示在文本框中。1+2+3+N

<body>

<input type="text" value="10" id="num">
<input type="button" value="计算" id="btn">

<input type="text" value="0" id="result">

<script>
    //document.getElementById("btn").onclick
    //按钮的点击事件-》执行函数
    document.getElementById("btn").onclick = function fun01 (){

        //获取文本框的值 文本框.value
        let n=document.getElementById("num").value;
        //alert(typeof n);
        //定义一个循环 i<=10
        let sum=0;
        for(let i=1;i<=n;i++){
            sum+=i;
        }//得到result .value
        document.getElementById("result").value=sum;
    }
</script>
</body>

上图是老师的解法，下图是我个人的。

<body>

<input type="text" value="10" id="num">
<input type="button" value="计算" id="btn">

<input type="text" value="0" id="result">

<script>
    document.getElementById("btn").onclick = function (){

        let inp=document.getElementById("num").value;
//        let inp=parseFloat(document.getElementById("num").value);
        alert(typeof inp);

        let sum=0;
        for(let i=inp;i>=0;i--){
            sum+=i;
        }console.log(sum);
        document.getElementById("result").value=sum;
    }
</script>
</body>

发现：for循环中i的赋值（let i=inp）如果为文本框输入的值（即字符串类型），需要做类型转换，不然显示的是字符串拼接；而像老师所做的i<=n（n也是字符串类型）却可以成功得出数字而非字符串。。概因JS的机制。

运算符

算术运算符除包括平常的加减乘除还包括：%（取余/取模）++（自增）--（自减）。

比较（关系）运算符包括：>, <, >=, <=, !=（不等）, ==（等于）, ===（全等）（Ps：其中==与===的区别要明确，如下图），得到的结果一定是true或者false。

//定义变量
let a=1;
console.log(a==1);
console.log(a>=1);
console.log(a<=1);
console.log(a!=1);
console.log(a===1);
console.log("********************");
let b="10";
console.log(b==10);//可以 使用两个等号==比较不同类型的数据，内容相同结果就为true
console.log(b=="10");//可以 使用两个等号==比较不同类型的数据，内容相同结果就为true
console.log(b===10);////可以 三个等号===比较同类型的数据，内容相同结果才为true
console.log(b==="10");//可以 三个等号===比较同类型的数据，内容相同结果才为true
console.log("********************");
let username = "admin";
console.log(username=="admin");
console.log(username==="admin");

总之，==比较不同数据类型，内容相同结果就为true；===比较相同数据类型，同时内容也要相同结果才为true。

运算符还包括赋值运算符：=, += -= *= /=；逻辑运算符：&&（逻辑与）, ||（逻辑或）, !（取反）（Ps：针对boolean值）。

当然，很多判断的时候，都不是单一条件，而是复合条件，比如说登录时用账号和密码，两者必须同时满足，才能成功登录（用到逻辑与）。

//登录 用户名/账号  密码

let name="admin";
let pass="123456";

//判断
console.log(name === "admin" &&  pass==="123456");

此外，位运算符也属于运算符的一种，不过暂时不细说。

流程控制
条件结构

常见的if条件句：

if(表达式(条件1)，实为布尔类型){

(如果条件1成立，则执行...);

}else if(条件2){

(如果条件1不成立，且条件2成立，则执行...);

}else{

(如果条件1和2都不成立，则执行...);

}

（Ps：值得注意的是，在一个if条件句中，else if(条件)如果有需要可以写很多次，但else{}只能写一次）

对于if条件语句，我们课堂上做了相关练习，这是老师的版本（基础版）。

<body>
<input type="text" id="age" placeholder="请输入你的年龄" value="18">
<input type="button" value="电影推荐" id="btn1">
<input type="button" value="书籍推荐">


<script>
    //按钮的单击事件
    document.getElementById("btn1").onclick = function fun01(){

        //得到用户输入的年龄
        let age = parseInt(document.getElementById("age").value);

        //条件判断
        if(age>0 && age<=3){
            //先alert
            alert("眼睛尚未发育完全，不建议观看.")
        }
        else if(age<=10){
            alert("《猫和老鼠大战凹凸曼》!")
        }
        else if(age<=18){
            alert("《哪吒之魔童降世》")
        }else if(age<=30){
            alert("《楚门的世界》")
        }else{
            alert("还要别人推荐吗？")
        }
    }

</script>

这是我的练习（之前就想尝试把prompt()弹窗中输入的值获取到页面文本框中）

<body>
<!--<input type="text" id="age" placeholder="请输入你的年龄" value="18">-->
<!--<input type="button" value="电影推荐" id="btn1">-->
<input type="button" value="书籍推荐" id="btn2">
<input type="text" id="book" value="">
<script>
//    let age=prompt("请输入您的岁数", "");
    //按钮的单击事件
    document.getElementById("btn2").onclick=function func(){
        //得到用户输入的年龄
        let age=prompt("请输入您的岁数", "");
        //let age=parseInt(document.getElementById("age").value);
        //条件判断
        if(age>0 && age<=3){
            document.getElementById("book").value="尚未接受教育，不看";
        }else if(age<18){
            document.getElementById("book").value="《家》";
        }else if(age<30){
            document.getElementById("book").value="《三国演义》";
        }else{
            document.getElementById("book").value="《活着》";
        }
    }
</script>
</body>

后续我们又进行了优化（毕竟，之前基础版的实在简陋。。弹窗对于用户也很不友好）。

我们增加了提示信息显示，希望能在页面上直接展示，而不是弹窗输出。另外，我们也增加了电影简介，图片和视频展示。

<body>
<input type="text" id="age" placeholder="请输入你的年龄" value="">
<input type="button" value="电影推荐" id="btn1">
<input type="button" value="书籍推荐">
<div>
    <h4 id="fname">电影名称</h4>

    <p id="bi">简介</p>

    <p style="display: inline-block">
        <!--行内样式-->
        <img src="imgs/default.png" id="pic" style="width: 200px ;height: 300px">
    </p>

    <p style="display: inline-block">
        <video src="video/cat.mp4" controls="controls" autoplay="autoplay" id="v" width="600px" height="300px"></video>
    </p>
</div>


<script>
    //按钮的单击事件
    document.getElementById("btn1").onclick = function fun01() {

        //得到用户输入的年龄
        let age = parseInt(document.getElementById("age").value);
        //将提示信息存储在一个变量中
        let msg = "暂无推荐.";
        //将简介保存在一个变量中
        let bi = "简介（略..）";
        //将图片保存在一个变量中
        let img = "default.png";
        //将电影保存在一个变量中
        let vid = "default.mp4";

        //条件判断
        if (age > 0 && age <= 3) {
            //先alert
            msg = "眼睛尚未发育完全，不建议观看.";
        }
        else if (age <= 10) {
            msg = "《猫和老鼠大战凹凸曼》!";
            bi = "简介：Tom and Jerry";
            img = "cat.png";
            vid = "cat.mp4";
        }
        else if (age <= 18) {
            msg = "《哪吒之魔童降世》";
            bi = "简介：第33届中国电影金鸡奖 最佳美术片";
            img = "nn.png";
            vid = "nn.mp4";
        } else if (age <= 30) {
            msg = "《楚门的世界》";
            bi = "简介：The Truman Show";
            img = "chmen.png";
            vid = "chmen.mp4";
        } else {
            msg = "还要别人推荐吗？";
        }

        //将信息显示在div的h4中
        document.getElementById("fname").innerHTML = "<span style='color: blue'>" + msg + "</span>";
        //简介
        document.getElementById("bi").innerHTML = "<span style='color:pink'>" + bi + "</span>";
        // 图片
        document.getElementById("pic").src = "imgs/" + img;
        //电影
        document.getElementById("v").src = "video/" + vid;

    }

</script>
</body>

难点在于document.getElementById("xxx')和if循环结合。

之前input标签中我们取id赋值（例：document.getElementById("xx").value=xxx;）用的是.value，而p标签没有value，要用（document.getElementById("xx").innerHTML=xxx;），里面还可以加样式，如 document.getElementById("xx").innerHTML="<span style='color:blue'>"+a+"</span>"（字符拼接）。

switch

结构：

<script>
    switch(常量){
        case 常量值1:
            //语句
            break;
        case 常量值2:
            //语句
            break;
        case 常量值3:
            //语句
            break;
        case 常量值4:
            //语句
            break;
        default :
            //语句
            break;
    }
</script>

<script>
    let n=2;
    // 小括号内表达式计算的时候会得到一个结果
    //n*2 和case后面的常量值进行比较 ,如果"相等",只能是相等,无法做区间的判断.
    //switch(n*2){
    //如果所有case和常量表达式结果都不相等，那么将会执行default,
    // default相当于if结构里的else.只能有一个，当然也可以省略
    //break也可以省略，但是不会跳出switch结构，会按顺序从上往下运行下去。
    switch(n){
        case 常量值1:
            //语句
            console.log("猪脚饭");
            break;
        case 常量值2:
            //语句
            console.log("沙茶面");
            break;
        case 常量值3:
            //语句
            console.log("漳州卤面");
            break;
        case 常量值4:
            //语句
            console.log("手枪腿");
            break;
        default :
            //语句
            console.log("汉堡");
            break;
    }
</script>

练习和作业:

1.用户在文本框中输入一个正整数，我们求这个数的阶乘。

<body>
<input type="text" id="num" value="" placeholder="请输入一个正整数">
<input type="button" id="btn1" value="阶乘">
<input type="text" id="answer">
<script>
    document.getElementById("btn1").onclick=function jieCheng(){
        let num=document.getElementById("num").value;
        let sum=1;
        if(num>0){
            for(let i=1;i<=num;i++){
                sum*=i;
            }document.getElementById("answer").value=sum;
        }else{
            document.getElementById("answer").value="您输入的不是正整数，再见";
        }
    }
</script>
</body>

2.完成简单的数学运算，实现两个数字的 + - * /即可。

<body>
<input type="text" id="num1" value="" placeholder="请输入一个数字">
<input type="button" id="add" value="+">
<input type="button" id="minus" value="-">
<input type="button" id="multi" value="*">
<input type="button" id="sep" value="/">
<input type="text" id="num2" value="" placeholder="请输入一个数字">
=<input type="text" id="result" value="" placeholder="此处显示结果">

<script>

    document.getElementById("add").onclick = function add() {
        let num1 = parseFloat(document.getElementById("num1").value);
        let num2 = parseFloat(document.getElementById("num2").value);
        let result = 0;
        result = num1 + num2;
        document.getElementById("result").value = result;
    }

    document.getElementById("minus").onclick = function minus() {
        let num1 = parseFloat(document.getElementById("num1").value);
        let num2 = parseFloat(document.getElementById("num2").value);
        let result = 0;
        result = num1 - num2;
        document.getElementById("result").value = result;
    }

    document.getElementById("multi").onclick = function multi() {
        let num1 = parseFloat(document.getElementById("num1").value);
        let num2 = parseFloat(document.getElementById("num2").value);
        let result = 0;
        result = num1 * num2;
        document.getElementById("result").value = result;
    }

    document.getElementById("sep").onclick = function sep() {
        let num1 = parseFloat(document.getElementById("num1").value);
        let num2 = parseFloat(document.getElementById("num2").value);
        let result = 0;
        result = num1 / num2;
        document.getElementById("result").value = result;
    }

</script>
</body>

Ps：这道题也可以用switch解，看对题目的理解，可用多个文本框，也可用4个按钮表示加减乘除。

<body>
<input type="text" id="num1" value="" placeholder="请输入一个数字">
<input type="text" id="code" value="" placeholder="请输入一个运算符号">
<input type="text" id="num2" value="" placeholder="请输入一个数字">
=<input type="text" id="result" value="" placeholder="此处显示结果">
<input type="button" id="btn1" value="计算">

<script>
    document.getElementById("btn1").onclick = function cal() {
        let num1 = parseFloat(document.getElementById("num1").value);
        let num2 = parseFloat(document.getElementById("num2").value);
        let code = document.getElementById("code").value;
        let result;
        switch (code) {
            case "+":
                result = num1 + num2;
                document.getElementById("result").value = result;
                break;
            case "-":
                result = num1 - num2;
                document.getElementById("result").value = result;
                break;
            case "*":
                result = num1 * num2;
                document.getElementById("result").value = result;
                break;
            case "/":
                result = num1 / num2;
                document.getElementById("result").value = result;
                break;
        }
    }
</script>
</body>

3.用户在文本框中输入年和月份，我们输出这年的这个月有多少天。

<body>
<input type="text" id="year" value="">年
<!--年-->
<input type="text" id="month" value="">月
<!--月-->
<input type="button" id="btn1" value="算天数">
<input type="text" id="days" value="">天
<!--天数-->
<script>
document.getElementById("btn1").onclick=function sumDays(){
    let y=parseInt(document.getElementById("year").value);
    let m=parseInt(document.getElementById("month").value);
    let days;
    switch (m) {
        case 1:
            days = 31;
            break;
        case 2:
            if ((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) {
                days = 29;;//闰年
            } else {
                days = 28;//平年
            }
            break;
        case 3:
            days = 31;
            break;
        case 4:
            days = 30;
            break;
        case 5:
            days = 31;
            break;
        case 6:
            days = 30;
            break;
        case 7:
            days = 31;
            break;
        case 8:
            days = 31;
            break;
        case 9:
            days = 30;
            break;
        case 10:
            days = 31;
            break;
        case 11:
            days = 30;
            break;
        case 12:
            days = 31;
            break;
    }
    document.getElementById("days").value = days;
}
</script>
</body>

（笨办法。。）

稍稍精简：

<body>
<input type="text" id="year" value="">年
<!--年-->
<input type="text" id="month" value="">月
<!--月-->
<input type="button" id="btn1" value="算天数">
<input type="text" id="days" value="">天
<!--天数-->
<script>
document.getElementById("btn1").onclick=function sumDays(){
    let y=parseInt(document.getElementById("year").value);
    let m=parseInt(document.getElementById("month").value);
    let days;
    switch (m) {
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10 :
        case 12:
            days = 31;
            break;
        case 2:
            if ((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) {
                days = 29;;//闰年
            } else {
                days = 28;//平年
            }
            break;
        case 4:
        case 6:
        case 9:
        case 11:
            days = 30;
            break;
    }
    document.getElementById("days").value = days;
}
</script>
</body>

By the way, 想起来今天还学了一个Math.random()的函数。

<script>
    //for(let i=1;i<=100;i++)
    console.log(Math.floor(Math.random()*18+1));//得出0-18之间的随机数
    //Math.floor()向下取整
</script>

感想：

要说今天遇到的难点。。在于老师留下的第三题作业，也不是说难。。是忘记了类型的转换，number弄成了object。。尴尬

（Ps：关于今日基金感想，买的烂的还是一蹶不振，好的还是那么好，该跑则跑，不要太犹豫，免得丧失更多机会成本！）

18:18:28 2021-11-17

posted on 2021-11-17 18:18 heyiyang1312 阅读(5) 评论(0) 收藏举报

刷新页面返回顶部

11.17 JS基础2

练习和作业:

导航

公告