Php implements the complete front-end code of the website top step function. php front-end _ PHP Tutorial

Php implements the complete front-end code of the website top step function, and php front-end. Php implements the complete front-end code of the website top-step function. many php front-end websites support the top-step and top-step functions to show users' satisfaction feedback on the current webpage content. The following describes the complete front-end code for implementing the website top-step function in php.

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.bkjia.com/static/image/dig.gif");}#bury {  background: url("http://www.bkjia.com/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 "); $num.html (parseInt($num.html () + 1); // vote + 1 // unbind the click event and restore the mouse pointer style $ (" # vote. vote-btn "). unbind ("click" example .css ("cursor", "auto"); if (type = = 'Bury ') {alert ("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.

Many websites support the top and top step functions to show users' satisfaction feedback on the current webpage content. Below we will provide this...