コメント機能の論理関係を分析することで、JavaScriptを使用してコメント、返信、いいねなどのさまざまな機能を実装する方法を学びます。この記事では主にJavaScriptのコメント機能といいね機能の実装方法を紹介しますので、必要な方は参考にしてください
コメント機能の論理関係を分析することで、コメント、返信、いいねなどのさまざまな機能をJavaScriptで実装する方法を学びます。 、など
1. Javascript で日付と時刻を処理する方法を学びます。
2. Dom操作における子ノードの追加・削除方法をマスターする。
3. setTimeout を使用してタイマーを設定します。
4. clearTimeout を使用してタイマーをクリアし、イベント プロキシを使用します。
レンダリング:
1) 共有コンテンツを削除する機能を実装します
イベントプロキシを使用して、閉じるボタンをクリックして共有コンテンツを削除します。
イベントの削除:
イベントプロキシ関数を使用して親要素ノードにイベントを追加し、コードの量とシステムの実行負荷を削減します。
イベントをプロキシする場合、イベントオブジェクトの srcElement 属性を使用してトリガー要素を取得します。
IE ブラウザは window.event.srcElement をサポートし、Firefox は window.event.target をサポートします。
したがって、Firefox と互換性を持たせるには、コードを 1 つ変更するだけです: var el = e.srcElement を var el = e.srcElement || e.target
removeChild() は子要素を削除することを意味します。現在の el 要素を削除するには、まずparentNodeを使用して親ノードを検索し、次にremoveChild(el)を使用してel要素を削除する必要があります。
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) 共有の like 関数を実装します
2 つのパラメータを必要とする like および share 関数を構築します。最初のパラメータ (box) は like の最も外側の親コンテナを表し、2 番目のパラメータ (el ) はそのコンテナを参照します。トリガーされた要素、つまりいいねボタン
getAttribute() は属性を取得し、setAttribute() を使用して要素の属性を設定します。
jsコード:
//点赞分享
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) コメント機能を実装するには
まず、3つのイベントをリッスンしてコメント入力ボックスの変更を実装します
1. フォーカスを取得するとき: onfocus
//输入框
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;
}
}//点赞回复
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';
} //操作回复
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);
}
}以上がJavaScriptを使用してコメント機能やいいね機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
