PHP, MYSQL, jQuery for "top" and "Stomp" voting function

CREATE TABLE IF not EXISTS ' votes ' ( ' id ' int (ten) is not NULL auto_increment, ' Likes ' int (ten) not NULL DEFAULT ' 0 ', ' Unlikes ' int (ten) not NULL DEFAULT ' 0 ', PRIMARY KEY (' id ') ) Engine=myisam DEFAULT Charset=utf8; INSERT into ' votes ' (' id ', ' likes ', ' Unlikes ') VALUES (1, 30, 10); CREATE TABLE IF not EXISTS ' votes_ip ' ( ' id ' int (ten) is not NULL, ' Vid ' int (ten) is not NULL, ' IP ' varchar (+) not NULL ) Engine=myisam DEFAULT Charset=utf8; Copy Code 2,html page section in the page, there are two "top" and "stepping" buttons, namely #dig_up and #dig_down, the button on the record number of votes and the percentage of each, very intuitive comparison of voting results. Very good, very powerful! Oh, that sucks! Copy Code The 3,CSS code section must use CSS to beautify the page, use a graph diggs.png to position the different button backgrounds, and set the position to position the relationship between the elements. . digg{width:420px; height:120px; margin:80px auto 20px auto; position:relative} #dig_up, #dig_down {width:200px; height:48px; margin:10px; position:relative; border:1px solid #d3d3d3; padding-left:42px; Cursor:pointer} . Digup{background:url (diggs.png) no-repeat 4px 2px;} . Digup_on{background:url (Diggs.png) no-repeat 4px-49px;} . Digdown{background:url (Diggs.png) no-repeat 4px-102px;} . Digdown_on{background:url (Diggs.png) no-repeat 4px-154px;} #num_up, #num_down {position:absolute; right:6px; top:18px; font-size:20px;} #dig_up p{height:24px; line-height:24px; color: #} #dig_down p{height:24px; line-height:24px; color: #f30} . bar{width:100px; height:12px; line-height:12px; border:1px solid #f0f0f0; position:relative; Text-align:center} . bar Span{display:block; height:12px;} . bar I{position:absolute; top:0; left:104px;} #bar_up span{background: #} #bar_down span{background: #f60} #msg {position:absolute; right:20px; top:40px; font-size:18px; color: #f00} Copy Code 2,jquery part of this example also relies on jquery, so you must not forget to load the jquery library file in the page first. First of all, jquery has to deal with the background image that the mouse slides to two voting buttons, respectively, by AddClass () and Removeclass (). $ (function () { Change the background style when the mouse slides and leaves the voting button $ ("#dig_up"). Hover (function () { $ (this). addclass ("digup_on"); },function () { $ (this). Removeclass ("digup_on"); }); $ ("#dig_down"). Hover (function () { $ (this). addclass ("digdown_on"); },function () { $ (this). Removeclass ("digdown_on"); }); Initializing data GetData ("do.php", 1); When you click "Top" $ ("#dig_up"). Click (function () { GetData ("Do.php?action=like", 1); }); When you click on "Step" $ ("#dig_down"). Click (function () { GetData ("Do.php?action=unlike", 1); }); }); Copy Code Then, the data is initialized, that is, after the page is loaded, the initial voting results are displayed, including the number of votes and the percentage. The operation to get the data is written in a custom function, GetData (), which completes the loading of the data by passing different request addresses and ID parameters. In function GetData (), an AJAX request is sent to the URL, based on the returned results of the background processing, if the vote succeeds, the corresponding element content in the page is changed, including the number of votes and the percentage. function GetData (URL,SID) { $.getjson (url,{id:sid},function (data) { if (data.success==1) {//vote succeeded $ ("#num_up"). HTML (data.like); Show percent progress bar effect by controlling width $ ("#bar_up span"). CSS ("width", data.like_percent); $ ("#bar_up i"). html (data.like_percent); $ ("#num_down"). HTML (data.unlike); $ ("#bar_down span"). CSS ("width", data.unlike_percent); $ ("#bar_down i"). html (data.unlike_percent); }else{//vote failed Bbs.it-home.org $ ("#msg"). HTML (DATA.MSG). Show (). CSS ({' Opacity ': 1, ' top ': ' 40px '}) . Animate ({top: ' -50px ', opacity:0}, "slow"); } }); } Copy Code 4,php code part of the data is obtained through do.php to complete, do.php according to the front-end page passed parameters, connected to the database, according to the criteria to enter the "top", "stepping" and the initial data processing module, the following is the Do.php module code structure: