Use JavaScript to implement the comment thumb up Function

By analyzing the logical relationship between comment functions, you can learn how to use JavaScript to implement comments, replies, likes, and other functions. This article mainly introduces the implementation of the JavaScript comment like function. If you need it, you can refer to the analysis of the logic relationship of the comment function, learn how to use JavaScript to implement comments, replies, likes, and other functions. This article mainly introduces how to implement the likes function of JavaScript comments. For more information, see

By analyzing the logical relationship between comment functions, you can learn how to use Javascript to implement comments, replies, likes, and other functions.

1. Learn how to process Date and Time in Javascript.

2. Learn how to add or delete subnodes in Dom operations.

3. use setTimeout to set the timer.

4. Use clearTimeout to clear the timer and use the event agent.

:

1) Delete shared content

Use event proxy to click the close button to delete the shared content.

Delete event:

Use the event proxy function to add events to the parent element node to reduce the amount of code and system running load.

When the event proxy is used, use the srcElement attribute in the event object to obtain the trigger element.

The IE browser supports window. event. srcElement, while firefoxsupports paievent.tar get.

Therefore, to be compatible with firefox, you only need to change the code: Change var el = e. srcElement to var el = e. srcElement | e.tar get

RemoveChild () is used to delete a child element. to delete the current element el, you must first use parentNode to locate the parent node and then use removeChild (el) to delete the el Element.

Var list = document. getElementById ('LIST'); var boxs = document. getElementsByClassName ('box'); // Delete the node function removeNode (node) {node. parentNode. removeChild (node);} // event proxy for (var I = 0; I
 
  
2) Implement the like feature for sharing
  
To construct a thumb-sharing function, two parameters are required. The first parameter (box) indicates the outermost parent container of the thumb-up, and the second parameter (el) indicates the trigger element, the like button.
  
GetAttribute () obtains attributes and uses setAttribute () to set attributes of elements.
  
Js Code:
  
// Thumb up function praiseBox (box, el) {// box is the outermost layer parent container of the trigger element el var praiseElement = box. getElementsByClassName ('praise-total') [0]; var oldTotal = parseInt (praiseElement. getAttribute ('Total'); var txt = el. innerHTML; var newTotal = 0; if (txt = 'Z') {newTotal = oldTotal + 1; praiseElement. innerHTML = (newTotal = 1 )? 'I think it's awesome': 'I and' + oldTotal + 'I think it's awesome'; el. innerHTML = 'cancelling liz';} else {newTotal = oldTotal-1; praiseElement. innerHTML = (newTotal = 0 )? '': NewTotal + 'I personally think it's awesome'; el. innerHTML = 'Z';} praiseElement. setAttribute ('Total', newTotal); praiseElement. style. display = (newTotal = 0 )? 'None': 'block';} // event proxy for (var I = 0; I
   
    
3) Implement the comment function
    
First, you must change the comment input box by listening to three events.
    
1. onfocus

    
2. Lost focus: onblur

    
3. onkeyup
    
// Input box var textarea = boxs [I]. getElementsByTagName ('textarea ') [0]; textarea. onfocus = function () {this. parentNode. className = 'text-box text-box-on'; this. value = (this. value = 'comment... ')? '': This. value;} textarea. onblur = function () {if (this. value = '') {this. parentNode. className = 'text-box'; this. value = 'comment... ';}}
    
4) Implement the reply button and word count function
    
Add an onkeyup event to the textarea keyboard and learn how to obtain the Parent and Child Nodes.
    
For a better user experience, the timer function is added to onblur because the input box does not immediately become smaller when the focus is lost. Note that the timer should be cleared when the gray reply button is clicked.
    
Js Code:
    
Textarea. onblur = function () {var me = this; // because a timer exists, store this in the variable timer = setTimeout (function () {if (me. value = '') {me. parentNode. className = 'text-box'; me. value = 'comment... ';}}, 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 + '/123 ';}
    
5) Share Comments
    
When you click the reply button, add the content in the input box to the reply list by creating a p and adding a reply list, change the content of the newly added reply list and the date of the comment.
    
Js Code:
    
// Comment 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 = ''+'
'+'
Me: '+ textarea. value +'
'+'
'+ GetTime () + 'Z' + 'delete' +'
'+'
'; 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; // The month starts from 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) Implement the like reply function
    
The a tag of the like button has a my attribute, indicating whether you have liked the button. If my is 0, the total value will be added when the like button is clicked. If my is 1, when you click the like button, the total value is reduced by 1.
    
Js Code:
    
// Reply to 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 + 'cancelz';} else {newTotal = oldTotal-1; el. setAttribute ('Total', newTotal); el. setAttribute ('my', 0); el. innerHTML = (newTotal = 0 )? '': NewTotal + 'Z';} el. style. display = (newTotal = 0 )? '': 'Inline-Block ';}
    
6) Delete and reply content in the reply list
    
Allows you to reply to others' comments and delete your comments.
    
Js Code:
    
// Operation reply function operateReply (el) {var commentBox = el. parentNode. parentNode. parentNode; // comments container var box = commentBox. parentNode. parentNode. parentNode; // The shared container var textarea = box. getElementsByTagName ('textarea ') [0]; var user = commentBox. getElementsByClassName ('user') [0]; var txt = el. innerHTML; if (txt = 'reply ') {textarea. onfocus (); textarea. value = 'reply '+ user. innerHTML; textarea. onkeyup ();} else {removeNode (el. parentNode. parentNode. parentNode );}}
    
The above describes how to use JavaScript to implement the comment like function. For more information, see other related articles in the first PHP community!