上节课复习：
.clearfix:after,.clearfix:before {
content:"",
display:table;
}
.clearfix:after {
clear both;
}
今日内容：
1、ES语法
2、BOM
3、DOM
练习
02 绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
background-color: #f6c2d2;
height: 100%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
03 流程控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function f() {
y=3
}
console.log(y)
</script>
</body>
</html>
04 函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function f1() {
console.log("无参函数")
}
function f2(a,b) {
console.log("有参函数",a+b)
}
function f3() {
return [111,222,333]
}
var f=function (a,b) {
console.log(a+b)
}
f()
(function (a,b) {
console.log(a+b)
})(1,2)
var x=11
function test() {
var x=22
y=3333
if (true) {
var z=444
}
}
test()
console.log('====>',x)
if (true) {
var m=666}
if (true) {
let n=666}
</script>
</body>
</html>
05 测试HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#comment {
width: 500px;
background-color: #f6c2d2;
border: 1px solid palegreen;
}
ul {
list-style: none;
}
.xxx {
border: 1px solid blue;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="comment">
<p>评论区: </p>
<ul id="ul"></ul>
</div>
<div id="box">
<p>提交评论：</p>
<textarea name="" id="content" cols="30" rows="10"></textarea>
<p>
<input type="button" value="提交" id="btn">
<input type="button" value="统计" id="cal">
</p>
</div>
<script>
var comment=document.getElementById("comment");
var content=document.getElementById("content");
var btn=document.getElementById("btn");
var cal=document.getElementById("cal");
var ul=document.getElementById("ul");
var count=0
btn.onclick=function () {
var val=content.value
if (val.length != 0) {
var li=document.createElement('li')
var h3=document.createElement('h3')
var p=document.createElement('p')
var x=document.getElementsByClassName('del');
count=x.length+1
h3.innerHTML = "#"+"<span class='num'>"+count+"</span>"+"楼"+"<span class='del'>删除</span>"
p.innerText=val
li.append(h3)
li.append(p)
li.classList.add('xxx')
ul.append(li)
content.value=""
}
function aa() {
var delArr=document.getElementsByClassName("del")
for (let i=0;i<delArr.length;i++) {
delArr[i].onclick=function () {
ul.removeChild(this.parentNode.parentNode)
count--
var numArr=document.getElementsByClassName("num")
for (let j=i;j<numArr.length;j++) {
numArr[j].innerText=parseInt(numArr[j].innerText)-1
}
aa()
}
}
}
aa()
}
</script>
</body>
</html>