web第四天-优快云博客

Dom操作元素

innerText、innerHTML、value(input and textarea用到)

更改属性，样式

<!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: 200px;
            height: 200px;
        }

        .div1 {
            background-color: pink;
        }

        .div2 {
            background-color: #45b892;
        }

        .div3 {
            background-color: #680fbb;
        }
    </style>
</head>

<body>
    <div class="div1" onclick="changediv1()">HelloWorld</div>
    <div class="div2" onclick="changediv2()">HelloWorld</div>
    <div class="div3">HelloWorld</div>


    <script>
        var div1 = document.querySelector('.div1')
        var div2 = document.querySelector('.div2')
        function changediv1() {

            if (div1.className == 'div1') {
                div1.className = "div2"
            }
            else div1.className = 'div1'
        }

        function changediv2() {
            if (div2.style.color === 'black') {
                div2.style.color = 'white'
            }
            else div2.style.color = 'black'

        }
    </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>
        .div1 {
            height: 200px;
            width: 400px;
        }

        .bg0 {
            background-color: #16ce50;
        }

        .bg1 {
            background-color: #c3f10b;
        }

        .bg2 {
            background-color: #5100ff;
        }

        .bg3 {
            background-color: #ff00cc;
        }

        .bg4 {
            background-color: #ff0008;
        }
    </style>
</head>

<body>
    <div class="div1">这是第一个标签</div>
    <div class="div1">这是第二个标签</div>
    <div class="div1">这是第三个标签</div>
    <div class="div1">这是第四个标签</div>
    <div class="div1">这是第五个标签</div>

    <script>
        var divs = document.getElementsByClassName('div1')

        for (var i = 0; i < divs.length; i++) {
            var div = divs[i]
            div.setAttribute('index', i)
            div.onclick = function () {
                var index = this.getAttribute('index')
                console.log(index);
                console.log(this.innerText);
                console.log(this);
                console.log(div);
                var bg = 'bg' + index
                this.classList.add(bg)

            }

        }

    </script>
</body>

</html>

// 请在这里编写代码，根据需求，使得图片达到景深效果

document.querySelector('.img1').style.filter='blur(0px)'

document.querySelector('.img2').style.filter='blur(0px)'

grid布局例子：考拉

html,
body {
  background: #f8d8ab;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ears {
  display: flex;
  justify-content: space-between;
  position: relative;
  top: 240px;
  width: 550px;
}

.ear {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: #738394;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #f6b9bf;
}

.face {
  z-index: 1;
  width: 430px;
  height: 380px;
  background: #a0abb6;
  border-radius: 50%;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 25px 25px 25px 25px  1fr;
  grid-template-rows:50px 1fr 1fr 50px ;
  /* 创造一个网格布局
  6 个纵列（column） --  
    前后两列两等分 (可用 fr 代表一份)，
    中间 4 列均为 25px 宽度
  4 个横行（row） -- 
    上下均为 50px，中间两等分
  */
}

.eye {
  /* 
    长为 30px
    高为 30px
    颜色为 #090b0e
    圆角为 50%
    位置居中
  */
  width: 30px;
  height: 30px;
  background-color: #090b0e;
  border-radius: 50%;
  justify-self: center;
  align-self: center;

}

.eye.left {
  /* 按照图示选取 grid-area */
  grid-area: 2/2;
}

.eye.right {
  /* 按照图示选取 grid-area */
  grid-area: 2/5;
}

.nose {
  /* 
    高为 100%
    颜色为 #3b464f
    上方圆角为 50%
    下方圆角为 40%
    按照图示选取 grid-area
  */
  height: 100%;
  background-color: #3b464f;
  border-radius: 50% 50% 40% 40%;
  grid-area: 3/2/4/6;
}

.blush {
  /* 
    长为 40px
    高为 30px
    颜色为 #f6b9bf
    圆角为 50%
  */
  width: 40px;
  height: 30px;
  background-color: #f6b9bf;
  border-radius: 50%;
}

.blush.left {
  /* 按照图示选取 grid-area
      并调整位置
   */
   grid-area: 2/1;
   justify-self: flex-end;
   align-self: flex-end;
}

.blush.right {
  /* 按照图示选取 grid-area
    并调整位置
  */
  grid-area: 2/6;
   justify-self: flex-start;
   align-self: flex-end;
}

电影院排座：flex

* {
  box-sizing: border-box;
}

body {
  background-color: #242333;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.container {
  perspective: 1000px;
  width: 470px;
}

.screen {
  background-color: #fff;
  height: 70px;
  width: 100%;
  transform: rotateX(-45deg);
  box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
  color: #242333;
  text-align: center;
  line-height: 70px;
  font-size: 30px;
}

.seat {
  background-color: #444451;
  height: 40px;
  width: 45px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* TODO：待补充代码 */
.screen {
  margin-bottom: 50px;
}

.seat-area {

  display: flex;
  flex-wrap: wrap;
}

.seat {
  margin-left: 10px;
  margin-bottom: 10px;
}

.seat:nth-child(8n) {
  margin-right: 0px;
}
.seat:nth-child(8n+2) {
  margin-right: 20px;
}

.seat:nth-child(8n+6) {
  margin-right: 20px;
}

.seat:nth-child(8n+1) {
  margin-left: 0px;
}

/* TODO: 请在此补充代码实现tab栏动态固定 */

position: sticky;

top: 0px;

}

Dom事件绑定的三种方法

<!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>
        .div1,
        .div2,
        .div3 {
            font-size: 20px;
        }

        .bg1 {
            background-color: #ff0000;
        }

        .bg2 {
            background-color: #aeff00;
        }

        .bg3 {
            background-color: #3900e6;
        }
    </style>
</head>

<body>
    <div class="div1" onclick="fun1(this)">这是第一个标签</div>
    <div class="div2">这是第二个标签</div>
    <div class="div3">这是第三个标签</div>
</body>

<script>
    var div1 = document.querySelector('.div1')
    var div2 = document.querySelector('.div2')
    var div3 = document.querySelector('.div3')
    div1.setAttribute('index', 1)
    div2.setAttribute('index', 2)
    div3.setAttribute('index', 3)

    function fun1(that) {
        console.log(this);
        console.log(that);
        var index = that.getAttribute('index')
        that.classList.add('bg' + index)

    }

    div2.onclick = function () {
        console.log(this);
        var index = this.getAttribute('index')
        this.classList.add('bg' + index)
    }

    div3.addEventListener('click', function () {
        console.log(this);
        var index = this.getAttribute('index')
        this.classList.add('bg' + index)
    })

</script>

</html>