前言
学习前端第二个月，最近想进学校工作室，没有拿得出手的demo，使用仿写了一个简易版微信朋友圈，希望大牛们给我指点一哈
提示：以下是本篇文章正文内容，下面案例可供参考
最终样式：
可以使用接入数据库等方式储存数据，也可以用localstorge等方法储存数据，看大家的喜爱
一、写代码前的准备
写代码最重要的是要使其易于维护，如果不先把思路想好，就会胡写乱写。我一开始就是从上而下的排版布局，每一个板块之间没有联系性。这样会导致代码难以阅读和维护。下面是我的小思路
1.拆分微信朋友圈的功能：
迷你朋友圈实现赞、取消赞、评论别人、删除别人的评论、发表动态等几大功能
2.先将固定的样式写出来，因为朋友圈是非固定的，所以朋友圈的加入等等怎么做到动态加载等是最为关键的
可以先将一个朋友圈模板写出来，然后利用哲模板来布局
3.怎么样让代码易于维护？
使用面向对象的方法，因为每一条朋友圈的功能都是类似的，所以将朋友圈作为对象来布局
二、排版
html部分和css部分不需要多讲，代码如下：
HTML：
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>朋友圈</title>
<meta name="viewport" content="width=375,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/defaultCss.css" />
<link rel="stylesheet" type="text/css" href="css/commend.css" />
<link rel="stylesheet" type="text/css" href="./css/sendpyqPage.css" />
<link rel="stylesheet" type="text/css" href="css/choosePic.css" />
</head>
<body>
<!-- 这里放固定的标签 -->
<div id="deleteContain">
<div class="zhezhao">
</div>
<div id="deleteCommend">
<div class="deleteChoic">删除</div>
<div class="cancelChoic">取消</div>
</div>
</div>
<div class="header">
<span style="color: white; font-size: 30px; font-weight: 400;"></span>
<img class="toPYQPage" src="img/相册%20(1).png">
</div>
<div id="bgPic"></div>
<!-- 点击bgPic——发布朋友圈的页面 -->
<div id="sendPYQPage">
<div class="sendPYQHeader">
<span class="cancelSend">取消</span>
<span class="title">发表文字</span>
<span class="sendPYQ" id="cannotSend">发表</span>
</div>
<div class="PYQTextContain">
<textarea class="PYQtext" placeholder="缩缩此刻的想法"></textarea>
</div>
<ul class="otherSet">
<li class="line"></li>
<li class="option">所在位置</li>
<li class="line"></li>
<li class="option">提醒谁看</li>
<li class="line"></li>
<li class="option">谁可以看</li>
<li class="line"></li>
<li class="addPic">
<label class="inputPicConatin" for="picurl">
<input hidden="hidden" type="file" id="picurl"/>添加图片
</label>
</li>
<li class="line"></li>
</ul>
<div class="choosePic">
<ul>
</ul>
</div>
<!-- 图片点击后跳出样式，删除照片 -->
<div id="deletePicContain">
<div class="zhezhao"></div>
<div id="deleteCommend">
<div class="deleteChoic">删除</div>
<div class="cancelChoic">取消</div>
</div>
</div>
</div>
<ul id="newsList">
</ul>
</body>
<script src="js/PYQClass.js" type="text/javascript" charset="utf-8"></script>
<script src="js/sendPYQfn.js" type="text/javascript" charset="utf-8"></script>
</html>
css：
//choicPic.css:
.choosePic{
height: 320px;
width: 320px;
margin: 5px auto;
}
.choosePic ul{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.choosePic ul li{
margin-top: 5px;
}
.choosePic ul li,.choosePic ul li img{
width: 100px;
height: 100px;
}
.picAndVideoContainBox{
list-style: none;
display: flex;
flex-wrap: wrap;
}
.picAndVideoContainBox li img{
width: 100px;
height: 100px;
transition: all 0.2s;
}
//commend.css:
.commendContain .zanList{
display: flex;
padding: 5px 5px;
box-sizing: border-box;
float: left;
}
.commendContain .zanList .zanImg{
width: 12px;
height: 12px;
}
.commendContain .zanList img{
width: 12px;
height: 12px;
}
.commendContain .zanList .whoZan{
/* display: inline-block; */
color: #2f4ea6;
font-weight: 900;
font-size: 12px;
/* padding: 10px 0; */
}
.commendList{
padding: 0 10px;
}
.commendList .commendTextList li{
display: block;
font-size: 13px;
font-weight: 700;
overflow: hidden;
}
.commendList .commendTextList li img{
height: 13px;
width: 13px;
}
.commendList .commendTextList li .commenderName{
color: #2f4ea6;
}
.commendInput{
width: 100%;
height: 40px;
display: flex;
position: fixed;
z-index: 10;
bottom: 0;
left: 0;
align-items: center;
justify-content: space-evenly;
background-color: #eeeeee;
}
.commendOtherInput{
width: 100%;
height: 40px;
display: none;
position: fixed;
bottom: 0;
left: 0;
align-items: center;
justify-content: space-evenly;
background-color: #eeeeee;
}
.commendInput .canSend,.commendOtherInput .canSend{
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #008000;
color: white;
}
.commendInput .cannotSend,.commendOtherInput .cannotSend{
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #C8C8C8;
color: black;
}
.commendInput input,.commendOtherInput input{
border: none;
box-sizing: border-box;
width: 300px;
height: 30px;
padding: 5px;
}
//default.css:
* {
margin: 0;
padding: 0;
}
button{
border: none;
outline: none;
background-color: inherit;
}
body,
html {
position: relative;
height: 100vh;
width: 100vw;
}
ul {
list-style: none;
}
input{
outline: none;
}
/* 解决span标签超出父元素后自动换行的问题 */
span {
white-space: normal;
word-break: break-all;
}
div {
white-space: normal;
word-break: break-all;
}
/* 固定标签的样式 */
#deleteContain{
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
display: none;
}
.zhezhao{
width: 100%;
height:100%;
background-color: black;
opacity: 0.7;
}
#deleteCommend{
color: #4169E1;
position: fixed;
bottom: -10px;
padding: 10px 0;
box-sizing: border-box;
text-align: center;
width: 100vw;
height: 100px;
background-color: white;
border-radius: 10px;
z-index: 5;
color: #000000;
font-weight: 500;
/* display: none; */
}
.deleteChoic{
color: red;
height: 30px;
border-bottom: 4px solid #EEEEEE;
}
.cancelChoic{
height: 40px;
line-height: 40px;
}
.userContain {
padding: 10px 0;
width: 375px;
display: flex;
justify-content: space-evenly;
}
.userContain .userHeadImg {
height: 40px;
width: 40px;
border-radius: 5px;
background-color: aqua;
}
.userContain .otherContain {
width: 300px;
}
.userContain .otherContain .newsOwnerName {
color: royalblue;
margin-bottom: 5px;
}
.userContain .otherContain .userTextContain {
margin: 5px 0;
}
.userContain .otherContain .userPicAndVideoContain {
margin: 5px 0;
}
.userContain .otherContain .dateAndChoic {
position: relative;
margin: 3px 0;
height: 25px;
display: flex;
justify-content: space-between;
align-items: center;
}
.userContain .otherContain .dateAndChoic .date {
font-size: 13px;
color: #a3a3a3;
}
.userContain .otherContain .dateAndChoic .choic {
display: block;
height: 15px;
width: 25px;
border-radius: 3px;
background-color: #dedede;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.userContain .otherContain .dateAndChoic .choic .point {
display: block;
height: 4px;
width: 4px;
border-radius: 50%;
background-color: mediumblue;
}
.userContain .otherContain .dateAndChoic .commendChoic {
position: absolute;
box-sizing: border-box;
bottom: 0;
right: 30px;
overflow: hidden;
/* height: 0;
width: 0;*/
height: 25px;
width: 130px;
border-radius: 3px;
padding: 5px;
background: #2f2f2f;
color: white;
font-size: 10px;
transition: all 1s;
}
.userContain .otherContain .dateAndChoic .commendChoic .choicList {
display: flex;
}
.userContain .otherContain .dateAndChoic .commendChoic .choicList div {
flex: 1;
height: 15px;
text-align: center;
}
.userContain .otherContain .dateAndChoic .commendChoic div img {
height: 100%;
width: 25%;
}
.userContain .otherContain .dateAndChoic .commendChoic .choicList div:nth-child(1) {
border-right: 1px solid black;
}
.bottomLine {
height: 1px;
width: 100%;
background-color: #dcdcdc;
}
#newsList .commendContain {
display: flex;
flex-direction: column;
background-color: #eeeeee;
width: 300px;
border-radius: 3px;
}
#bgPic {
height: 200px;
width: 100vw;
background-image: url(../img/22222.jpg);
background-size: 100% 100%;
}
.header {
height: 40px;
width: 100vw;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
line-height: 40px;
padding: 10px 15px;
}
.header img {
height: 20px;
width: 20px;
}
.whoZanList {
font-size: 10px;
font-weight: bolder;
color: #2f4ea6;
}
#newsList li {
position: relative;
}
//sendpyqPage.css:
#sendPYQPage{
width: 100%;
height: 100%;
background-color: white;
position: fixed;
overflow: hidden;
z-index: 5;
/* top: 100vh；开始的时候藏在下面 */
top: 100vh;
transition: all 0.5s;
}
.sendPYQHeader{
display: flex;
height: 30px;
justify-content: space-between;
align-items: center;
padding: 0 10px;
}
.title{
font-weight: bold;
font-size: 14px;
}
.sendPYQ{
height: 25px;
line-height: 25px;
text-align: center;
width: 40px;
font-size: 13px;
}
#cannotSend{
background-color: #DCDCDC;
color: #808080;
}
#canSend{
background-color: green;
color: white;
}
.PYQTextContain{
height: 180px;
width: 100%;
padding: 20px 40px;
box-sizing: border-box;
}
.PYQtext{
height: 100%;
width: 100%;
border: 0;
outline: none;
resize: none;
/* overflow: hidden; */
}
.otherSet{
height: 100px;
width: 100%;
padding: 0 40px;
box-sizing: border-box;
list-style: none;
display: flex;
flex-direction: column;
justify-content: center;
}
.line{
width: 100%;
height: 1px;
background: #c8c8c8;
}
.option{
height: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.inputPicConatin{
display: block;
width: 100%;
height: 100%;
}
#deletePicContain{
position: fixed;
top: 0;
left: 0;
display: none;
width: 100vw;
height: 100%;
}
html和css都是基础，直接来到JavaScript部分
三、js部分
1.使用面向对象编程
js提供了类似与类的方法class,定义方法如下（例子）class people{
constructor(name) {
this.name = name;
}
sayname(){
console.log(this.name);
}
};
let xiaoming = new people("xiaoming");
xiaoming.sayname();// xiaoming
2.获取固定元素节点
//pyq全部列表
const newList = document.querySelector("#newsList");
let pyqListArr = []; //储存朋友圈列表的信息 可以通过数据库形式存储，方便以后的操作
//发送朋友圈信息
const toPYQPage = document.querySelector(".toPYQPage");
//朋友圈界面
const sendPYQPage = document.querySelector("#sendPYQPage");
//取消发送朋友圈的按钮
const cancelSend = document.querySelector(".cancelSend");
//朋友圈复写框
const PYQtext = document.querySelector(".PYQtext");
//发表内容的按钮
const sendPYQ = document.querySelector(".sendPYQ");
//朋友圈加载图片
const picurl = document.querySelector("#picurl");
//点击事件代理
const addPic = document.querySelector(".addPic");
//点击的图片数组
let picUrlValue = [];
//填入到choosePic中
const choosePic = document.querySelector(".choosePic ul");
//朋友圈写入的内容
let PYQTextValue = "";
3.选取朋友圈作为对象
代码如下（示例）：
// 构造朋友圈对象
class PYQLIST {
constructor(dataName, userHeadImg, newOwnerName, userTextContain, userPicAndVideo, elem, time, zanListArr = [],
commendTextListArr = []) {
this.dataName = dataName; //用户名称
this.userHeadImg = userHeadImg; //用户头像
this.newOwnerName = newOwnerName; //用户网名
this.userTextContain = userTextContain; //用户朋友圈的文本
this.userPicAndVideo = userPicAndVideo; //用户朋友圈的图片或者视频
this.time = new Date() - time; //时间
this.zanListArr = zanListArr; //把所有赞的人的列表储存在数组中
this.commendTextListArr = commendTextListArr //评论的列表 列表以数组的形式添加
this.elem = elem; //元素的节点 创建的时候将创建的元素 作为参数传入
this.myCommendText = ""; //评论内容
this.commendWho = ""; //评论谁
this.wantDelect = -1;
}
//对象的方法
//初始化
init() {
this.randonElem();
//渲染elem元素
//操作完将元素插入到newlist中
newList.appendChild(this.elem)
//初始化的函数找到元素节点
//评论区contain
this.commendContain = this.elem.querySelector(".commendContain")
//赞列表
this.zanList = this.elem.querySelector(".zanList")
//bottomLine元素的渲染
this.bottomLine = this.elem.querySelector(".bottomLine")
//谁赞了文本
this.whoZanList = this.elem.querySelector(".whoZanList")
//评论内容
this.commendTextList = this.elem.querySelector(".commendTextList")
//点点框
this.choic = this.elem.querySelector(".choic");
//选项框
this.commendChoic = this.elem.querySelector(".commendChoic");
//选项
this.choicList = this.elem.querySelector(".choicList")
//评论框
this.commendInput = this.elem.querySelector(".commendInput");
//评论input
this.inputElem = this.elem.querySelector(".inputConatin");
//遮罩和删除样式
this.deleteContain = this.elem.querySelector("#deleteContain")
//删除 取消按钮
this.deleteCommend = this.elem.querySelector("#deleteCommend")
//加入元素
this.pushToZanList()
this.pushToCommendList()
//设置样式
this.showCommendContain()
//事件监听begin
// 点击图片列表事件
// 点击图片放大事件
// this.picAndVideoContainBox.addEventListener("click",(e)=>{
// e = e||window.event;
// const elem = e.target;
// if(elem.parentElement.dataset.index){//点击到了一个图片
// // 将图片的索引保存
// //获取图片的高度
// elem.style.position = "fixed";
// elem.style.width = "100%";
// elem.style.height = "300px";
// elem.style.zindex = 100
// // window.clientHeight
// elem.style.left = 0;
// elem.style.top = (window.innerHeight - 300)/2 + "px";
// }
// })
//点点框点击事件
this.choic.addEventListener("click", () => {
//箭头函数改变this指向
setTimeout(()=>{
this.commendChoic.style.display = "block"
},1)
})
//选项框点击事件
this.choicList.addEventListener("click", (e) => {
e = e || window.event;
e.cancelBubble = true
//精确找到元素节点
const element = e.target.className ? e.target : e.target.parentElement;
if (element == this.choicList.children[0]) {
//赞
// 判断原理啊有没有赞过
if (element.className == "zan") {
//没赞过
element.className = "quxiao";
element.children[1].innerHTML = "取消"
console.log(this.zanListArr)
this.zanListArr.push({
ID: "我",
user: "self"
});
} else {
//赞过
element.className = "zan";
element.children[1].innerHTML = "赞"
this.zanListArr = this.zanListArr.filter(item => item.user != "self")
}
this.pushToZanList()
//向this.zanListArr添加元素
} else {
//点击评论
//判断可以发送否
this.commendInput.style.display = "flex";
this.inputElem.setAttribute("placeholder", "点我评论鸭~")
//获取评论input
this.inputElem = this.elem.querySelector(".inputConatin");
this.inputElem.focus();
}
//点击过后将选项框隐藏
this.commendChoic.style.display = "none"
//重新设置样式
this.showCommendContain()
})
//点击发送评论事件
this.commendInput.children[1].addEventListener("click", (e) => {
e = e || window.event;
e.cancelBubble = true
if (this.commendInput.children[1].className == "canSend") {
if (this.commendWho == "") {
this.commendTextListArr.push({
IDname: "我",
text: this.myCommendText,
user: "self",
index: Math.random() * 100000000
})
} else {
this.commendTextListArr.push({
IDname: "我",
text: this.myCommendText,
user: "self",
index: Math.random() * 100000000,
method: this.commendWho
})
//重置this.commendWho
this.commendWho = ""
}
//将input的样式等取消掉
this.commendInput.style.display = "none";
this.inputElem.value = ""
this.myCommendText = "";
this.commendInput.children[1].className = "cannotSend"
this.pushToCommendList();
}
this.showCommendContain()
})
//滑动评论框事件
this.commendInput.addEventListener("touchmove", (e) => {
e = e || window.event;
e.cancelBubble = true
})
//评论input的点击事件
this.commendInput.addEventListener("click", (e) => {
e = e || window.event;
e.cancelBubble = true
})
//评论内容的点击事件
this.commendTextList.addEventListener("click", (e) => {
//精确找到元素节点
let element = (e.target.className == "other" || e.target.className == "self") ? e.target : e.target.parentElement;
//判断是自己的评论内容还是别人的评论内容
if (element.className == "self") {
this.wantDelect = element.dataset.index;
console.log(this.wantDelect)
this.deleteContain.style.display = "block"
} else if (element.className == "other") {
//是别人的
setTimeout(()=>{
this.commendInput.style.display = "flex";
},1)
const commendPeopleName = element.children[0].children[0].innerHTML;
this.inputElem.setAttribute("placeholder", "回复" + commendPeopleName);
this.commendWho = commendPeopleName;
this.inputElem.focus();
}
})
//点击遮罩的事件
this.deleteCommend.addEventListener("click", (e) => {
e = e || window.event;
if (e.target.className == "deleteChoic") {
//遍历查找这条朋友圈
this.commendTextListArr = this.commendTextListArr.filter(item => item.index != this.wantDelect)
//重新渲染
this.pushToCommendList()
//设置样式
this.showCommendContain()
this.deleteContain.style.display = "none"
} else if (e.target.className == "cancelChoic") {
this.deleteContain.style.display = "none"
}
})
//onkeydown事件
this.inputElem.addEventListener("keyup", (e) => {
e = e || window.event;
this.myCommendText = this.inputElem.value;
if (this.myCommendText == "") {
this.commendInput.children[1].className = "cannotSend"
} else {
this.commendInput.children[1].className = "canSend"
}
})
//点击body事件
document.querySelector("body").addEventListener("click", () => {
this.commendChoic.style.display = "none";
this.commendInput.style.display = "none";
})
document.querySelector("body").addEventListener("touchmove", () => {
this.commendChoic.style.display = "none";
this.commendInput.style.display = "none";
})
//事件监听end
}
// 初始化渲染elem
randonElem() {
// 给父元素加一个类名
this.elem.classList.add("news");
//innerhtml
//一开始没有人赞就将元素display none
this.elem.innerHTML =
`
<!-- 这里放固定的标签 -->
<div id="deleteContain">
<div class="zhezhao"></div>
<div id="deleteCommend">
<div class="deleteChoic">删除</div>
<div class="cancelChoic">取消</div>
</div>
</div>
<!-- 这里放内容 -->
<div class="userContain">
<div class="userHeadImg"><img src="${
this.userHeadImg}"></img></div>
<div class="otherContain">
<h5 class="newsOwnerName">${
this.newOwnerName}</h5>
<div class="userTextContain">${
this.userTextContain}</div>
<div class="userPicAndVideoContain"><ul class="picAndVideoContainBox"></ul></div>
<div class="dateAndChoic">
<span class="date">${
this.time}分钟前</span>
<div class="choic"><span class="point"></span><span class="point"></span></div>
<div class="commendChoic" style="display: none;">
<div class="choicList">
<div class="zan"><img src="img/赞%20(1).png"> <span>赞</span></div>
<div class="pinglun"><img src="img/评%20论%20(1).png"> 评论</div>
</div>
</div>
</div>
<div class="commendContain">
<div class="zanList">
<img src="img/点赞.png">
<div class="whoZanList"></div>
</div>
<div class="bottomLine" ></div>
<div class="commendList">
<ul class="commendTextList">
</ul>
</div>
</div>
</div>
</div>
<div class="bottomLine"></div>
<div class="commendInput" style="display: none;"><input autofocus="autofocus" class="inputConatin" type="text" placeholder="" /><div class="cannotSend">发送</div></div></div>
`
//
//添加元素
// 存放图片的元素盒子
this.picAndVideoContainBox = this.elem.querySelector(".picAndVideoContainBox");
//循环将数组内容填入
for (let index in this.userPicAndVideo) {
const item = this.userPicAndVideo[index]
const li = document.createElement("li");
li.dataset.index = index;
li.innerHTML = `<img src="${
item}"></img>`;
this.picAndVideoContainBox.appendChild(li);
}
}
//判断评论去的显示情况
showCommendContain() {
//都没有，整个都不显示
if (this.zanListArr.length == 0 && this.commendTextListArr.length == 0) {
this.commendContain.style.display = "none";
} else {
this.commendContain.style.display = "flex";
if (this.zanListArr.length != 0) {
this.zanList.style.display = "flex"
} else {
this.zanList.style.display = "none"
}
}
}
//向赞列表添加元素
pushToZanList() {
let that = this;
this.whoZanList.innerHTML = "";
//循环将列表添入元素中
for (let index in this.zanListArr) {
const item = this.zanListArr[index];
//创建一个span元素
const span = document.createElement("span");
//span加className
span.innerHTML = item.ID;
if (index < this.zanListArr.length - 1) {
span.innerHTML += ","
}
// 添加到whozanlist中
that.whoZanList.appendChild(span)
}
}
//向评论列表填入
pushToCommendList() {
this.commendTextList.innerHTML = "";
for (let item of this.commendTextListArr) {
//创建一个li元素
const li = document.createElement("li");
li.dataset.index = item.index;
li.className = item.user
if (item.method) {
li.innerHTML =
`<span ><span class="commenderName">${
item.IDname}</span> 回复 <span class="commenderName">${
item.method}</span>:${
item.text}</span>`
} else {
li.innerHTML = `<span ><span class="commenderName">${
item.IDname}：</span>${
item.text}</span>`
}
this.commendTextList.appendChild(li)
}
}
}
解析：
将每一个朋友圈都有的方法写入对象PYQList中，用js渲染页面，实现动态的赞、取消赞、发表朋友圈（通过新实例化一个朋友圈）等等
4.实例化一个朋友圈
朋友圈对象已经构造出来了，先实例化一个朋友圈来康康成果吧
//创建一个 朋友圈实例
let sendDate = new Date();//
console.log(sendDate)
const myPYQ = document.createElement("li")
//为这个样式朋友圈添加一些赞列表和评论列表
var pyq1zanList = [{
ID: "邓大牛",
user: "other"
},
{
ID: "戴大牛",
user: "other"
},
{
ID: "陈大牛",
user: "other"
}
];
var pyq1CommendList = [{
IDname: "我",
text: "222222222",
user: "self",
index: Math.random() * 10000000
},
{
IDname: "邓大牛",
text: "1111111111111111111111111111111111111111111111111111",
user: "other",
index: Math.random() * 10000000,
method: "我"
}
]
var pyq1 = new PYQLIST("黄思杰", "", "我", "11111111111111111111111111111111111111111111", ["./img/22222.jpg","./img/1.jfif"], myPYQ, sendDate, pyq1zanList,
pyq1CommendList);
pyqListArr.unshift(pyq1)
//初始化渲染
for (let item of pyqListArr) {
item.init()
}
index的作用是用于唯一标记这个朋友圈（有很多方法可以做到这个目的，但是我小小的偷懒了）如果有什么推荐的方法欢迎在下方回复
注意：每次实例化一个朋友圈都要将朋友圈重新渲染一次奥（for循环遍历pyqListArr——每一个都渲染一遍）
5.发送朋友圈
通过上一步我们可以在页面中看到我们实例化出来的朋友圈，接下来我们要做的就是实现发送朋友圈的功能
// 获取deletePic的元素
const deletePic = document.querySelector("#deletePicContain");
// 删除按钮
const deletePicBtn = document.querySelector("#deletePicContain .deleteChoic")
// 取消删除按钮
const cancelDeletePic = document.querySelector("#deletePicContain .cancelChoic")
//保存点击的图片的索引
let wantDelectPic = -1;// -1保证不会影响到操作
//加载图片事件
//创建完成
//添加入朋友圈列表
//1.点击发送朋友圈图标事件
toPYQPage.addEventListener("click", () => {
sendPYQPage.style.top = 0
})
//2.朋友圈发送页面出现后的点击事件
cancelSend.addEventListener("click", () => {
sendPYQPage.style.top = "100vh"
})
//3.1.朋友圈内容的输入事件
PYQtext.addEventListener("keyup", () => {
PYQTextValue = PYQtext.value;
if (PYQTextValue == "") {
sendPYQ.id = "cannotSend"
} else {
sendPYQ.id = "canSend"
}
})
//3.2.选择照片事件
picurl.addEventListener("change", function(e) {
var file = picurl.files[0];
if(file){
//确保有选择文件
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
// 文件内容不能重复
if(!(picUrlValue.some(item => item == e.target.result))){
// 添加到数组中
picUrlValue.push(e.target.result);
// 渲染到页面中
const li = document.createElement("li");
li.setAttribute("data-index",picUrlValue.length - 1)
li.innerHTML = `<img src="${
e.target.result}" >`
choosePic.appendChild(li);
}
};
}
})
// 3.3删除照片事件
//点击图片
choosePic.addEventListener("click",(e)=>{
e = e||window.event;
let elem = e.target.parentElement;
if(elem.dataset.index){
//点击到了一个图片
// 将图片的索引保存
wantDelectPic = elem.dataset.index
deletePic.style.display = "block";//浮现删除遮罩
}
})
// 3.4点击到图片，选择删除或者取消删除
// 点击删除
deletePicBtn.addEventListener("click",()=>{
const deleteOne = picUrlValue[wantDelectPic]
picUrlValue = picUrlValue.filter(item => item != deleteOne)
// 重新渲染图片
choosePic.innerHTML = ""
for (let index in picUrlValue) {
const item = picUrlValue[index];
const li = document.createElement("li");
li.setAttribute("data-index",index)
li.innerHTML = `<img src="${
item}" >`
choosePic.appendChild(li);
}
//点击完成将遮罩取消
deletePic.style.display = "none";
//初始化wantDelectPic
wantDelectPic = -1;
})
// 点击取消
cancelDeletePic.addEventListener("click",()=>{
//点击完成将遮罩取消
deletePic.style.display = "none";
//初始化wantDelectPic
wantDelectPic = -1;
})
//4.输入内容，将内容传入数组中
sendPYQ.addEventListener("click", () => {
// 获取当前时间
let nowDate = new Date()
if (sendPYQ.id == "canSend") {
//可以发送
const myPYQ = document.createElement("li")
let pyq2 = new PYQLIST("黄思杰", "", "我", PYQTextValue, picUrlValue, myPYQ,nowDate)
pyqListArr.unshift(pyq2)
//取消其他样式
sendPYQ.id = "cannotSend";
PYQTextValue = "";
picUrlValue = [];
choosePic.innerHTML = ""
PYQtext.value = "";
sendPYQPage.style.top = "100vh"
}
// 每发送一次,重新渲染朋友圈
for (let item of pyqListArr) {
item.init()
}
})