<!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>
* {
padding: 0px;
margin: 0px;
}
ul,
li {
list-style-type: none;
}
.main {
width: 1000px;
height: 500px;
margin: 50px auto;
background-color: #E7FEFE;
padding: 20px;
}
.main header {
width: 950px;
height: 150px;
margin: 0px auto;
border: 1px solid #ccc;
}
h3 {
margin: 10px 0px 10px 10px;
}
.text {
width: 900px;
height: 65px;
margin: 0px auto;
display: block;
resize: none;
background: #E7FEFE;
outline: none;
border: none;
border: 1px solid #ccc;
}
header .more {
font-size: 14px;
margin-left: 25px;
line-height: 30px;
}
header input[type=button] {
float: right;
margin-right: 30px;
margin-top: 5px;
}
.container {
width: 950px;
border: 1px solid #ccc;
margin: 30px auto;
display: none;
}
li {
width: 930px;
height: 30px;
background-color: #ccc;
margin: 10px auto;
line-height: 30px;
text-align: left;
}
.container input[type=button] {
float: right;
margin-top: 5px;
}
.alter {
width: 300px;
height: 100px;
margin: 0px auto;
position: relative;
top: -80px;
display: none;
}
.alterText {
display: block;
width: 250px;
height: 60px;
resize: none;
border: none;
outline: none;
border: 1px solid #5acfcf;
background-color: #dfffff;
}
.modify {
position: absolute;
right: 8px;
bottom: 30px;
}
</style>
</head>
<body>
<div class="main">
<header>
<h3>网友评论</h3>
<textarea name="text" id="" cols="30" rows="10" class="text" placeholder="我有话要说..."></textarea>
<span class="more"></span>
<input type="button" value="发布" disabled>
</header>
<div class="container">
<ul></ul>
</div>
<div class="alter">
<textarea name="alterText" id="" cols="30" rows="10" class="alterText"></textarea>
<input type="button" class="modify" value="修改 ">
</div>
</div>
<script>
var texts = document.querySelector('.text');
console.log(texts);
var btn = document.querySelector('input[type=button]');
console.log(btn);
var ul = document.querySelector('ul');
console.log(ul);
var alter = document.querySelector('.alter')
var alterText = document.querySelector('.alterText');
var modify = document.querySelector('.modify');
var container = document.querySelector('.container')
console.log(alterText);
var moreText = document.querySelector('.more');
var wordNumFlag = 20;
moreText.innerText = "还可以输入" + wordNumFlag + '个字';
texts.onkeyup = function() {
var wordLength = texts.value.length;
moreText.innerText = "还可以输入" + (wordNumFlag - wordLength) + "个字";
if (wordLength > 0 && wordLength <= wordNumFlag) {
btn.disabled = false;
} else {
btn.disabled = true;
}
}
btn.onclick = function() {
// 新建li,编辑，删除按钮
var li = document.createElement('li');
var liText = document.createElement('span');
var del = document.createElement('input');
var edits = document.createElement('input');
// 点击发布按钮,输入框的值传送到li中，然后情况输入框的值
liText.innerHTML = texts.value;
texts.value = '';
// 把创建的删除按钮和编辑按钮添加到li 中，再把li 添加到ul中
li.appendChild(liText);
li.appendChild(del);
li.appendChild(edits);
ul.insertBefore(li, ul.firstElementChild);
//把编辑和删除设为按钮
del.type = 'button';
edits.type = 'button';
del.value = "删除 ";
edits.value = "编辑 ";
console.log(edits);
// 给删除按钮绑定事件
del.onclick = function() {
ul.removeChild(li)
if (ul.children.length == 0) {
container.style.display = 'none'
}
}
// 给编辑按钮绑定事件
edits.onclick = function() {
alter.style.display = 'block';
alterText.value = liText.innerText
modify.onclick = function() {
liText.innerText = alterText.value;
alter.style.display = 'none';
alterText.value = '';
};
};
if (ul.children.length > 0) {
container.style.display = 'block';
}
moreText.innerText = "还可以输入" + wordNumFlag + '个字';
};
</script>
</body>
</html>
