摘要:當(dāng)瀏覽新聞頁(yè)面或者其它頁(yè)面的時(shí)候會(huì)有閱讀后的感受,比如給力淡定打醬油加油坑爹等等的表情。本文有三個(gè)文件,頁(yè)面展示和請(qǐng)求數(shù)據(jù),后臺(tái)文件處理請(qǐng)求來(lái)的數(shù)據(jù),并返回?cái)?shù)據(jù),數(shù)據(jù)庫(kù)文件,存數(shù)據(jù)庫(kù)信息直接進(jìn)入代碼吧。可以自己下來(lái)細(xì)心看。
當(dāng)瀏覽新聞頁(yè)面或者其它頁(yè)面的時(shí)候會(huì)有閱讀后的感受,比如給力、淡定、打醬油、加油、坑爹等等的表情。讓讀者打分,看看自己的感受是否與其他讀者一樣。很不錯(cuò)的交互!
查看演示:http://www.weibut.com/demo/20...
立即下載:http://www.weibut.com/downloa...
本文需要熟悉jquery,mysql,ajax相關(guān)的知識(shí),不過(guò)用的不多。本文有三個(gè)文件:index.html,mood.php,sql.php
index.html,頁(yè)面展示和請(qǐng)求ajax數(shù)據(jù)
mood.php,后臺(tái)文件 處理get請(qǐng)求來(lái)的數(shù)據(jù),并返回?cái)?shù)據(jù)
sql.php,數(shù)據(jù)庫(kù)文件,存數(shù)據(jù)庫(kù)信息
直接進(jìn)入代碼吧。
index.html首先導(dǎo)入jquery
//cdn.bootcss.com/jquery/1.7.2/jquery.min.js
當(dāng)文檔載入完畢就請(qǐng)求(ajax-get)投票人數(shù)數(shù)據(jù)
$.ajax({ type: "GET", url: "mood.php", cache: false, data: "id=1", dataType: "json", error: function(){ alert("出錯(cuò)了!"); }, success: function(json){ if(json){ $.each(json,function(index,array){ var str = "
返回就添加到網(wǎng)頁(yè)里,然后就點(diǎn)擊表情邏輯,也ajax到后臺(tái)
$(".face").live("click",function(){ var face = $(this); var mid = face.attr("rel"); var value = face.parent().find("span").html(); var val = parseInt(value)+1; $.post("mood.php?action=send",{moodid:mid,id:1},function(data){ if(data>0){ face.prev().css("height",data+"px"); face.parent().find("span").html(val); face.find("img").addClass("selected"); }else{ alert(data); } }); });
這樣整個(gè)前臺(tái)就完成了工作
mood.php首先要導(dǎo)入sql.php數(shù)據(jù)庫(kù)文件
include_once("sql.php");
這個(gè)文件處理的是整個(gè)功能的核心,處理數(shù)據(jù)庫(kù),cookies...
1.處理獲取投票人數(shù)代碼$mname = explode(",",$moodname);//心情說(shuō)明 $num = count($mname); $mpic = explode(",",$moodpic);//心情圖標(biāo) $id = (int)$_GET["id"]; $query = mysql_query("select * from mood where id=$id"); $rs = mysql_fetch_array($query); if($rs){ $total = $rs["mood0"]+$rs["mood1"]+$rs["mood2"]+$rs["mood3"]+$rs["mood4"]; for($i=0;$i<$num;$i++){ $field = "mood".$i; $m_val = intval($rs[$field]); $height = 0; //柱圖高度 if($total && $m_val){ $height=round(($m_val/$total)*$moodpicheight); //計(jì)算高度 } $arr[] = array( "mid" => $i, "mood_name" => $mname[$i], "mood_pic" => $mpic[$i], "mood_val" => $m_val, "height" => $height ); } echo json_encode($arr); } else { for($i=0;$i<$num;$i++){ $arr[] = array( "mid" => $i, "mood_name" => $mname[$i], "mood_pic" => $mpic[$i], "mood_val" => 0, "height" => 0 ); } echo json_encode($arr); }2.處理投票功能
$id = (int)$_POST["id"]; $mid = (int)$_POST["moodid"]; if($mid<0 || !$id){ echo "錯(cuò)誤"; exit; } $havemood = chk_mood($id); if($havemood==1){ echo "您已表達(dá)過(guò)了";exit; } $field = "mood".$mid; //查詢是否有這個(gè)id $result = mysql_query("select 1 from mood where id="{$id}""); $row = mysql_fetch_array($result); if(is_array($row)){ $query = mysql_query("update mood set ".$field."=".$field."+1 where id=".$id); if($query){ setcookie("mood".$id, $mid.$id, time()+3600); $query2 = mysql_query("select * from mood where id=$id"); $rs = mysql_fetch_array($query2); $total = $rs["mood0"]+$rs["mood1"]+$rs["mood2"]+$rs["mood3"]+$rs["mood4"]; $height = round(($rs[$field]/$total)*$moodpicheight); echo $height; }else{ echo -1; } } else { mysql_query("INSERT INTO mood(id,mood0,mood1,mood2,mood3,mood4)VALUES ("{$id}","0","0","0","0","0")"); $query = mysql_query("update mood set ".$field."=".$field."+1 where id=".$id); setcookie("mood".$id, $mid.$id, time()+3600); echo $moodpicheight; }
這個(gè)文件很簡(jiǎn)單,基本都是在處理數(shù)據(jù)庫(kù),邏輯也不是很復(fù)雜。可以自己下來(lái)細(xì)心看。
sql.php一個(gè)通用的數(shù)據(jù)庫(kù)信息儲(chǔ)存文件,數(shù)據(jù)庫(kù)的ip、帳號(hào)、密碼、數(shù)據(jù)庫(kù)名等等
$host="localhost"; $db_user="root"; $db_pass=""; $db_name="demo"; $timezone="Asia/Shanghai"; $link=mysql_connect($host,$db_user,$db_pass); mysql_select_db($db_name,$link); mysql_query("SET names UTF8"); header("Content-Type: text/html; charset=utf-8");
到目前所有的核心代碼都也貼出,大神就跳過(guò),如果有需要就下載來(lái)看一看
對(duì)了,還有一個(gè)數(shù)據(jù)庫(kù),行吧DDL也貼出來(lái)
CREATE TABLE `mood` ( `id` tinyint(5) NOT NULL, `mood0` int(9) unsigned NOT NULL, `mood1` int(9) unsigned NOT NULL, `mood2` int(9) unsigned NOT NULL, `mood3` int(9) unsigned NOT NULL, `mood4` int(9) unsigned NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/25832.html
摘要:當(dāng)瀏覽新聞頁(yè)面或者其它頁(yè)面的時(shí)候會(huì)有閱讀后的感受,比如給力淡定打醬油加油坑爹等等的表情。本文有三個(gè)文件,頁(yè)面展示和請(qǐng)求數(shù)據(jù),后臺(tái)文件處理請(qǐng)求來(lái)的數(shù)據(jù),并返回?cái)?shù)據(jù),數(shù)據(jù)庫(kù)文件,存數(shù)據(jù)庫(kù)信息直接進(jìn)入代碼吧。可以自己下來(lái)細(xì)心看。 當(dāng)瀏覽新聞頁(yè)面或者其它頁(yè)面的時(shí)候會(huì)有閱讀后的感受,比如給力、淡定、打醬油、加油、坑爹等等的表情。讓讀者打分,看看自己的感受是否與其他讀者一樣。很不錯(cuò)的交互! sho...
摘要:當(dāng)瀏覽新聞頁(yè)面或者其它頁(yè)面的時(shí)候會(huì)有閱讀后的感受,比如給力淡定打醬油加油坑爹等等的表情。本文有三個(gè)文件,頁(yè)面展示和請(qǐng)求數(shù)據(jù),后臺(tái)文件處理請(qǐng)求來(lái)的數(shù)據(jù),并返回?cái)?shù)據(jù),數(shù)據(jù)庫(kù)文件,存數(shù)據(jù)庫(kù)信息直接進(jìn)入代碼吧。可以自己下來(lái)細(xì)心看。 當(dāng)瀏覽新聞頁(yè)面或者其它頁(yè)面的時(shí)候會(huì)有閱讀后的感受,比如給力、淡定、打醬油、加油、坑爹等等的表情。讓讀者打分,看看自己的感受是否與其他讀者一樣。很不錯(cuò)的交互! sho...
摘要:當(dāng)瀏覽新聞頁(yè)面或者其它頁(yè)面的時(shí)候會(huì)有閱讀后的感受,比如給力淡定打醬油加油坑爹等等的表情。本文有三個(gè)文件,頁(yè)面展示和請(qǐng)求數(shù)據(jù),后臺(tái)文件處理請(qǐng)求來(lái)的數(shù)據(jù),并返回?cái)?shù)據(jù),數(shù)據(jù)庫(kù)文件,存數(shù)據(jù)庫(kù)信息直接進(jìn)入代碼吧。可以自己下來(lái)細(xì)心看。 當(dāng)瀏覽新聞頁(yè)面或者其它頁(yè)面的時(shí)候會(huì)有閱讀后的感受,比如給力、淡定、打醬油、加油、坑爹等等的表情。讓讀者打分,看看自己的感受是否與其他讀者一樣。很不錯(cuò)的交互! sho...
摘要:看到第二個(gè)就知道了,和的自動(dòng)發(fā)現(xiàn)類似,我們是在中記錄服務(wù)提供者信息,而是在目錄中查找后寫入到。從這里讀取服務(wù)提供者列表,然后在函數(shù)中合并服務(wù)提供者,然后加載,從服務(wù)提供者中還可以繼續(xù)加載服務(wù)提供者。 看了Taylor Otwell發(fā)表的Package Auto-Discovery In Laravel 5.5第一反應(yīng)是 showImg(https://segmentfault.com/...
閱讀 3162·2023-04-25 17:19
閱讀 616·2021-11-23 09:51
閱讀 1339·2021-11-08 13:19
閱讀 776·2021-09-29 09:34
閱讀 1673·2021-09-28 09:36
閱讀 1494·2021-09-22 14:59
閱讀 2708·2019-08-29 16:38
閱讀 2053·2019-08-26 13:40