web前端（盒子阴影、多列显示、媒体查询、JavaScript的常用语句、变量、变量命名规则、常量、基本数据类型、模板字符串、数据类型转换、运算符、分支语句、三元运算符、Switch语句、循环）

最新推荐文章于 2024-02-01 20:54:39 发布

还有醒着的咩

最新推荐文章于 2024-02-01 20:54:39 发布

阅读量92

点赞数 1

分类专栏： web前端文章标签：前端媒体

本文链接：https://blog.csdn.net/m0_74355247/article/details/131987506

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: aqua;
            /* inset：内部阴影  10：X轴的偏移量  20：Y轴偏移量  30：模糊半径 */
            box-shadow: inset 10px 20px 30px;
        }

        p{
            /* 文字阴影 */
            text-shadow: 10px 10px 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <p>wsijfasdl</p>
</body>
</html>

多列显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            /* 以几列进行显示 */
            column-count: 3;
            /* 列间距 */
            column-gap: 10px;
        }
    </style>
</head>
<body>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consectetur, ipsa ea, nam exercitationem atque tempora aliquam eaque iure, ullam commodi adipisci nemo. Porro laboriosam aliquid provident cum tempore laborum!
        Rerum, odio voluptatum suscipit iure minus ducimus architecto officiis voluptates dolore optio sapiente deserunt dolores explicabo aspernatur commodi, eos sed aliquid quae. Vitae commodi voluptatum voluptate modi, delectus nostrum aliquam!
        Et necessitatibus illo quod nulla eum voluptatem mollitia veniam itaque fuga alias rem iusto atque quae eveniet perferendis consectetur sunt aliquam magnam adipisci dignissimos quis dolores, amet cumque enim. Illum?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consectetur, ipsa ea, nam exercitationem atque tempora aliquam eaque iure, ullam commodi adipisci nemo. Porro laboriosam aliquid provident cum tempore laborum!
    </p>
</body>
</html>

媒体查询

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* @media only screen and (min-width: 320px) and (max-width: 480px) */
        div {
            width: 400px;
            height: 50px;
            background-color: aqua;
        }

        @media screen and (min-width: 900px) {
            div {
                background-color: pink;
                color: rgb(195, 19, 48);
            }
        }
    </style>
</head>

<body>
    <div>cnjdcldkcd</div>
</body>

</html>

JavaScript的常用语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document .write( '我是js插入的语句')
        
        //控制台输出语句
        console .log('你真6')
        
        // alert--警示框
        alert('警告，你小子立即退出')
        
        //输入语句--输入框
        prompt( '请输入您的年龄')
    </script>
</body>
</html>

变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        prompt('请输入你的用户名：')
        // 变量：存储数据的容器（盒子）
        // let--声明变量
        let uname
        // 变量赋值
        uname = 'lhl'
        // console.log('uname')加了引号直接打印字符串，打印变量不加引号。
        console.log(uname)
        // 变量的初始化
        let age = 18
        console.log(age)
        // 改变变量
        age = 19

        // 同时声明多个变量，不能重复使用变量名
        let a = 1, b = 2
        console.log(a, b)
    </script>
</body>
</html>

变量命名规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 命名规范:
        // 1、有效符号（大小写的字母、数字、下划线、$）
        // 2、关键字和保留字不能用于命名（如function、const）
        // 3、变量名必须以字母开头，不能以数字开头
        // 4、变量名不能重复
        // 5、尽量使用有意义的单词
        // 6、使用小驼峰命名法（xiAnOuPeng  xi_an_ou_peng）
    </script>
</body>
</html>

常量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // const--常量：存储的数据不能再变化或更改
        const GENDER = 'nv'
        console.log(GENDER)
    </script>
</body>
</html>

基本数据类型

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // javascript是弱数据类型语言，只有赋值后才能知道数据类型。
        
        // 字符串string类型
        let a
        a = '123'
        // 检测数据类型
        console.log(typeof (a))

        let b = "欢迎加入js"
        console.log(typeof (b))
        
        // 双引号和单引号均表示字符串，可结合使用
        let c = "你是一本参不透的'书'"

        // 字符串的拼接
        let name = 'lhl'
        let age = 19
        
        document.write('姓名是：' + uname + '年龄是：' + age)
    </script>
</body>
</html>

模板字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let uname = prompt('请输入用户名：')
        let password = prompt('请输入密码：')
        document.write(`<h1>用户名是:${uname},密码是：${password}</h1>`)

        let a = `gouxin`
        console.log(typeof (a))
    </script>
</body>
</html>

其他类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let  num = 1
        // 布尔类型（true、false）
        console.log(2 > 3)
        
        // undefined--未定义
        console.log(uname)
        var uname = 'lhl'

        // null--空的

        // null和undifined的区别
        // NAN--not a number
        // console.log(undefined + 1)==>NAN
        // console.log(null + 1)
    </script>
</body>
</html>

数据类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 隐式转换
        let a = 2
        let b = '3'
        console.log(a + b)

        // 显式转换
        // 方法一
        // let num1=Number(prompt('请输入数字1：'))
        // let num2=Number(prompt('请输入数字2：'))
        // console.log(num1 + num2)
        // 方法二
        // let num1= +prompt('请输入数字1：')
        // let num2= +prompt('请输入数字2：')
        // console.log(num1 + num2)
        // 方法三
        let num1= prompt('请输入数字1：')
        let num2= prompt('请输入数字2：')
        console.log(Number(num1) + Number(num2))

        // parseInt  parseFloat尽可能将字符串转换为数字类型
        let c = 3.1415826
        let d = '200.22px'
        console.log(parseInt(d))
        console.log(parseFloat(d))
    </script>
</body>
</html>

运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let a = 3
        let b = 5
        // +、-、*、/、%
        console.log(a + b)
        console.log(a - b)
        console.log(a * b)
        console.log(a / b)
        console.log(a % b)
        
        // ++、--
        console.log(++a)  //先++再赋值
        console.log(--a)
        console.log(a++)  //先赋值后++
        console.log(a--)
        
        // a = a + 3
        a += 3
        // a = a - 3
        a -= 3
        // a = a * 3
        a *= 3
        // a = a / 3
        a /= 3
    </script>
</body>
</html>

比较运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //leta=4
        //letb=5
        // console.log(a > b)
        // console.log(a >= b)
        // console.log(a < b)
        // console.log(a <= b)
        // console.log(a = b)--（=：赋值运算符）
        console.log(3 == '3')   // == :等于（只判断值，有隐式转换，把字符串转换为数字类型）
        console.log(3 === '3')  //===:全等（判断值、数字类型是否都一致）
    </script>
</body>
</html>

逻辑运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // &&--与：两真才真，一假则假
        console.log(3 > 2 && 2 > 4)

        // ||--或：一真则真，两假才假
        console.log(3 > 2 || 2 > 4)
        
        // !--非：真则假，假则真
        console.log(!(3 > 2))
    </script>
</body>
</html>

分支语句

单分支语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let age = +prompt('请输入你的年龄：')

        // if(判断条件){
        //    执行代码块
        // }
        
        if(age>18){
            alert('欢迎光临，你成年了')
        }
    </script>
</body>
</html>

双分支语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let age = +prompt('请输入你的年龄：')
        
        // if (条件语句1) {
        //     alert('执行代码块1')
        // } else {
        //     alert('执行代码块2')
        // }

        if (age >= 18) {
            alert('你是老年人')
        } else {
            alert('你不是老年人')
        }
    </script>
</body>
</html>

多分支语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let age = +prompt('请输入你的成绩：')

        // if (条件1) {
        //    代码块1
        // }// else if (条件2) {
        //    代码块2
        // }
        // else if (条件三) {
        //    代码块3
        //} else {
        //    代码块......

        if (score <= 60) {
            alert('脑子呢？？')
        } else if (score <= 80) {
            alert('还不错，继续努力就及格了')
        } else if (score <= 120) {
            alert('再接再厉，牛的')
        } else {
            alert('你已经是大神了，慕白你')
        }
    </script>
</body>
</html>

三元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 判断条件  ?  成立时执行的代码  :  不成立时执行的代码
        // 三元运算符--双分支语句的简化版

        // if (3 > 5) {
        //     alert('这个世界疯了')
        // } else {
        //     alert('你是不是个der')
        // }
        
        3<5 ? alert('这个世界疯了！') : alert('你是不是der啊！')    
    </script>
    
</body>
</html>

Switch语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let week = prompt('请输入今天星期几：')
    
        switch (week) {
            case 1:
                alert('今天星期一，猴子穿大衣')
                break;
            case 2:
                alert('今天星期二，猴子有点二')
                break;
            case 3:
                alert('今天星期三，猴子去爬山')
                break;
            case 4:
                alert('今天星期四，猴子要找事')
                break;
            case 5:
                alert('今天星期五，猴子打老虎')
                break;
            case 6:
                alert('今天周末，休假')
                break;
            case 7:
                alert('今天周末，休假')
                break;
            // 无符合条件时：
            default:
                alert('你是猴子派来的救兵吧~~~')
                break;
        }
    </script>
</body>
</html>

循环

for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // console.log('winky')
        // console.log('winky')
        // console.log('winky')
        // console.log('winky')
        // console.log('winky')
        // console.log('winky')
        // console.log('winky')
        // console.log('winky')
        
        for (let i = 0; i < 10; i++) {
            console.log('winky')
        }
    </script>
</body>
</html>

while循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let i = 1
        while (i <= 10) {
            console.log(i)
            i++
        }
        // while (true) {
        //     let n = prompt('你爱我吗？')
        //     if (n === "爱") {
        //         break
        //     }
        // }
        alert(true === 1)
    </script>
</body>
</html>

do-while循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // let i = 11
        // while (i <= 10) {
        //     console.log(i)
        //     i++
        // }
        let j = 11
        do {
            console.log(j)
            j++
        } while (j <= 10)
    </script>
</body>

</html>

break和continue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for (let i = 0; i < 100; i++) {
            if (i === 50) {
                continue   //退出本次循环
            }
            if (i === 70) {
                break//退出循环
            }
            console.log(i)
        }
    </script>
</body>
</html>

循环嵌套

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* span {
            display: inline-block;
            background-color: pink;
        } */
    </style>
</head>

<body>
    <script>
        for (let i = 1; i < 8; i++) {
            console.log(`今天是第${i}天`);
            for (let j = 1; j <= 10; j++) {
                console.log(`这是我送的第${j}朵花`)
            }
        }

        for (let i = 1; i <= 5; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(`<span>*</span>`)
            }
            document.write(`<br/>`)
        }

    </script>
</body>

</html>

循环加强

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // for in        for of
        let arr = [1,2,3,4,5,6,7,8];
        
        for(let i in arr){
            console.log(i);
            console.log(arr[i]);
        }

        for(let k of arr){
            console.log(k);
        }
        
        // let obj = {
        //     uname: "lhl",
        //     age: 18
        // }

        // for(let key in obj){
        //     console.log(key);
        //     console.log(obj[key]);
        // }
    </script>
</body>
</html>

还有醒着的咩

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
web前端（盒子阴影、多列显示、媒体查询、JavaScript的常用语句、变量、变量命名规则、常量、基本数据类型、模板字符串、数据类型转换、运算符、分支语句、三元运算符、Switch语句、循环）

【代码】web前端（盒子阴影、多列显示、媒体查询、JavaScript的常用语句、变量、变量命名规则、常量、基本数据类型、模板字符串、数据类型转换、运算符、分支语句、三元运算符、Switch语句、循环）
复制链接

扫一扫