前端学习——jsDay2

于 2023-07-05 14:30:43 发布
阅读量140 收藏
点赞数
分类专栏： 前端 文章标签： 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46574748/article/details/131553455
版权

运算符

赋值运算符

在这里插入图片描述
在这里插入图片描述

一元运算符

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

比较运算符

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

逻辑运算符

在这里插入图片描述
在这里插入图片描述
小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <script>
       let num = prompt('请输入一个数：')
       let flag = (num%4===0&&num%100!==0)
       alert(flag)
    </script>
</body>
</html>

运算符优先级

在这里插入图片描述

语句

表达式和语句

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

分支语句

在这里插入图片描述

if

在这里插入图片描述
小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <script>
       let num = prompt('输入高考成绩：')
       if(num > 700){
        alert('恭喜考入黑马程序员！')
       }
    </script>
</body>
</html>

在这里插入图片描述
小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <script>
       let uname = prompt('输入用户名：')
       let psw = prompt('输入密码：')
       if(uname==='pink'&&psw==='123456'){
        alert('登陆成功！')
       }
       else{
        alert('登陆失败')
       }
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <script>
       let year = +prompt('输入年份：')
       if(year%100!=0&&year%4==0||year%400==0){
        alert('`{year}是闰年！`)
       }
       else{
        alert(`${year}是平年！`)
       }
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <script>
       let score = prompt('输入成绩：')
       if(score>90){
        alert('优秀！')
       }
       else if(score>=70){
        alert('良好！')
       }
       else if(score>=60){
        alert('及格！')
       }
       else{
        alert('不及格！')
       }
    </script>
</body>
</html>

三元运算符

在这里插入图片描述
小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <script>
       let num1 = prompt('请输入第一个数：')
       let num2 = prompt('请输入第二个数：')
       num1 > num2 ? console.log(num1) : console.log(num2)
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <script>
       let num1 = prompt('请输入第一个数：')
       num1 = num1 < 10 ? '0'+ num1 : num1
       console.log(num1)
    </script>
</body>
</html>

switch语句

在这里插入图片描述
小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <script>
       let num1 = +prompt('请输入第一个数：')
       let num2 = +prompt('请输入第二个数：')
       let str = prompt('请输入一个运算符：')
       switch(str){
        case '+':
            document.write(num1+num2)
            break
        case '-':
        document.write(num1-num2)
            break
        case '*':
            document.write(num1*num2)
            break
        case '/':
        document.write(num1/num2)
            break

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

循环语句

断点调试

在这里插入图片描述

while循环

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
小练习在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <script>
       let i = 10
       while(i > 0){
        document.write('月薪过万<br>')
        i--;
       }
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <script>
       let i = 1
       while(i <= 100){
        document.write(i + '<br>')
        i++;
       }
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <script>
       let i = 1
       let sum = 0
       while(i <= 100){
        sum += i
        i++;
       }
       document.write(sum)
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script>
        let i = 1
        let sum = 0
        while (i <= 100) {
            if (i % 2 == 0) {
                sum += i
            }
            i++;
        }
        document.write(sum)
    </script>
</body>

</html>

在这里插入图片描述

循环退出

在这里插入图片描述
小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script>
       while(true)
       {
        let arr = prompt('你爱我吗？')
        if(arr ==='爱')
        {
            break;
        }
       }
    </script>
</body>

</html>

综合案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script>
        let money = 100
        let cun = 10
        let qu = 10
        while(true){
            let choice = +prompt(`
            请选择您的操作：
            1.取款
            2.存款
            3.查看余额
            4.退出
            `)
            switch(choice){
                case 1:
                    money += cun
                    break
                case 2:
                    money -= qu
                    break
                case 3:
                    alert(`余额为${money}`)
                    break
            }
            if(choice===4)
                break
        }
    </script>
</body>

</html>
肉松拿铁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值