03-JS-web API -节点-查-增-删-克隆-文本-时间戳-重绘和回流
1 节点操作
1 DOM节点
DOM树里每一个内容都称之为节点
2 节点类型
元素节点 (常用)
所有的标签 比如 body、 div ,span
可以更好的让我们理清标签元素之间的关系
html 是根节点
属性节点
所有的属性 比如 href src class
文本节点
所有的文本 , 标签里面的文字
2 查找节点
能够具备根据节点关系查找目标节点的能力
1 父节点- parentNode
parentNode 属性
返回最近一级的父节点 找不到返回为null
<body>
<div>
<button>目标元素</button>
</div>
<script>
// 先获取button 目标元素
let button = document.querySelector('button');
console.dir(button.parentNode); // 获取到父元素 div标签
// 修改一下父元素的背景颜色
button.parentNode.style.backgroundColor = 'red';
button.parentNode.style.display = 'none';
</script>
</body>
2 子节点- children （重点） - childNodes (了解)
childNodes (少用)
获得所有子节点、包括文本节点（空格、换行）、注释节点等
children （常用）
仅获得所有元素节点
返回的还是一个伪数组
<body>
<ul>
<li>a1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>b1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>c1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
/*
1 获取到所有的ul标签 数组
2 遍历ul数组 挨个绑定点击事件
3 点击事件触发了
1 this = 当前被点击的ul标签
2 this.children 获取到 所有的ul的子元素 数组
3 遍历 children 获取到中的每一个li标签
4 li.style.display="none"
*/
// let ul=document.querySelector("ul");
// 获取ul标签下的 子节点
// console.log(ul.children);
// console.log(ul.childNodes);// 什么都那
// 1 获取到所有的ul标签 数组
let uls = document.querySelectorAll('ul');
// 遍历ul数组 挨个绑定点击事件
for (let index = 0; index < uls.length; index++) {
// 3 点击事件触发了
uls[index].addEventListener('click', function () {
// 3.1 3.2 3.3 对被点击的ul的children 做遍历
for (let j = 0; j < this.children.length; j++) {
// this.children[j] 表示 每一个li标签
this.children[j].style.display="none";
}
});
}
</script>
</body>
3-1 兄弟节点-上个兄弟- previousElementSibling
3-2 兄弟节点-下个兄弟- nextElementSibling
给哪个标签设置了对应的兄弟节点 ,那么就能修改它对应的样式
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
/*
1 获取所有的li标签 数组
2 遍历 绑定点击事件
3 事件触发了
this.next
this.previou 获取到对应的元素 设置他们的样式
*/
// 1 获取所有的li标签 数组
let lis = document.querySelectorAll('li');
// 2 遍历 绑定点击事件
for (let index = 0; index < lis.length; index++) {
// 3 事件触发了
lis[index].addEventListener('click', function () {
// 上一个兄弟 设置 蓝色
this.previousElementSibling.style.backgroundColor = 'blue';
// 下一个兄弟 设置 绿色
this.nextElementSibling.style.backgroundColor = 'green';
});
}
</script>
</body>
3 增加节点-createElement(创建)-appendChild(插入)- insertBefore-(指定插入)
一般情况下，我们新增节点，按照如下操作：
创建一个新的节点
1 创建节点
即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
只创建节点,在网页中是看不见的,还要插入
创建元素节点方法：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// 1 创建一个 li 标签 节点
let li=document.createElement('li')
console.log(li);
// 要给插入li加样式
li.innerHTML='这是JS创建的li'
li.style.backgroundColor='red'
// 2 吧 li 标签插入到 ul 标签中
let ul=document.querySelector('ul')
ul.appendChild(li)//把li标签插入到ul 中 父元素的底部 插入子元素
</script>
</body>
2 插入节点
注意:
appendChild ( ) 只能插入一个标签
父元素.appendChild( 标签 )
append ( ) 可以插入多个标签 括号里要用逗号隔开
父元素.append( 标签1 , 标签2 ,标签3)
2-1 appendChild- 插入到父元素的最后一个子元素
要想在界面看到，还得插入到某个父元素中
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// 1 创建一个 li 标签 节点
let li=document.createElement('li')
console.log(li);
// 要给插入li加样式
li.innerHTML='这是JS创建的li'
li.style.backgroundColor='red'
// 2 吧 li 标签插入到 ul 标签中
let ul=document.querySelector('ul')
ul.appendChild(li)//把li标签插入到ul 中 父元素的底部 插入子元素
</script>
</body>
2-2 移动-剪切
appendChild 插入元素的功能 | 剪切
1 appendChild(元素) 如果该元素是已经存在网页中， appendChild作用类似 移动
2 appendChild(元素) 如果该元素新创建的， appendChild作用类似 简单的插入
<body>
<ul class="left">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="right"></ul>
<script>
// appendChild 插入元素的功能 | 剪切
// appendChild(元素) 如果该元素是已经存在网页中， appendChild作用类似 移动
// appendChild(元素) 如果该元素新创建的， appendChild作用类似 简单的插入
// 先获取左边的第一个li标签
let li = document.querySelector('.left li:nth-child(1)');
let rightUl = document.querySelector('.right');
// 把li标签插入到右边的ul中
rightUl.appendChild(li);
</script>
</body>
3 insertBefore-可以插入到指点元素位置
父元素.insertBefore(要插入的元素,哪个元素的上面)
insertBefore 也能插入元素 功能也类似 appendChild
1 如果要插入的元素 是已经存在的 那么insertBefore作用 移动
2 如果要插入的元素 是新创建的 insertBefore作用 仅仅 插入
<body>
<ul class="left">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<ul class="right">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
/*
insertBefore 也能插入元素 功能也类似 appendChild
1 如果要插入的元素 是已经存在的 那么insertBefore作用 移动
2 如果要插入的元素 是新创建的 insertBefore作用 仅仅 插入
*/
let c = document.querySelector('.left li:nth-child(3)');
let two = document.querySelector('.right li:nth-child(2)');
let right = document.querySelector('.right');
right.insertBefore(c,two);
let li = document.createElement('li');
li.innerText = '新创建的';
right.insertBefore(li, two);
// 父元素.insertBefore(要插入的元素,哪个元素的上面);
</script>
</body
4 克隆节点-cloneNode(克隆)
复制一个原有的节点
把复制的节点放入到指定的元素内部
语法:
元素 .cloneNode (布尔值)
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
1 若为true，则代表克隆时会包含后代节点一起克隆 ---深克隆
2 若为false，则代表克隆时不包含后代节点 ---浅克隆
3 默认值为 false
<body>
<div class='box'>
<button>点击</button>
</div>
<script>
// 1 来克隆这个节点 box
let box=document.querySelector('.box')
// 2 开始克隆
// cloneNode(false) 为浅克隆 不会把 div 的后代节点(所有元素)一起克隆
// let newBox=box.cloneNode(false)
// cloneNode(true) 为深克隆 会把 div 的后代节点(所有元素)一起克隆
let newBox=box.cloneNode(true)
// 3 插入到 body标签中
document.body.appendChild(newBox)
</script>
</body>
5 删除节点- removeChild
能够具备根据需求删除节点的能力
1 若一个节点在页面中已不需要时,可以删除它
2 在JavaScript原生DOM操作中,要删除元素必须通过父元素
语法:
父元素 .removeChild(要删除的元素)
<body>
<button>删除ul中某一个li标签</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
let button=document.querySelector('button')
let ul=document.querySelector('ul')
// 如果在外面定义了 li 就是ul中的第一个li
// 那么就只能删除第一个li,后续的li不受影响
let li=document.querySelector('li:nth-child(1)')
button.addEventListener('click',function(){
//每点击一次就 删除ul中的第一个li
// let li=document.querySelector('li:nth-child(1)')
ul.removeChild(li)
// 删除自己
// ul.remove()
// button.remove()
})
</script>
</body
注意:
如果不存在父子关系则删除不成功
删除节点和隐藏节点 (display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从HTML中删除节点
拓展:
removeChild --是父元素删除子元素
remove ---则是删除自己
元素.remove //给自己添加,就会删除自己
6 文本节点-(创建与插入)
语法:
// 添加文字节点
//声明一个变量 = 创建文本属性 ('文本内容')
let tex1=document.createTextNode('•')
let tex2=document.createTextNode('人在学习')
再把变量插入到对应的标签 前 或 后
div.appendChild(span1)
div.appendChild(tex1)
div.appendChild(span2)
div.appendChild(tex2)
7 数组和伪数组的区别
相同点:都可以使用 for 循环
而伪数组对于好用的数组的方法是不支持的
| filter |
|---|
| map |
| some |
| every |
| find |
| findlndex |
| reduce |
使用 **document.querySelectorAll **获取的是伪数组
6 思维导图
8 时间戳
1 实例化
在代码中发现 new 关键字时, 一般将这个操作称之为 实例化
创建一个时间对象并获取时间
获取当前时间
<script>
// 1 实例化一个 时间对象 new
let date = new Date();
console.log(date); //获取当前时间
console.log(date.getTime()); //获取时间戳 方式一
console.log(+new Date); //获取时间戳 方式二
console.log(Date.now()); //获取时间戳 方式三
console.log(date.getFullYear()); // 输出当下是什么年份
console.log(date.getMonth()); // 输出月份 0-12 都会自己 加一
console.log(date.getDate()); // 几号
console.log(date.getDay()); // 输出星期几 星期一 是 1 星期二 星期六 6 星期天 0
console.log(date.getHours()); // 小时
console.log(date.getMinutes());// 分钟
console.log(date.getSeconds());// 秒
</script>
2 时间对象方法(获取常见日期)
能够使用时间对象中的方法写出常见日期
因为
时间对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式
| 方法 | 作用 | 说明 |
|---|---|---|
| getFullYear( ) | 获得年份 | 获取四位年份 |
| getMonth( ) | 获得月份 | 取值为 0~11 (月份要自己加 1) |
| getDate( ) | 获得月份中的每一天 | 不同月份取值也不相同 |
| getDay( ) | 获取星期 | 取值为 0~6 ( 0 为星期天 ) |
| getHours( ) | 获取小时 | 取值为 0 ~ 23 |
| getMinutes( ) | 获取分钟 | 取值为 0 ~ 59 |
| getSeconds( ) | 获取秒 | 取值为 0 ~ 59 |
一般用于封装函数内,进行调用.用于时间要加上补 0
// 封装一个函数 获取时间
function grtTime(){
let data=new Date;
let year= data.getFullYear() //年
let month= data.getMonth()+1//月
let day= data.getDate()//日
let hours= data.getHours()//时
let minutes= data.getMinutes()//分
let second= data.getSeconds()//秒
// 时间补0
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
second = second < 10 ? '0' + second : second;
return `${year}-${month}-${day}-${hours}:${minutes}:${second}`
}
3 时间戳
一般用于做 时间 或者 快速生成一个不会重复的数字
有三种获取时间戳方式:
1 Date.now ( )
2 date.getTime ( )
3 +new Date ( )
+new Date() // 可以使用 + 号将整个对象 转成 时间戳
转换时间公式:
是返回当前时间和 1970 年1 月 1 日 0 时 0 分 0 秒 之间毫秒数
<script>
let data=new Date
console.log(data.getTime());//方式一
// console.log(+new Date()); //方式二 只要日期对象 可以使用+ 将整个对象 转成 时间戳
// console.log(Date.now()); //方式三
// 来快速生成一个不会重复的数字 *随机数
</script>
9 重绘和回流
浏览器是如何进行界面渲染的
1 解析（Parser）HTML，生成DOM树(DOM Tree)
2 同时解析（Parser） CSS，生成样式规则 (Style Rules)
3 根据DOM树和样式规则，生成渲染树(Render Tree)
4 进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）
5 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
6 Display: 展示在页面上
回流(重排)
当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过 程称为 回流。
会导致回流（重排）的操作：
1 页面的首次刷新
2 浏览器的窗口大小发生改变
3 元素的大小或位置发生改变
4 改变字体的大小
5 内容的变化（如：input框的输入，图片的大小）
6 激活css伪类 （如：:hover）
7 脚本操作DOM（添加或者删除可见的DOM元素）
简单理解影响到布局结构了，就会有回流
重绘
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、 outline等), 称为重绘。
简单理解
修改了外观颜色 字体颜色 等等
注意:
重绘不一定引起回流，而回流一定会引起重绘。
案例示范:
1 appendChild -点击标签移动的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
display: flex;
justify-content: space-between;
}
.left{
background-color: red;
width: 300px;
height: 120px;
}
.right{
background-color: blue;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<ul class="left">
<li>龙虾</li>
<li>鲍鱼</li>
<li>荷兰豆</li>
<li>皇帝蟹</li>
<li>牛</li>
</ul>
<ul class="right"></ul>
<script>
/*
1 获取到左侧所有的li标签
2 遍历 绑定点击事件
appendChild
父元素.appendChild(要插入的元素-点击了谁)
*/
let li=document.querySelectorAll('.left li')
let rightUl=document.querySelector('.right')
for (let index = 0; index < li.length; index++) {
li[index].addEventListener('click',function(){
// li点击的时候,转到右边去
rightUl.appendChild(li[index])
})
}
</script>
</body>
</html>
2 遍历数组-创建节点与插入节点-案例(渲染成在线)
<!--
1 引入style.css
2 引入 data.js
3 根据data.js中的data数组 来遍历生成代码
最终让网页显示出来 data数组的数据
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix">
<!-- <li>
<img src="images/course01.png" alt="" />
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • <span>1125</span>人在学习
</div>
</li> -->
</ul>
</div>
</div>
<!-- 1 引入 要显示的数据 -->
<script src="./data/data.js"></script>
<!-- 2 在写自己的业务 -->
<script>
/*
1 获取到要渲染到页面中的数据 data
2 遍历data
要求使用 createElement appendChild 来往ul中插入 li 元素
1 创建一个li标签
2 创建一个图片便签 设置 src属性
3 创建一个h4标签 设置文本内容
4 创建一个div标签 添加一个class info
5 创建两个span标签
1个设置内容 高级
2个设置人数 1125
6 组装
li标签要 插入 img
li标签要 插入 h4
li标签要 插入 div.info
div.info 要插入两个span
ul插入 li
3 append可以插入多个元素 appendChild 只能插入一个元素
createTextNode 创建文件节点
*/
let ul=document.querySelector('.clearfix')
// 遍历 data 数组
for (let index = 0; index < data.length; index++) {
//创建标签 以及添加标签内容
let li=document.createElement('li')
let img=document.createElement('img')
img.src=data[index].src
// console.log(img);
let h4=document.createElement('h4')
h4.innerText=data[index].title
let div=document.createElement('div')
div.classList.add('info')
// console.log(div);
let span1=document.createElement('span')
span1.innerText='高级'
// console.log(span1);
let span2=document.createElement('span')
span2.innerText=data[index].num
// console.log(span2);
// 添加文字节点
let tex1=document.createTextNode('•')
let tex2=document.createTextNode('人在学习')
// 组装 li插入 img h4 div
// appendChild 只能插入单个标签 方法一
// li.appendChild(img)
// li.appendChild(h4)
// li.appendChild(div)
// div 插入 span1 tex1 span2 tex2
// div.appendChild(span1)
// div.appendChild(tex1)
// div.appendChild(span2)
// div.appendChild(tex2)
// append 可以插入多个标签 方法二
li.append(img,h4,div)
div.append(span1,tex1,span2,tex2)
// ul 插入 li
ul.appendChild(li)
}
</script>
</body>
</html>
3 微博发布案例-点击生成-创建与插入-时间与文本同步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="css/weibo.css" />
</head>
<body>
<div class="w">
<div class="controls">
<img src="images/tip.png" alt="" /><br />
<textarea
placeholder="说点什么吧..."
id="area"
cols="30"
rows="100"
maxlength="200"
></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
</div>
<div class="contentList">
<ul>
<!-- <li>
<div class="info">
<img class="userpic" src="./images/9.5/06.jpg" />
<span class="username">张良</span>
<p class="send-time">发布于 2022-4-7 15:12:23</p>
</div>
<div class="content">sdfdf</div>
<span class="the_del">X</span>
</li> -->
</ul>
</div>
</div>
<script>
let dataArr = [
{ uname: '司马懿', imgSrc: './images/9.5/01.jpg' },
{ uname: '女娲', imgSrc: './images/9.5/02.jpg' },
{ uname: '百里守约', imgSrc: './images/9.5/03.jpg' },
{ uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },
{ uname: '虞姬', imgSrc: './images/9.5/05.jpg' },
{ uname: '张良', imgSrc: './images/9.5/06.jpg' },
{ uname: '安其拉', imgSrc: './images/9.5/07.jpg' },
{ uname: '李白', imgSrc: './images/9.5/08.jpg' },
{ uname: '阿珂', imgSrc: './images/9.5/09.jpg' },
{ uname: '墨子', imgSrc: './images/9.5/10.jpg' },
{ uname: '鲁班', imgSrc: './images/9.5/11.jpg' },
{ uname: '嬴政', imgSrc: './images/9.5/12.jpg' },
{ uname: '孙膑', imgSrc: './images/9.5/13.jpg' },
{ uname: '周瑜', imgSrc: './images/9.5/14.jpg' },
{ uname: '老夫子', imgSrc: './images/9.5/15.jpg' },
{ uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
{ uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },
{ uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },
{ uname: '露娜', imgSrc: './images/9.5/19.jpg' },
{ uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },
{ uname: '黄忠', imgSrc: './images/9.5/21.jpg' },
{ uname: '百里玄策', imgSrc: './images/9.5/22.jpg' },
];
let tex=document.querySelector('textarea')
let useCount=document.querySelector('.useCount')
let send=document.querySelector('button')
let ul=document.querySelector('ul')
// 点击
send.addEventListener('click',function(){
// 生成li
let li=document.createElement('li')
// 生成li里面的三标签,添加类名
let info=document.createElement('div')
info.classList.add('info')
// 第一个div里面再生成三个标签,添加类名
// 声明一个变量,然后调用函数 随机数组下标
let user=grtNum();
// 头像
let img=document.createElement('img')
img.classList.add('userpic')
img.src=user.imgSrc
// 名字
let username=document.createElement('span')
username.classList.add('username')
username.innerText=user.uname
// 发布时间
let sendTime=document.createElement('p')
sendTime.classList.add('send-time')
sendTime.innerText=`发布于 ${grtTime()}`
// 文字内容
let content=document.createElement('div')
content.classList.add('content')
content.innerText=tex.value
// 删除
let the_del=document.createElement('span')
the_del.classList.add('the_del')
the_del.innerText='X'
// 第一个div插入里面的标签
info.append(img,username,sendTime)
// li里面插入三标签
li.append(info,content,the_del)
// ul插入li
ul.appendChild(li)
// 点击后文本域清0,底下数字也清0
tex.value=''
useCount.innerText=0
})
// w文本域 input事件
tex.addEventListener('input',function(){
useCount.innerText=tex.value.length
})
// 函数 随机数,调用图片 名字
function grtNum(){
// 随机公式 Math.round(Math.random()*(max-min)+min)
let index=Math.round(Math.random()*dataArr.length-1);
let user=dataArr[index];
return user;
// console.log(dataArr[index]);
}
// 封装一个函数 获取时间
function grtTime(){
let data=new Date;
let year= data.getFullYear() //年
let month= data.getMonth()+1//月
let day= data.getDate()//日
let hours= data.getHours()//时
let minutes= data.getMinutes()//分
let second= data.getSeconds()//秒
// 时间补0
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
second = second < 10 ? '0' + second : second;
return `${year}-${month}-${day}-${hours}:${minutes}:${second}`
}
</script>
</body>
</html>
3-1 微博案例-优化做法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="css/weibo.css" />
</head>
<body>
<div class="w">
<div class="controls">
<img src="images/tip.png" alt="" /><br />
<textarea
placeholder="说点什么吧..."
id="area"
cols="30"
rows="100"
maxlength="200"
></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
</div>
<div class="contentList">
<ul>
<!-- <li>
<div class="info">
<img class="userpic" src="./images/9.5/06.jpg" />
<span class="username">张良</span>
<p class="send-time">发布于 2022-4-7 15:12:23</p>
</div>
<div class="content">sdfdf</div>
<span class="the_del">X</span>
</li> -->
</ul>
</div>
</div>
<script>
let dataArr = [
{ uname: '司马懿', imgSrc: './images/9.5/01.jpg' },
{ uname: '女娲', imgSrc: './images/9.5/02.jpg' },
{ uname: '百里守约', imgSrc: './images/9.5/03.jpg' },
{ uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },
{ uname: '虞姬', imgSrc: './images/9.5/05.jpg' },
{ uname: '张良', imgSrc: './images/9.5/06.jpg' },
{ uname: '安其拉', imgSrc: './images/9.5/07.jpg' },
{ uname: '李白', imgSrc: './images/9.5/08.jpg' },
{ uname: '阿珂', imgSrc: './images/9.5/09.jpg' },
{ uname: '墨子', imgSrc: './images/9.5/10.jpg' },
{ uname: '鲁班', imgSrc: './images/9.5/11.jpg' },
{ uname: '嬴政', imgSrc: './images/9.5/12.jpg' },
{ uname: '孙膑', imgSrc: './images/9.5/13.jpg' },
{ uname: '周瑜', imgSrc: './images/9.5/14.jpg' },
{ uname: '老夫子', imgSrc: './images/9.5/15.jpg' },
{ uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
{ uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },
{ uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },
{ uname: '露娜', imgSrc: './images/9.5/19.jpg' },
{ uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },
{ uname: '黄忠', imgSrc: './images/9.5/21.jpg' },
{ uname: '百里玄策', imgSrc: './images/9.5/22.jpg' },
];
/*1 给发布按钮绑定点击事件
1 生成一个li标签
1 给li添加属性和子元素
2 获取文本域的内容 设置到对应的标签中
2 插入到ul中
2 给文本域绑定 input事件
获取文字的长度 设置对应的标签上 文字个数标签上
3 给删除标签 绑定点击事件
1 获取它的父节点 parentNode
2 让它父节点 删除自己 remove()
*/
// 获取元素 发布按钮
let tex=document.querySelector('textarea')
let useCount=document.querySelector('.useCount')
let send=document.querySelector('button')
let ul=document.querySelector('ul')
// 点击
send.addEventListener('click',function(){
let user=grtNum();
let liHtml=`
<li>
<div class="info">
<img class="userpic" src="${user.imgSrc}" />
<span class="username">${user.uname}</span>
<p class="send-time">发布于 ${grtTime()}</p>
</div>
<div class="content">${tex.value}</div>
<span class="the_del">X</span>
</li>
`;
// 每次点击 在旧标签的基础上 拼接多一个标签
ul.innerHTML+=liHtml;
tex.value='';
useCount.innerHTML=0
})
// 文本域,input事件
tex.addEventListener('input',function(){
useCount.innerHTML=tex.value.length
})
// 函数 随机数,调用图片 名字
function grtNum(){
// 随机公式 Math.round(Math.random()*(max-min)+min)
let index=Math.round(Math.random()*dataArr.length-1);
let user=dataArr[index];
return user;
// console.log(dataArr[index]);
}
// 封装一个函数 获取时间
function grtTime(){
let data=new Date;
let year= data.getFullYear() //年
let month= data.getMonth()+1//月
let day= data.getDate()//日
let hours= data.getHours()//时
let minutes= data.getMinutes()//分
let second= data.getSeconds()//秒
// 时间补0
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
second = second < 10 ? '0' + second : second;
return `${year}-${month}-${day}-${hours}:${minutes}:${second}`
}
</script>
</body>
</html>
