Web前端笔记

<script>
        // let day = prompt("请输入今天星期几：")
        let num1 = 1
        let sun1 = 0
        let odd = 0
        while(num1 <=100){
            if(num1 % 2 == 0){
                odd += num1
                
            }
            sum1 += num11
            num1++
        }
        console.log(sum1)
        console.log(odd)
    </script>





    <script>
        // for(leti=1;i<=7;i++){
        //     console.log(`今天是第${i}`)
        //     for(let j=1;j<=7;j++){
        //         console.log(`送了${j}朵花了`)
        //     }
        // }
        for(let i = 1;i <=4;i++){
            for(let j = 1;j<=5;j++){
                document.write(`*`)
            }
            document.write(`<br>`)
        }
        for(let i = 1;i<=9;i++){
            for(let j=1;j<=i;j++){
                document.write(`${j}*${i}=${i*j}`)
            }
            document.write(`<br>`)
        }
        
    </script>




    <script>
        // 数组：存储多条数据
        // 数组的声明方式
        // 1.new
        let arr1 = new Array()
        console.log(arr1)

        // 2.字面量
        let arr2 = [1,2,3,"zhangsan",true]
        console.log(arr2)

        // 3.数组的长度
        console.log(arr2.length)

        // 查看数组里的元素   数组下标：从0开始
        console.log(arr2[3])
        console.log(arr2[7])

        // 遍历数组
        for(let i = 0;i<arr2.length;i++){
            console.log(arr2[i])
        }

        // [2,3,4,5,7,12]   求所有元素的和以及平均值
    </script>






    <script>
        // 数组名.push():一次把一个或者多个元素追加到数组的最后面
        // pop()在数组中删除最后一个元素，把元素返回出来
        arr1.pop()
        console.log(arr1)
        

        // shift()
        arr1.shift()
        console.log(arr1)

        // splice(start,删除多少个元素)删除指定元素

        arr1.splice(2,3)
        console.log(arr1)

        arr1.splice(1,0,"3332","zhangsan",true)
        console.log(arr1)
    </script>





    <script>
        // 函数：一段实现某一功能的代码的集合   本质：实现了代码的高度复用
        // 函数在js中的定义方式
        // function 函数名([参数]){函数体}
        function sayHI(say){
            console.log(say)
        }


        // 函数调用    函数名()
        // sayHI()
        // sayHI()
        // sayHI()
        // sayHI()
        sayHI("lyylyylyy")



        // can
        // 函数只能return出去一条数据
        function getSum(num1,num2){
            // console.log(num1+num2)
            return num1 + num2,num1-num2
        }
        let a = getSum(1,2)
        console.log(a)
    </script>





    <script>
        function test2(fn){
            a = fn(1)
            console.log(a)
            console.log("test2~~`")
        }

        // es6箭头函数  主要是用于作为其他函数的参数进行使用的
        test2((x,y) =>{

        })
        


        function getMax(arr){
            let max = 0
            for (let i in arr){
                if(arr[i]>max){
                    max=arr[i]
                }
                return max
            }
        }
        let arr = [12,2,71,54]
        let max = getMax(arr)
        console.log(max)
    </script>
</body>






    <script>
        function getArea(r,PI = 3.14){
            return r*r*PI
        }
        let a = getArea(3,3)
        console.log(a)
    </script>



    <script>
        // 作用域：名称在某一个范围内生效，这个范围就是他的作用域
        // 全局作用域  局部作用域  块级作用域
        let a=1
        function test01(){
            let b =1 
            console.log(b)
            console.log(a)
        }
        test01()
        for(let i = 0;i<=10;i++){
            let zhangsan = "zhangsan"
            console.log(i)
        }
        console.log(zhangsan)


    </script>
</body>




  <script>
    let lis = document.querySelectorAll(".tab .tab-item")
    let div = document.querySelectorAll(".products .main")
    // console.log(div)

    // console.log(lis)
    for  (let i = 0;i < lis.length ; i++){
      // li添加事件监听
      lis[i].addEventListener("click", function () {
        // console。log("111")
        document.querySelector(".tab .active").classList.remove("active")
        lis[i].classList.add("active")

        document.querySelector(".products .active").classList.remove("active")
        divs[i].classList.add("active")
      })
    }

  </script>



    <style>
        a{
            /* 工 */
            cursor:text;
            /* 小手 */
            cursor: pointer;

        }
        p{
            cursor: pointer;
            /* 小手 */
            cursor: text;
            /* 工 */
            cursor: move;
            /* 移动十字标 */
            cursor: copy;
            /* 箭头 */
        }
    </style>






    <script>
        let arr1 = [1,2,3]
        // let a = arr1[0]
        // let a = arr1[1]
        // let a = arr1[2]
        // 展开运算符   ...
        console.log(...arr1)

        console.log(Math.max(...arr1))
    </script>




    <script>


        function outer() {
            let num = 0
            function inner(){
                num++
                console.log(`这是函数调用的第${num}次`)
            }
            return inner
        }
        let a = outer 
        a()
        a()
        a()
        num = 21
        a()
    </script>





    <script>
        console.log(Math.E)
        console.log(Math.PI)
        let a = 4.999
        let b = 3.11
        // 向下进行取整
        console.log(Math.floor(a))

        // 向上取整
        console.log(Math.ceil(b))
        console.log(Math.abs(-111))
        // 最大值最小值

        console.log(Math.max(1.21,31,41,12))
        console.log(Math.min(1.21,31,41,12))
        // 随机数  只能取[0,1)
        console.log(Math.floor(Math.random() * ((20 - 10) + 1))+ 10)



        // 

        // function get_random(n,m){
        //     return Math.floor(Math.random() * ((m - n) + 1))+ n)
        // }
        // console.log(get_random(100,200))

        // 四舍五入
        console.log(Math.round(3.51))

        // 开平方根
        console.log(Math.sqrt(9))

        // 幂次方
        console.log(Math.pow(2,3))

        

    </script>









    <script>
        // 实例化时间对象
        let date = new Date()
        console.log(date)

        // 年
        let year = date.getFullYear()
        console.log(year)

        // 月  0-11
        let m = date.getMonth() + 1
        console.log(m)

        // 日
        let day = date.getDate()
        console.log(day)

        // 时分秒
        let hh = date.getHours()
        let mm = date.getMinutes()
        let ss = date.getSeconds()
        console.log(hh)
        console.log(mm)
        console.log(ss)


        // 星期
        let w = date.getDay()
        console.log(w)

        // 获取毫秒数
        let mins = date.getMilliseconds()
        console.log(mins)

        // 时间戳   此刻距离19700101 00：00：00的毫秒数
        let timechuo = date.getTime()
        console.log(timechuo)

        
    </script>







    <script>
        // 1.获取元素对象
        const box1 = document.querySelector("div")
        console.log(box1)
        // innerText  不识别标签
        // console.log(box1.innerText)
        // box1.innerText = <h1>这是新的数据</h1>
        // console.log(box1.innerText)

        // innerHTML
        console.log(box1.innerHTML)
        box1.innerHTML = <h1>xinshuju</h1>

        // textContent
 
        box1.textContent = "5555"
        let arr = ["jq","lyy","zwc","sq"]






    </script>






    <form action="">
        <input type="checkbox" check name="sex" value="nan">男
        <input type="checkbox" name="sex" value="nv">女

        <script>
            // 像是checked这样的属性名=属性值的属性，js再进行赋值时，通过true/false去控制属性值
            document.querySelector("input[value='nv']").checked = "true"
            console.log(document.querySelector("input[value='nv']").checked)
        
        </script>
    </form>




    <script>
        // 1.获取元素
        const box = document.querySelector("div")
        //   更改style样式
        // 1.对象。style。样式 = ""
        // box.style.width = "100px"

        // 碰见带-的复合属性，采用小驼峰的方式规避使用-
        // box.style.backgroundColor = "pink"
        // className  不保留原来的类名
        // box.className = "box_style"

        // classList
        // box.classList.add()追加新的类名到元素对象上
        box.classList.add("box_style")
        // box.classList.remove("box1")  移除元素对象的类名
        // box.classList.remove("box1")
        // 如果类名存在，则删除，如果不存在，则添加
        box.classList.toggle("box1")
    </script>





    <script>
        function get_random(n,m){
            return Math.floor(Math.random( ) * ((m - n) + 1)) + n

        }
        // 1.获取元素
        const box = document.querySelector("div")
        // 2.产生随机数
        get_random(arr.length)
        let random = get_random(0,arr.length - 1)

        // 3.
        box.innerText = arr[random]
    </script>






    <script>
        // 事件：事件源  事件类型  处理函数
        // 10  om事件类型


        const button = document.querySelector("button")
        const box = document.querySelector("div")
        // 事件源.on事件类型=function(){}
        // 同一个事件源，后面会注册的事件会对前面注册的事件进行覆盖
        button.onclick = function(){
            box.style.display = "none"
        }

        // 11 事件监听  不会覆盖
        button.addEventListener("click",text,true)

        button.removeEventListener("click",text,true)
        
        button.addEventListener("click",function(){
            alert("666")
            console.log("444")
        },true)
    </script>






        /* 背景平铺方式 */
        /* background-repeat:repeat-x; */
        /* 背景图片不平铺 */
        /* background-repeat:no-repeat; */
        /* 背景图片位置 */
        /* 1.给方向名词，中间用空格隔开
           2.坐标  水平方向：正数向右  负数向左  垂直方向 正数向下  负数向上 */
        /* background-position: top left; */
        /* background-position: 50px 0; */
        /* background-position: center; */
        /* 背景图片的缩放 */
        /* background-size: cover;等比例缩放背景图直到把容器铺满覆盖 */
        /* background-size: contain; */
        /* 背景图片固定 */
        /* background-attachment: fixed; */
    }





 body{
        height:2000px;
        /*多个属性值之间用空格隔开 */
        background:pink url("../f5d29e2771e6e701eac8ee867e75b41f2171279.png@1048w_!web-dynamic.avif")no-repeat right bottom/cover;
    }







        div{
            width: 300px;
            height: 50px;
            background-color: aqua;
            /* border-radius: 20px; */
            /* 左上  右下+左下  右下 */
            /* border-radius:10px 20px 30px 40px; */
            /* 胶囊形状 */
            border-radius: 25px;
            border-top-left-radius: 70px;
        }



    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 700px;
            height: 400px;
            background-color:aliceblue;
            /* 换行 */
            flex-wrap: wrap;

        }
        li{
            list-style: none;
            height: 40px;
            background-color: aquamarine;

        }
        ul li:first-child{
            flex: 1;
        }
        ul li:nth-child(2){
            flex: 2;
        
        }
        ul li :last-child{
            flex: 1;
        }
    </style>




    <style>
        .out{
            width: 800px;
            height: 800px;
            background-color: yellow;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
            float: left;
        }

        /* 
        顶部对齐 
        脱离标准流
        */
        .box2{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            float: right;
        }
    </style>




    <style>
        body{
            height: 2000px;
            background-color: brown;

        }
        div{
            /* 国定定位：相对于浏览器可视窗口进行定位，不会随着页面滚动而滚动 */
            position: fixed;
            right: 50%;
            bottom: 50%;
            width: 50px;
            height: 200px;
            background-color: pink;
        }
        p{
            position: absolute;
            bottom: 0%;
            width: 50px;
            height: 20px;
            background-color: aqua;
        }
        .bottom{
            position: absolute;
            bottom: 15px;
            left: 45%;
            width: 200px;
            height: 50px;
            background-color: pink;
        }
    </style>











    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            /* box-shadow: 15px 20px 10px 0px  black inset; */
            /* x轴偏移量 y轴偏移量 模糊的半径 扩散的半径 颜色 内阴影*/
        }
    </style>





    <style>
        .lyy{
            margin-top: 100px
            width:800px;
            height:800px;
            background-color:aquamarine;
        }
        .me{
            position: absolute;
            top: 50%;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        /* 子绝父相 */
    </style>


        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* padding给一个值，默认上下左右内边距全部为10px */
            padding: 10px;
            /* 只想上面有内边距 */
            /* padding-top: 10px; */
            /* 两个值是前面上下和后面左右 */
            /* padding: 10px 30px; */
            /* 三个值是上、左右、下 */
            /* padding: 10px 30px 40px; */
            /* 四个值是上、右、下、左（顺时针） */
            /* padding: 10px 30px 40px 60px; */
        }
    </style>

        div{
            /* display:inline-block; */
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-bottom: 20px;
            margin-left: 20px;

            /* 一个值 - 上下左右 */
            margin: 10px;
            /* 两个值 - 上下、左右 */
            margin: 10px 20px;
            /* 三个值 - 上、左右、下 */
            margin: 10px 20px 30px;
            /* 四个值 - 上、右、下、左 */
            margin: 10px 20px 30px 40px;

        }
    </style>





    <style>
        div{
            text-shadow: 5px 5px 3px;
            /* x y 模糊程度 */
        }
    </style>











    <style>
        div{
        /* 相对定位 相对于自身原本的位置发生偏移*/
            position: relative;
            /* 方位 */
            top:50px;
            left: 50px;
            width: 300px;
            height: 300px;
            background-color: aquamarine;

        }

        /* 可以移动位置，但原来的位置仍然会保留 */

        /* 绝对定位 */
        
    </style>



<!-- <style> -->
    <!-- div {
        width: 300px;
        height: 300px;
        background-color:pink;
        font-size:12px;
        font-weight:700;
        text-align:center;
        font-style:italic;
        font-family:'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode'
        line-height:300px;
    }    
    h1{
/*默认400是正常粗细，700是加粗字体bold*//* font-weight:400;normal*/
        font-weight:bold;
    }   
    
    p {} -->






    <style>
        * {
            padding:0;
	        margin:0;
        }
        /* 此时ul就会变成弹性容器 li就是弹性盒子            子项
        主轴：默认在水平方向
        侧轴默认在垂直方向 
        子元素可以自动挤压和延申
        */
        ul{
            display: flex;
            width: 600px;
            height: 300px;
            background-color: aqua;
            margin: 0 auto;
        }
        li{
            list-style: none;
            width: 100px;
            height: 200px;
            background-color: aquamarine;
        }
        </style>