7.26笔记

1.盒子阴影

  box-shadow: inset 10px 20px 30px;

  /* 10px:x轴的偏移量        20：y轴的偏移量    inset:内阴影      30：模糊半径 */
 

 /* 文字阴影 */
 text-shadow: 10px 10px 2px;

2.多行显示

 /* 以几列进行显示 */
 column-count: 3;
 /* 列于列之间的间距的 */
 column-gap: 30px;
 

3.媒体查询

 /* @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);
            }
        }
 

4.js常用

<script>
        document.write('我是js插入的语句')
        // 控制台输出语句
        console.log('你真6')

        // alert   警示框
        alert('警告，你小子立即退出')
        // 输入语句   输入框
        prompt('请输入您的年龄')

    </script>
 

5.变量
    <script>
        // prompt('请输入您的用户名：')
        // 变量：存储数据的容器            盒子
        // 声明变量   let 变量名
        let uname
        // 变量赋值
        uname = 'gouxin'
        // 变量的初始化
        let age = 18
        console.log(age)
        // 改变变量
        uname = 'xianyanbao'
        console.log(uname)
        // 同时声明多个变量
        let a = 1, b = 2
        console.log(a, b)

    </script>
 

6.用户名输入案例

<script>
        let uname = prompt('请输入用户名：')
        document.write(uname)
    </script>
 

7.var
    <script>
        // var a = 12
        // let b = 22

        // var  不存在块级作用域        可以先使用，后声明          多次声明同一变量

        // console.log(uname)
        // var uname = 'gouxin'
        // var uname = 'zs'
        // console.log(uname)
        // let uname = 'gouxin'
        // let uname = 'zs'
    </script>

8.常量

<script>
        // 常量：存储的数据不能再变化   const  常量名
        const GENDER = 'nv'
        // GENDER = '男'
        console.log(GENDER)
    </script>
 

9.基本数据类型-字符串

<script>
        // 对于javascript弱数据类型语言，只有进行赋值了，才知道是什么数据类型

        // 字符串string类型   '  '             " "        
        let a
        a = 'nihao'
        // typeof  检测数据类型的方法
        console.log(typeof (a))

        let b = "欢迎你加入js "
        console.log(typeof (b))

        let c = "你是一本参不透的'书'"

        // 字符串的拼接  +
        let uname = 'zs'
        let age = 21

        document.write('姓名是：{uname}' + uname + '年龄是：' + age)

    </script>
 

10.模板字符串

 <script>
        let uname = prompt('请输入用户名：')
        let password = prompt('请输入密码：')
        document.write(`<h1>用户名是:${uname},密码是：${password}</h1>`)

        let a = `gouxin`
        console.log(typeof (a))

    </script>
 

11.其他类型

<script>
        let num = 1
        // 布尔类型   true   false
        console.log(2 > 3)
        // undefined   未定义
        console.log(uname)
        var uname = 'zs'
        // null    空的
        // NAN   not a number   
        console.log(undefined + 1)   //nan
        console.log(null + 1)

    </script>
12.数据类型转换

<script>
        // 隐式转换
        // let a = 2
        // let b = '3'
        // console.log(a + b)
        // 显式转换    Number(str)      +
        // let num1 = Number(prompt('请输入数字1：'))
        // let num2 = Number(prompt('请输入数字2：'))

        // let num1 = +prompt('请输入数字1：')
        // let num2 = +prompt('请输入数字2：')
        // console.log(num1 + num2)

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

    </script>

13.运算符

 <script>
        let a = 3
        let b = 5
        // +  -  *   /    %    
        console.log(a + b)
        console.log(b - a)
        console.log(b * a)
        console.log(b / a)
        // %   取余
        console.log(b % a)
        a += 3       //a = a + 3
        console.log(a)
        a -= 3    //a = a - 3
        a *= 3
        a /= 3

        // 赋值运算符的优先级高于后减减，因此，先赋值，后运算
        // let c = b--
        // 自增  自减

        // 前减减的优先级大于赋值运算符，因此，先减减，再赋值
        let c = --b
        console.log(c)

        let d = c++
        console.log(d)
        console.log(c)  //5

        let f = ++c

        console.log(f)

    </script>
14.比较运算符

  <script>
        // let a = 4
        // 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(3 == '3')   // == :等于    只判断值   有隐式转换，把字符串转换为数字类型
        console.log(3 === '3')  //===:全等      判断值、数字类型是否都一致

    </script>
 

15.逻辑运算符

 <script>
        // &&  :两真才真，一假则假
        console.log(3 > 2 && 2 > 4)
        // 或   ||  :  一真则真，两假才假
        console.log(3 > 2 || 2 > 4)

        // 非    ！  取反
        console.log(!(3 > 2))

    </script>
 

16.单分支语句

 <script>
        let age = +prompt('请输入你的年龄：')

        // if(判断条件){
        //     执行代码块
        // }

        if (age > 18) {
            alert('欢迎光临，你成年了~')
        }
    </script>

17.双分支语句

 <script>
        let age = +prompt('请输入您的年龄')

        // if (条件语句1) {
        //     执行代码块1
        // } else {
        //     执行代码块2
        // }

        if (age > 18) {
            alert('你成年了思密达~')
        }
        else {
            alert('小屁孩，边儿去~')
        }
    </script>

18.多分支语句

<script>
        let score = +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>

19.判断平闰年

<script>
        let year = +prompt('请输入年份：')
        // if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
        //     alert(`${year}是闰年`)
        // } else {
        //     alert(`${year}是平年`)
        // }

        year % 4 === 0 && year % 100 !== 0 || year % 400 === 0 ? alert(`${year}是闰年`) : alert(`${year}是平年`)
    </script>

20.三元运算符

 <script>
        //   判断条件   ?    成立时执行的代码   :   不成立时执行的代码
        // 三元运算符    双分支的简写

        // if (3 > 5) {
        //     alert('这个世界疯了')
        // } else {
        //     alert('你是不是个der')
        // }

        3 < 5 ? alert('这个世界疯了') : alert('你是不是个der')

    </script>

21.switch语句

<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":
            case "7":
                alert("今天周末，休假")
                break
            default://无符合条件时，执行的代码
                alert("你是猴子派来的救兵吧~~~")
                break

        }
    </script>
 

22.for循环

<script>
        // console.log('我爱你')
        // console.log('我爱你')
        // console.log('我爱你')
        // console.log('我爱你')
        // console.log('我爱你')
        // console.log('我爱你')
        // console.log('我爱你')
        // console.log('我爱你')
        for (let i = 0; i < 100; i++) {
            console.log('我爱你')
        }

    </script>
 

23.求1-100之间偶数和

 <script>
        let sum = 0
        for (let i = 1; i <= 100; i++) {
            if (i % 2 === 0) {
                sum += i//sum=sum+i
            }
        }
        alert(sum)

    </script>

24.while循环

  <script>
        let i = 1
        while (i <= 10) {
            console.log(i)
            i++
        }
        // while (true) {
        //     let n = prompt('你爱我吗？')
        //     if (n === "爱") {
        //         break
        //     }
        // }
        alert(true === 1)
    </script>

25.do while循环

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

26.break，continue

<script>
        for (let i = 0; i < 100; i++) {
            if (i === 50) {
                continue   //退出本次循环
            }
            if (i === 70) {
                break//退出循环
            }
            console.log(i)
        }
    </script>

27.循环嵌套

 <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/>`)
        }
 

28.数组

 <script>
        //存储多个数据的容器-数组
        // 声明方式：   []   数组存在数组下标，从0开始
        let arr = ['gouxin', 'liuxingyun', 'xainyanbao', 'wangwu']
        console.log(arr)
        // 查找     数组名[数组下标]
        console.log(arr[1])

    </script>

29.循环加强

  <script>
        // for in               for of
        let arr = [1, 2, 3, 4, 5, 6, 7, 'gouxin', true]
        // for (let i in arr) {
        //     // console.log(i)
        //     console.log(arr[i])
        // }
        for (let k of arr) {
            console.log(k)
        }

    </script>