Durch die Analyse der logischen Beziehung der Kommentarfunktion erfahren Sie, wie Sie mit JavaScript verschiedene Funktionen wie Kommentare, Antworten und Likes implementieren. In diesem Artikel wird hauptsächlich die Implementierung der JavaScript-Kommentar- und Like-Funktion vorgestellt. Freunde, die sie benötigen, können sich auf
beziehen. Durch die Analyse der logischen Beziehung der Kommentarfunktion können Sie lernen, wie Sie mit Javascript verschiedene Funktionen implementieren, z Kommentare, Antworten und Likes.
1. Erfahren Sie, wie Sie mit Javascript mit Datum und Uhrzeit umgehen.
2. Beherrschen Sie die Methode zum Hinzufügen/Löschen von untergeordneten Knoten in Dom-Operationen.
3. Verwenden Sie setTimeout, um den Timer einzustellen.
4. Verwenden Sie „clearTimeout“, um den Timer zu löschen und den Ereignis-Proxy zu verwenden.
Rendering:
1) Implementieren Sie die Funktion zum Löschen freigegebener Inhalte
Verwenden Sie den Ereignis-Proxy, um die freigegebenen Inhalte zu löschen, indem Sie auf klicken Schließen-Taste.
Ereignisse löschen:
Verwenden Sie die Ereignis-Proxy-Funktion, um Ereignisse auf dem übergeordneten Elementknoten hinzuzufügen, um die Codemenge und die Systemauslastung zu reduzieren.
Bei Verwendung des Ereignis-Proxys Ereignisse verwenden Das srcElement-Attribut im Objekt ruft das Triggerelement ab.
Der IE-Browser unterstützt window.event.srcElement und Firefox unterstützt window.event.target.
Um in Firefox kompatibel zu sein, müssen Sie nur einen Code ändern: var el = e.srcElement in var el = e.srcElement || ändern
removeChild(). bezieht sich auf das Löschen des untergeordneten Elements. Um also das aktuelle Element el zu löschen, verwenden Sie zuerst parentNode, um den übergeordneten Knoten zu finden, und verwenden Sie dann removeChild (el), um das el-Element zu löschen.
var list = document.getElementById('list');
var boxs = document.getElementsByClassName('box');
//删除节点函数
function removeNode(node){
node.parentNode.removeChild(node);
}
//事件代理
for(var i=0 ;i<boxs.length;i++){
boxs[i].onclick = function(e){
e = e||window.event;
var el = e.srcElement || e.target;
switch (el.className) {
case 'close':removeNode(el.parentNode);break;
}
}
}2) Implementieren Sie die Like-Funktion des Teilens
Erstellen Sie eine Like- und Share-Funktion, die zwei Parameter erfordert. Der erste Parameter (Feld) stellt den äußersten übergeordneten Container der Like-Ebene dar Der zweite Parameter (el) bezieht sich auf das ausgelöste Element, dh auf die Schaltfläche „Gefällt mir“
getAttribute(), um die Attribute abzurufen, und setAttribute() verwenden, um die Attribute des Elements festzulegen.
js-Code:
//点赞分享
function praiseBox(box,el){//box为所触发元素el的最外层父容器
var praiseElement = box.getElementsByClassName('praise-total')[0];
var oldTotal = parseInt(praiseElement.getAttribute('total'));
var txt = el.innerHTML;
var newTotal = 0;
if(txt == '赞'){
newTotal = oldTotal + 1;
praiseElement.innerHTML = (newTotal == 1) ? '我觉得很赞' : '我和' + oldTotal +'个人觉得很赞';
el.innerHTML = '取消赞';
}else{
newTotal = oldTotal - 1;
praiseElement.innerHTML = (newTotal == 0) ? '' : newTotal + '个人觉得很赞';
el.innerHTML = '赞';
}
praiseElement.setAttribute('total',newTotal);
praiseElement.style.display = (newTotal == 0) ? 'none': 'block';
}
//事件代理
for(var i=0 ;i<boxs.length;i++){
boxs[i].onclick = function(e){
e = e||window.event;
var el = e.srcElement || e.target;
switch (el.className) {
case 'close':removeNode(el.parentNode);break;
case 'praise':praiseBox(el.parentNode.parentNode.parentNode,el);
}
}
}3) So implementieren Sie die Kommentarfunktion
Zunächst müssen Sie die Änderung des Kommentareingabefelds implementieren, indem Sie sich drei anhören Ereignisse
1 .Wenn Sie den Fokus gewinnen: onfocus
2. Den Fokus verlieren: onblur
3. Wenn die Mauseingabe erscheint:onkeyup
//输入框
var textarea = boxs[i].getElementsByTagName('textarea')[0];
textarea.onfocus = function(){
this.parentNode.className = 'text-box text-box-on';
this.value = (this.value == '评论...') ? '':this.value;
}
textarea.onblur = function(){
if(this.value == ''){
this.parentNode.className = 'text-box';
this.value = '评论...';
}
}4) Implementieren Sie die Antwortschaltfläche und die Wortzählfunktionen
Fügen Sie das Onkeyup-Tastatur-Popup-Ereignis hinzu den Textbereich und lernen Sie, ihn zu verwenden, um die Methode für den übergeordneten Knoten und den untergeordneten Knoten zu erhalten.
Für ein besseres Benutzererlebnis wird das Eingabefeld nicht sofort kleiner, wenn es den Fokus verliert. Daher wurde Onblur eine Timer-Funktion hinzugefügt. Beachten Sie, dass der Timer gelöscht werden muss, wenn auf die graue Antwortschaltfläche geklickt wird
js-Code:
textarea.onblur = function(){
var me = this;//因为有定时器所以先将this存放于变量中
timer = setTimeout(function(){
if(me.value == ''){
me.parentNode.className = 'text-box';
me.value = '评论...';
}
},500);
}
textarea.onkeyup = function(){
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';
}5) Implementieren Sie die Funktion zum Teilen von Kommentaren
Wenn Sie auf die Schaltfläche „Antworten“ klicken, wird der Inhalt des Eingabefelds durch Erstellen zur Antwortliste hinzugefügt a p und Hinzufügen einer Antwortliste, achten Sie auf den geänderten Teil der neuen Antwortliste und das Datum des zu ändernden Kommentars.
js-Code:
//发表评论
function replayBox(box){
var textarea = box.getElementsByTagName('textarea')[0];
var list = box.getElementsByClassName('comment-list')[0];
var p = document.createElement('p');
p.className = 'comment-box clearfix';
p.setAttribute('user','self');
var html = ' <img src="images/my.jpg" class="myhead" alt="" />'+
'<p class="comment-content">'+
'<p class="comment-text"><span class="user">我：</span>'+textarea.value+'</p>'+
'<p class="comment-time">'+
getTime()+
'<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="comment-praise" total="0" my="0" style="">赞</a>'+
'<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="comment-operate">删除</a>'+
'</p>'+
'</p>';
p.innerHTML = html;
list.appendChild(p);
textarea.value = '';
textarea.onblur();
function getTime(){
var t = new Date();
var y = t.getFullYear();
var m = t.getMonth() + 1;//月份是从0开始
var d = t.getDay();
var h = t.getHours();
var mi = t.getMinutes();
m = m>10 ? m: '0' + m;
d = d>10 ? d: '0' + d;
h = h>10 ? h: '0' + h;
mi = mi>10 ?mi: '0' +mi;
return y + '-' + m + '-' + d + ' ' + h + ':' + mi;
}
}5) Implementieren Sie die Like-Antwortfunktion
Im a-Tag der Like-Schaltfläche befindet sich ein my-Attribut, das angibt, ob Ihnen „Gefällt mir“ gefallen hat Wenn mein Wert 0 ist, erhöht sich die Gesamtsumme um eins, wenn auf die Schaltfläche „Gefällt mir“ geklickt wird.
js-Code:
//点赞回复
function praiseReplay(el){
var oldTotal = parseInt(el.getAttribute('total'));
var my = parseInt(el.getAttribute('my'));
var newTotal = 0;
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';
}6) Implementieren Sie die Lösch- und Antwortfunktion des Inhalts in der Antwortliste
Antworten Sie auf die Kommentare anderer Personen und löschen Sie Ihre eigenen Kommentare
js-Code:
//操作回复
function operateReply(el){
var commentBox = el.parentNode.parentNode.parentNode;//评论的容器
var box = commentBox.parentNode.parentNode.parentNode;//该条分享的容器
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(el.parentNode.parentNode.parentNode);
}
}Das obige ist der detaillierte Inhalt vonVerwenden Sie JavaScript, um Kommentar- und Like-Funktionen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
