En analysant la relation logique de la fonction de commentaire, apprenez à utiliser JavaScript pour implémenter diverses fonctions telles que les commentaires, les réponses et les likes. Cet article présente principalement comment implémenter la fonction de commentaire et de like JavaScript. Les amis qui en ont besoin peuvent se référer à
En analysant la relation logique de la fonction de commentaire, vous pouvez apprendre à utiliser Javascript pour implémenter diverses fonctions telles que commentaires, réponses et likes
1. Apprenez à gérer la date et l'heure avec Javascript.
2. Maîtrisez la méthode d'ajout/suppression de nœuds enfants dans les opérations Dom.
3. Utilisez setTimeout pour régler la minuterie.
4. Utilisez clearTimeout pour effacer la minuterie et utiliser le proxy d'événement.
Rendu :
1) Implémenter la fonction de suppression du contenu partagé
Utilisez le proxy d'événement pour supprimer le contenu partagé en cliquant sur le bouton fermer.
Supprimer des événements :
Utilisez la fonction de proxy d'événement pour ajouter des événements sur le nœud de l'élément parent afin de réduire la quantité de code et la charge d'exécution du système.
Lors de l'utilisation du proxy d'événement, utiliser des événements L'attribut srcElement dans l'objet obtient l'élément déclencheur.
Le navigateur IE prend en charge window.event.srcElement et Firefox prend en charge window.event.target.
Donc, pour être compatible avec Firefox, il vous suffit de changer un seul code : changer var el = e.srcElement en var el = e.srcElement || fait référence à Supprimer l'élément enfant, donc pour supprimer l'élément actuel el, utilisez d'abord parentNode pour trouver le nœud parent, puis utilisez removeChild(el) pour supprimer l'élément el.
2) Implémentez la fonction like de partagevar 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; } } }
Construisez une fonction like et share, qui nécessite deux paramètres. Le premier paramètre (boîte) représente le conteneur parent Like Layer le plus externe, le. le deuxième paramètre (el) fait référence à l'élément déclenché, c'est-à-dire le bouton J'aime
getAttribute() pour obtenir les attributs, et utilisez setAttribute() pour définir les attributs de l'élément.
Code js :
3) Pour implémenter la fonction de commentaire//点赞分享 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); } } }
Tout d'abord, vous devez implémenter le changement de la zone de saisie des commentaires en écoutant trois événements
1 .Quand on se concentre :
onfocus
2. 3. Lorsque la saisie de la souris apparaît :
4) Implémentez le bouton de réponse et les fonctions de comptage de mots
Ajoutez l'événement contextuel du clavier onkeyup à la zone de texte et apprenez à l'utiliser pour obtenir la méthode du nœud parent et du nœud enfant. Pour une meilleure expérience utilisateur, la zone de saisie ne devient pas immédiatement plus petite lorsqu'elle perd le focus, donc une fonction de minuterie est ajoutée à onblur. Notez que la minuterie doit être effacée lorsque vous cliquez sur le bouton de réponse gris <🎜. >
code js ://输入框 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 = '评论...'; } }
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'; }
//发表评论 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; } }
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!