php實現網站頂踩功能的完整前端代碼

2020-03-22 18:25:07

字體：大中小

來源：轉載

供稿：網友

許多網站都支持頂、踩功能，以便于顯示用戶對當前網頁內容的滿意度反饋。下面我們給出本站使用的頂、踩功能的完整前臺實現代碼，以便于用戶參考。完整的前端代碼包括html、css、js各部分的代碼。使用下列前端代碼，加上自行簡單實現的后臺代碼，即可實現完整的頂踩功能。前端html代碼： div id="vote" data_id="文章唯一key" span id="dig" span 頂的次數 /span /span span id="bury" span 踩的次數 /span /span /div 前端css代碼：#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.phpstudy.net/static/image/dig.gif");#bury { background: url("http://www.phpstudy.net/static/image/bury.gif");.vote-num { display: inline-block; font-size: 14px; margin-top: 32px; color: white;前端js代碼，此處代碼基于jQuery實現：$("#vote .vote-btn").bind("click", function(){ var me = $(this); var id = me.parent().attr("data_id"); var type = this.id; $.post("請求地址", {'type': type, 'id': id }, function(data){ data = $.trim(data); if(data == 'success'){ //如果投票成功 $num = me.find(".vote-num"); $num.html( parseInt($num.html()) + 1 ); //投票+1 //取消綁定的點擊事件，并還原鼠標指針樣式 $("#vote .vote-btn").unbind("click").css("cursor", "auto"); if(type == 'bury'){ alert("您投了反對票，敬請在評論中留言告知您的意見，以便于我們改正!"); }else if(data == 'done'){ //如果已經投票過 //取消綁定的點擊事件，并還原鼠標指針樣式 $("#vote .vote-btn").unbind("click").css("cursor", "auto"); alert("您已經投票過，無法再次投票!"); }else{ //投票失敗 alert("由于系統或網絡問題，投票沒有成功，建議您稍后重新投票!"); 你可以根據后臺的需求自行更改js代碼。后臺代碼的大致實現是：先根據cookie或數據庫數據來判斷用戶是否已經投票過，如果之前已經投票過，則返回done；如果投票投票操作成功，則返回success；如果投票失敗則返回error或其他錯誤信息。以上所述就是本文的全部內容了，希望大家能夠喜歡。PHP教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：PHP獲取瀏覽器信息類和客戶端地理位置的2個方法

下一篇：php curl的功能有什么？php curl庫的應用（附代碼）