微博案例方式1
方式一：通过新建节点，拼接节点的方式来生成动态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>微博综合案例</title>
<link rel="stylesheet" href="css/weibo.css" />
</head>
<body>
<div class="w">
<div class="controls">
<img src="images copy/tip.png" alt="" /><br />
<textarea placeholder="说点什么吧..." id="area" cols="30" rows="100" maxlength="200"></textarea>
<div>
<span class="useCount"></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>
// 需求1 检测用户输入的字数
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' },
];
// 获取文本域dom 元素
let textarea = document.querySelector('textarea')
// console.log(textarea);
// 获取用户输入字数 dom元素
let useCount = document.querySelector('.useCount')
// console.log(useCount);
// 获取发布按钮
let send = document.querySelector('#send')
// 获取ul 标签元素
let ul = document.querySelector('ul')
// 给文本域添加事件
textarea.addEventListener('input', function () {
// console.log('事件触发显示字数');
// 事件触发后，文本域内容长度=用户输入的字数
useCount.innerHTML = textarea.value.length
})
// 需求2： 新增留言s
// 创建一个小li，然后里面通过innerHTML追加数据
// 随机获取数据数组里面的内容,
// 利用时间对象将时间动态化
// 追加给 ul
// 给发布按钮添加事件监听
send.addEventListener('click', function () {
// 内容等于文本域的内容
let value = textarea.value
// 调用函数 随机的获取用户
let user = getRandomUser()
// 调用函数，当前的时间
let date1 = getFormatTime()
// 事件触发后，新添加了li 标签
let li = document.createElement('li')
// 新添加li里面的整个三个元素
// 新添加第一个div
let info = document.createElement('div')
// 添加class类名 为info
info.classList.add('info')
// 新添加info里面三个元素
// 新添加info里面的img元素
let userpic = document.createElement('img')
// 添加class类名
userpic.classList.add('userpic')
// 设置img路径，先写死测试占位置
userpic.src = user.imgSrc //改成数组中随机用户图片地址
// 新添加info里面的span元素
let userName = document.createElement('span')
// 添加class类名
userName.classList.add('username')
// 设置span文本内容，先写死测试占位置
userName.innerText = user.uname //改成数组中随机的名称
// 新添加info里面的p元素
let sendTime = document.createElement('p')
// 添加class类名
sendTime.classList.add('send-time')
// 设置p元素内容，先写死测试占位置
sendTime.innerText = `发布于 ${date1}`
// 新添加第二个div
let content = document.createElement('div')
// 添加class类名
content.classList.add('content')
// 设置div文本内容
content.innerText = textarea.value
// 新添加span标签
let the_del = document.createElement('span')
// 添加class类名
the_del.classList.add('the_del')
// 设置span内容为删除
the_del.innerText = 'x'
// 需求3：删除留言
// 给删除添加事件监听
the_del.addEventListener('click',function() {
// 事件触发删除自己
the_del.parentNode.remove()
})
// 小的三个元素追加到info里面
info.append(userpic, userName, sendTime)
// 整个三大元素追加到li
li.append(info, content, the_del)
// 追加到父元素 ul标签上
ul.appendChild(li)
// document.body.appendChild
// 需求4：重置 将表单域内容重置为空 将userCount里面的内容重置为0
// 用户输入字数情况
useCount.innerHTML = '0'
// 文本域内容清空
textarea.value = ''
})
// 获取随机数的头像和名称
function getRandomUser() {
// 生成了一个随机数，范围从0- 数组长度-1
let index = Math.round(Math.random() * (dataArr.length - 1))
// console.log(index);
// 让用户等于数组中的随机数
let user = dataArr[index]
// console.log(user);
return user
}
// 获取当前格式化时间
function getFormatTime() {
// new Date()可以获取当前日期对象，包括 年月日时分秒
// 设置当前的时间为最新的时间
let nowDate = new Date()
// console.log(nowDate);
// 获取当前的年份
let year = nowDate.getFullYear()
// 获取当前的月份
let month = nowDate.getMonth() + 1
// 获取当前的日期
let date = nowDate.getDate()
// 获取当前的小时
let hours = nowDate.getHours()
// 获取当前的分
let minutes = nowDate.getMinutes()
// 获取当前的秒数
let seconds = nowDate.getSeconds()
// 数字补0
// 设置条件，除了年剩下的小于10都要前面补0
month = month < 10 ? '0' + month : month
date = date < 10 ? '0' + date : date
hours = hours < 10 ? '0' + hours : hours
minutes = minutes < 10 ? '0' + minutes : minutes
seconds = seconds < 10 ? '0' + seconds : seconds
// 返回一个结果
return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`
}
</script>
</body>
</html>
微博案例方式2
方式二：拼接html
1.先写好基本的布局
2.引入数组对象数据（会单独写在JS中）
3.重点去拼接html
3.1先去拼接开头部分
3.2中间遍历对数组和对象的数据获取
3.3拼接结尾部分
4.把拼接好的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>微博综合案例</title>
<link rel="stylesheet" href="css/weibo.css" />
</head>
<body>
<div class="w">
<div class="controls">
<img src="images copy/tip.png" alt="" /><br />
<textarea placeholder="说点什么吧..." id="area" cols="30" rows="100" maxlength="200"></textarea>
<div>
<span class="useCount"></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>
// 需求1 检测用户输入的字数
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' },
];
// 获取文本域dom 元素
let textarea = document.querySelector('textarea')
// console.log(textarea);
// 获取用户输入字数 dom元素
let useCount = document.querySelector('.useCount')
// console.log(useCount);
// 获取发布按钮
let send = document.querySelector('#send')
// 获取ul 标签元素
let ul = document.querySelector('ul')
// 给文本域添加事件
textarea.addEventListener('input', function () {
// console.log('事件触发显示字数');
// 事件触发后，文本域内容长度=用户输入的字数
useCount.innerHTML = textarea.value.length
})
// 需求2： 新增留言s
// 创建一个小li，然后里面通过innerHTML追加数据
// 随机获取数据数组里面的内容,
// 利用时间对象将时间动态化
// 追加给 ul
// 给发布按钮添加事件监听
send.addEventListener('click', function () {
// 内容等于文本域的内容
let value = textarea.value
// 调用函数 随机的获取用户
let user = getRandomUser()
// 调用函数，当前的时间
let date1 = getFormatTime()
// 拼接html 开头
// 根据数据生成html
let htmlStr = `<div class="contentList">
<ul>`
// for循环，遍历数组
for (let index = 0; index < dataArr.length; index++) {
htmlStr = `<li>
<div class="info">
<img class="userpic" src="${user.imgSrc}" />
<span class="username">${user.uname}</span>
<p class="send-time">发布于 ${date1}</p>
</div>
<div class="content">${textarea.value}</div>
<span class="the_del">X</span>
</li>`
}
// 拼接html 结尾
htmlStr += ` </ul>
</div>`
// 最后每点击一次，在旧标签的基础上 拼接多一个标签
ul.innerHTML += htmlStr
// 方式二 暂时没有办法解决的 实现 点击删除！！ 事件委托技术 优雅解决
// 需求3：删除留言
// // 给删除添加事件监听
// the_del.addEventListener('click',function() {
// // 事件触发删除自己
// the_del.parentNode.remove()
// })
// 需求4：重置 将表单域内容重置为空 将userCount里面的内容重置为0
// 用户输入字数情况
useCount.innerHTML = '0'
// 文本域内容清空
textarea.value = ''
})
// 获取随机数的头像和名称
function getRandomUser() {
// 生成了一个随机数，范围从0- 数组长度-1
let index = Math.round(Math.random() * (dataArr.length - 1))
// console.log(index);
// 让用户等于数组中的随机数
let user = dataArr[index]
// console.log(user);
return user
}
// 获取当前格式化时间
function getFormatTime() {
// new Date()可以获取当前日期对象，包括 年月日时分秒
// 设置当前的时间为最新的时间
let nowDate = new Date()
// console.log(nowDate);
// 获取当前的年份
let year = nowDate.getFullYear()
// 获取当前的月份
let month = nowDate.getMonth() + 1
// 获取当前的日期
let date = nowDate.getDate()
// 获取当前的小时
let hours = nowDate.getHours()
// 获取当前的分
let minutes = nowDate.getMinutes()
// 获取当前的秒数
let seconds = nowDate.getSeconds()
// 数字补0
// 设置条件，除了年剩下的小于10都要前面补0
month = month < 10 ? '0' + month : month
date = date < 10 ? '0' + date : date
hours = hours < 10 ? '0' + hours : hours
minutes = minutes < 10 ? '0' + minutes : minutes
seconds = seconds < 10 ? '0' + seconds : seconds
// 返回一个结果
return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`
}
</script>
</body>
</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>生成静态页面</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
width: 800px;
height: 600px;
margin: 100px auto;
border: 1px solid pink;
/* background-color: yellowgreen; */
display: flex;
justify-content: space-evenly;
align-items: flex-end;
border-top: none;
border-right: none;
}
li {
position: relative;
width: 100px;
height: 400px;
background-color: pink;
}
span {
position: absolute;
top: -30px;
left: 50%;
width: 100%;
/* background-color: blue; */
text-align: center;
transform: translateX(-50%);
}
div {
position: absolute;
top: 100%;
left: 0px;
width: 100%;
/* background-color: red; */
text-align: center;
}
/* 写死高度测试 */
li:nth-child(1){
height: 150px;
}
li:nth-child(2){
height: 200px;
}
li:nth-child(3){
height: 100px;
}
li:nth-child(4){
height: 300px;
}
</style>
</head>
<body>
<ul>
<li>
<span>150</span>
<div>第一季度</div>
</li>
<li>
<span>200</span>
<div>第二季度</div>
</li>
<li>
<span>100</span>
<div>第三季度</div>
</li>
<li>
<span>300</span>
<div>第四季度</div>
</li>
</ul>
</body>
</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>生成动态柱形图</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
width: 800px;
height: 600px;
margin: 100px auto;
border: 1px solid pink;
/* background-color: yellowgreen; */
display: flex;
justify-content: space-evenly;
align-items: flex-end;
border-top: none;
border-right: none;
}
li {
position: relative;
width: 100px;
height: 400px;
background-color: pink;
}
span {
position: absolute;
top: -30px;
left: 50%;
width: 100%;
/* background-color: blue; */
text-align: center;
transform: translateX(-50%);
}
div {
position: absolute;
top: 100%;
left: 0px;
width: 100%;
/* background-color: red; */
text-align: center;
}
/* 写死高度测试 */
li:nth-child(1) {
height: 100px;
}
li:nth-child(2) {
height: 200px;
}
li:nth-child(3) {
height: 100px;
}
li:nth-child(4) {
height: 300px;
}
</style>
</head>
<body>
<!-- <ul> -->
<!-- <li>
<span>150</span>
<div>第一季度</div>
</li>
<li>
<span>200</span>
<div>第二季度</div>
</li>
<li>
<span>100</span>
<div>第三季度</div>
</li>
<li>
<span>300</span>
<div>第四季度</div>
</li> -->
<!-- </ul> -->
<script>
// 有四个弹窗，依次输入第一到第四季度的值
// 设置一个空数组，按顺序装四个季度的值
let array = []
// for 循环数组
for (let index = 0; index < 4; index++) {
array[index] = +prompt(`请输入第${index + 1}季度的值`)
// console.log(array[index]);
}
// 动态生成li标签
// 拼接li开头
let liHtml = `<ul>`
// 中间遍历li标签
for (let index = 0; index <= 3; index++) {
liHtml += ` <li>
<span>${array[index]}</span>
<div>第${index + 1}季度</div>
</li>
`
//<span>${array[index]}</span //li标签上的数字等于数组的下标
}
// 拼接li结尾
liHtml += `</ul>`
// 显示在网页上
document.write(liHtml)
</script>
</body>
</html>
