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' + indexthis.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>