Php implements the complete front-end code of the website top step function

This article mainly introduces the complete front-end code for php to implement the website top step function. For more information, see

This article mainly introduces the complete front-end code for php to implement the website top step function. For more information, see

Many websites Support Top-and top-step functions to show users' satisfaction feedback on the current webpage content. Below we provide the complete front-end implementation code of the top-and-step functions used on this site for your reference.

The complete front-end code includes html, css, and js Code. Use the following front-end code and self-implemented background code to implement the complete top-step function.

Front-end html code:

Top times

Front-end css code:

# Vote {/* margin: 0 auto; */text-align: center ;}. vote-btn {margin: 0 20px; display: inline-block; width: 60px; height: 54px; cursor: pointer ;}# dig {background: url ("http://www.jb51.net/static/image/dig.gif") ;}# bury {background: url ("http://www.jb51.net/static/image/bury.gif ");}. vote-num {display: inline-block; font-size: 14px; margin-top: 32px; color: white ;}

Front-end js Code. The Code here is implemented based on jQuery:

$ ("# Vote. vote-btn "). bind ("click", function () {var me = $ (this); var id = me. parent (). attr ("data_id"); var type = this. id; $. post ("request address", {'type': type, 'id': id}, function (data) {data = $. trim (data); if (data = 'success ') {// if the vote succeeds $ num = me. find (". vote-num "audio ;$num.html (parseInt($num.html () + 1); // vote + 1 // unbind the Click Event and restore the mouse pointer style $ (" # vote. vote-btn "). unbind ("click" ).css ("cursor", "auto"); if (type = 'Bury ') { Lert ("You have voted against it. Please leave a comment in your comments so that we can correct it! ") ;}} Else if (data = 'done') {// if you have already voted for the unbinding click event, and restore the mouse pointer style $ ("# vote. vote-btn "). unbind ("click" ).css ("cursor", "auto"); alert ("You have already voted and cannot vote again! ");} Else {// failed to vote alert (" the vote failed due to system or network problems. We recommend that you vote again later! ");}});});

You can modify the js Code as needed in the background.

The general implementation of the background code is: Determine whether the user has voted Based on the cookie or database data. If the user has already voted, return done. If the voting operation is successful ,, success is returned. If the voting fails, error or other error messages are returned.

The above is all the content of this article. I hope you will like it.