技术要点：
1.使用JS 实现删除分享功能。
2.使用JS 实现分享点赞功能。
3.使用JS 实现评论功能:
关键点： 1.获得焦点时 onfocus
2.失去焦点时onblur
3.鼠标输入弹起来的时候 onkeyup
4.使用JS 实现评论分享功能。
获取当前月份：(newDate()).getMonth() +1
编程练习-慕课网
提示:
1. 取得取得输入框的value
2. value如果是空，则返回
3.创建一盒li节点
4.把value写入新创建的li节点的innerHTML
5.把li节点添加到留言列表节点下面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body {
padding: 20px;
}
#list {
list-style: none;
width: 400px;
border: 1px solid #666666;
}
li {
list-style: none;
background: #a7cbff;
margin: 10px 0;
}
textarea {
display: block;
width: 400px;
height: 50px;
margin: 10px 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
// 获取元素
var list = document.getElementById('list');
var text = document.getElementById('text');
var btn = document.getElementById('btn');
// 按钮添加点击事件，把输入框的内容显示到留言列表
btn.onclick = function(){
var val = text.value;
if(vai=='')return;
var li = document.createElement('li');
li.innerHTml = val;
list.appendChild(li);
text.value = '';
text.focus();
}
</script>
</head>
<body>
<ul id="list">
<li>评论1</li>
<li>评论2</li>
</ul>
<textarea id="text"></textarea>
<button id="btn">确定</button>
</body>
</html>
5.使用JS 实现赞回复功能。
练习题-慕课网
6.使用JS 实现回复留言。删除我的评论操作功能。
整体代码：
// JavaScript Document
window.onload = function(){
var list = document.getElementById(‘list’);
var lis = list.children;
var timer;
//右上角删除图标 删除整个分享内容 //删除节点的函数
function removeNode(node){
node.parentNode.removeChild(node);
}
//赞分享
function praiseBox(box, el){
var praiseElement = box.getElementsByClassName(‘praises-total’)[0];
var oldTotal = parseInt(praiseElement.getAttribute(‘total’));
var txt = el.innerHTML;
var newTotal;
if(txt == ‘赞’){
newTotal = oldTotal + 1;
praiseElement.innerHTML = newTotal == 1 ? ‘我觉得很赞’ : ‘我和’ + oldTotal + ‘个人觉得很赞’;
el.innerHTML = ‘取消赞’;
}
else{
newTotal = oldTotal -1;
praiseElement.innerHTML = (newTotal == 0) ? ”: + oldTotal + ‘个人觉得很赞’;
el.innerHTML = ‘赞’;
}
praiseElement.setAttribute(‘total’, newTotal);
praiseElement.style.display = (newTotal == 0) ? ‘none’ : ‘block’;
}
//发表评论
function replayBox(box){
var textarea = box.getElementsByTagName(‘textarea’)[0];
var list = box.getElementsByClassName(‘comment-list’)[0];
var li = document.createElement(‘li’);
li.className = ‘comment-box clearfix’;
li.setAttribute(‘user’,’self’);
var html = ‘<img class=”myhead” src=”images/my.jpg” alt=””/>’ +
‘<div class=”comment-content”>’ +
‘<p class=”comment-text”><span class=”user”>我:</span>’ + textarea.value + ‘</p>’ +
‘<p class=”comment-time”>’ +
getTime() +
‘<a href=”javascript:;” class=”comment-praise” total=”0″ my=”0″ style=””> 赞</a>’+
‘<a href=”javascript:;” class=”comment-operate”>删除</a>’ +
‘</p>’+
‘</div>’
li.innerHTML = html;
list.appendChild(li);
textarea.value = ”;
textarea.onblur();
}
//评论留言显示时间
function getTime(){
var t = new Date();
var y = t.getFullYear();
var m = t.getMonth() + 1;
var d = t.getDate();
var h = t.getHours();
var mi = t.getMinutes();
m = m < 10 ? ‘0’ + m : m;
d = d < 10 ? ‘0’ + d : d;
h = h < 10 ? ‘0’ + h : h;
mi = mi < 10 ? ‘0’ + mi : mi;
return y + ‘-‘ + m + ‘-‘ + d + ‘ ‘ + h + ‘:’ + mi;
}
//设置一个函数，留言赞回复功能
function praiseReply(el){
var oldTotal = parseInt(el.getAttribute(‘total’));
var my = parseInt(el.getAttribute(‘my’));
var newTotal;
if(my == 0){
newTotal = oldTotal + 1;
el.setAttribute(‘total’, newTotal);
el.setAttribute(‘my’,1);
el.innerHTML = newTotal + ‘ 取消赞’;
}
else{
newTotal = oldTotal – 1;
el.setAttribute(‘total’, newTotal);
el.setAttribute(‘my’,0);
el.innerHTML = (newTotal==0) ? ‘赞’ : newTotal + ‘ 赞’;
}
el.style.display = (newTotal==0) ? ” : ‘inline-block’;
}
//评论 留言操作回复功能
function operateReply(el){
var commentBox = el.parentNode.parentNode.parentNode; //评论框容器
var box = commentBox.parentNode.parentNode.parentNode; //整个li分享 容器
var textarea = box.getElementsByTagName(‘textarea’)[0]; //输入框
var user = commentBox.getElementsByClassName(‘user’)[0]; //获取用户名称
var txt = el.innerHTML; //取得留言中 赞后面的文字
//给文字做判断。如果是回复，是别人评论，可评论，则调用输入框；如果是删除，则为自己评论，可删除。
if(txt == ‘回复’){
textarea.onfocus(); //调用输入框获得焦点时的函数
textarea.value = ‘回复’ + user.innerHTML; //输入框的前缀加上 回复+用户名
textarea.onkeyup();
}
else{
removeNode(commentBox);
}
}
//整个留言区域为一个数据 。遍历每个分享li 绑定事件
for ( var i = 0; i < lis.length; i++){
//右上角图片（整条评论）点击功能
lis[i].onclick = function(e){
e = e || window.event;
var el = e.srcElement;
switch (el.className){
//删除功能
case ‘close’:
removeNode(el.parentNode);
break;
//赞分享
case ‘praise’:
praiseBox(el.parentNode.parentNode.parentNode,el);
break;
//回复按钮灰色
case ‘btn btn-off’:
clearTimeout(timer);
break;
//回复按钮蓝色
case ‘btn’:
replayBox(el.parentNode.parentNode.parentNode);
break;
//评论中留言赞回复
case ‘comment-praise’:
praiseReply(el);
break;
//评论留言操作回复
case ‘comment-operate’:
operateReply(el);
break;
}
}
//输入框评论
var textarea = lis[i].getElementsByTagName(‘textarea’)[0];
//评论获取焦点
textarea.onfocus = function(){
this.parentNode.className =’text-box text-box-on’;
this.value = this.value == ‘评论…’ ? ” : this.value;
this.onkeyup();
}
//评论失去焦点
textarea.onblur = function(){
var me = this;
if (this.value == ”){
timer = setTimeout(function(){
me.parentNode.className = ‘text-box’;
me.value = ‘评论…’;
}, 400);
}
}
//评论按键事件
textarea.onkeyup = function(e){
var len = this.value.length;
var p = this.parentNode;
var btn = p.children[1];
var word = p.children[2];
if(len == 0 || len > 140){
btn.className = ‘btn btn-off’;
}
else{
btn.className = ‘btn’;
}
word.innerHTML = len + ‘/140’;
}
}
}
No Comments