PHP许愿墙的经济可行性,深入PHP许愿墙模块功能分析
許愿墻模塊功能分析
一,熱點技術
1,實現可拖放DOM技術移動許愿字條
可拖放DOM模式(Draggable DOM pattern)的宗旨在于允許瀏覽者自己定義頁面中各元素的位置,并且,只需要用鼠標選中要移動的部分,把它拖到新的位置上,就可以定制頁面。
DOM是Document Object Model文檔對象模型的縮寫,是一種與瀏覽器、平臺、語言無關的接口,使用戶可以訪問頁面其他的標準組件。DOM是以層次結構組織的節點或信息片段的集合。這個層次結構允許開發人員在樹中導航尋找特定信息。分析該結構通常需要加載整個文檔的構造層次結構,然后才能做任何工作。由于它基于信息層次,因此DOM被認為基于樹或基于對象。
具體實現時以下時間會被觸發:
(1)moveStart
(2)Move
(3)moveEnd
當按下鼠標左鍵,開始移動鼠標時,在被拖動的許愿條上就會觸發moveStart事件。用戶可以使用moveStart事件處理函數在拖動開始時允許javaScript代碼。當moveStart事件被觸發后,Move時間會一直觸發,只要對象還在被拖動,就一直觸發。當拖動停止時,則觸發moveEnd事件。
echo輸出許愿條樣式布局,代碼如下:
復制代碼 代碼如下:
echo "
愛墻編號:".$id."???".$sendtime."?× | |||
".$Picker."$content [祝福你]?福氣:".$hits." QQ:圖片 document.getElementById('txt_hyan').value = getVcode; }else{ document.getElementById("messageImg").src="images/cuo.gif"; //驗證碼錯誤,輸出顯示錯誤圖片 document.getElementById('checkcode').focus(); return false; } } } } xmlhttp.send(null); } codeChk.php驗證碼檢驗頁面 復制代碼 代碼如下: session_start(); require 'secoder.class.php';? //先把類包含進來,實際路徑根據實際情況進行修改。 $vcode = new YL_Security_Secoder();????? //實例化一個對象 $code = $_GET['code']; echo $vcode->check($code);? //check($code)函數返回的是true或者false,返回true時,codeChk.php頁面輸出的是1,否則沒有輸出 ?> secoder.class.php驗證碼類中的check($code)函數 復制代碼 代碼如下: public static function check($code) { isset($_SESSION) || session_start(); // 驗證碼不能為空 if(empty($code) || empty($_SESSION[self::$seKey])) { return false; } // session 過期 if(time() - $_SESSION[self::$seKey]['time'] > self::$expire) { unset($_SESSION[self::$seKey]); return false; } if(strtoupper($code) == $_SESSION[self::$seKey]['code']) { ?//不區分大小寫比較 return true; } return false; } 5,定義生成指定范圍的許愿條隨機算法 本模塊需要生成一個指定范圍的隨機算法,用來顯示許愿字條的顯示位置,以使每次展示在讀者眼前的都是不同的許愿字條。本模塊主要應用rand()函數控制許愿墻紙的顯示位置。 rand()函數用于產生一個隨機整數 語法:rand(min,max) 參數:min,max可選,規定隨機數產生的范圍 如果沒有提供可選參數 min 和 max,rand() 返回 0 到 RAND_MAX 之間的偽隨機整數。在某些平臺下(例如 Windows)RAND_MAX 只有 32768。如果需要的范圍大于 32768,那么指定 min 和 max 參數就可以生成大于 RAND_MAX 的數了,或者考慮用 mt_rand() 來替代它。 mt_rand() 使用 Mersenne Twister 算法返回隨機整數 語法:mt_rand(min,max) 如果沒有提供可選參數 min 和 max,mt_rand() 返回 0 到 RAND_MAX 之間的偽隨機數。很多老的libc的隨機數發生器具有一些不確定和未知的特性而且很慢。php的rand()函數默認使用libc隨機數發生器。mt_rand()函數是非正式用來替換它的。該函數用了Mersenne Twister中已知的特性作為隨機數發生器,它可以產生隨機數值的平均速度比libc提供的rand()快四倍。 隨機顯示許愿墻紙的關鍵代碼如下: $T=rand(320,520); $L=rand(5,790); $Z=$page_count; $Z?=?$Z?-?3; echo?"
6,解析IP獲取用戶所在城市 在PHP中,使用PHP預定義變量$_SERVER['REMOTE_ADDR']獲取客戶端的IP地址。然后將IP按照通用的算法將其解析成一個數字串(每個城市都有一個對應的數字串),通過這個數字串來確定查詢用戶所在的城市名稱。 在數據庫中,IP區域的存儲時一個數字串,并非實際的IP地址,這時就需要對客戶端或服務器端的IP轉換成指定數字串的格式,從而進行地域信息的查詢。 復制代碼 代碼如下: $ip=getenv('REMOTE_ADDR');???//獲取客戶端IP地址 /********解釋IP區域***********/ $cip=cip($ip); $csql="select * from tb_ip where (ip1'".$cip."') or (ip1=ip2 and ip2='".$cip."')"; //執行查詢 $res = $DB->fetch_one_array($csql); $cip1=$res['country']; if($cip1==""){ $cip1="IP不詳"; } 二,實現過程 1,雙擊許愿字條,該字條置頂顯示,并屏蔽整個頁面 當用戶雙擊許愿字條后,該許愿字條將置頂顯示,同時屏蔽整個頁面,以達到突出顯示的效果。 (1)控制DIV突顯效果,首頁設置一個隱藏的DIV,ID名稱為“shadeDiv”,代碼如下 (2)應用Javascript腳本自定義一個Hide()函數,通過設置DIV的顯示屬性display設置為空,從而隱藏DIV,代碼如下: 復制代碼 代碼如下: function Hide(){ document.getElementById("shadeDiv").style.display = "none"; iLayerMaxNum = iLayerMaxNum+2; } (3)在CSS樣式表中設置隱藏DIV的樣式。代碼如下: #shadeDiv{filter:alpha(Opacity=55);opacity:0.35;background: #333;position:absolute;} //IE瀏覽器下濾鏡效果,兼容性不好 (4)接下來,雙擊已經設計好的許愿字條DIV圖層,代碼如下: οndblclick=Show(".$id.",'shadeDiv') (5)自定義一個函數show(),用來控制背景的效果。 復制代碼 代碼如下: function Show(n,divName){ document.getElementById(n).style.zIndex = iLayerMaxNum+1; document.getElementById(divName).style.display = "block"; document.getElementById(divName).style.zIndex = iLayerMaxNum; var size = getPageSize();?//設置隱藏區域的面積,這里是獲取許愿墻顯示區域的面積,即本例中設置濾鏡的面積 document.getElementById(divName).style.width = size[0]+"px"; document.getElementById(divName).style.height = size[1]+"px"; } (6)設置紙條顯示的區域,這里得到的僅僅是數字 復制代碼 代碼如下: function getPageSize(){ var w =document.body.clientWidth; var h= document.body.clientHeight; arrayPageSize = new Array(w,h); return arrayPageSize; } 2,應用Jpgraph圖形類庫實現3D餅形圖表按地域統計分析許愿比率,實現過程如下: (1)應用浮動框架技術實現不同類別下的地域統計分析結果,每一個黃顏色的版塊分別是一個浮動框架.浮動框架布局的代碼如下: 復制代碼 代碼如下: (2)應用3D餅形圖動態統計分析全部區域的許愿比率 首先應用Jpgraph類庫實現圖表分析,需要應用include語句引用jpgraph.php文件。代碼如下: 復制代碼 代碼如下: include("global.php");??//鏈接數據庫源文件 include("jpgraph/jpgraph.php");??//引用圖表分析類文件 ?> 繪制餅形圖需要引用jpgraph_pie.php文件。繪制3D效果的餅形圖需要創建PiePlot3D類對象,PiePlot3D類在Jpgraph_pie3d.php中定義,需要應用include語句調用該文件。代碼如下: 復制代碼 代碼如下: include("jpgraph/jpgraph_pie.php");??//引用餅形圖類文件 include_once("jpgraph/jpgraph_pie3d.php");??//引用3D餅圖PiePlot3D對象所在的類文件 ?> 創建graph對象,生成一個990x276像素大小的畫布,設置統計圖所在畫布的位置以及畫布的陰影。設置標題的字體以及圖例的字體。設置餅形圖所在畫布的位置以及半徑,將繪制的3D餅形圖添加到圖像中。 復制代碼 代碼如下: $graph = new PieGraph(990,276);?//創建畫布 $graph->SetShadow();?//設置陰影 $graph->title->Set("應用3D餅形圖統計分析全部區域許愿比率");?//設置標題名稱 $graph->title->SetFont(FF_SIMSUN,FS_BOLD);?//設置標題的字體加粗 $graph->legend->SetFont(FF_SIMSUN,FS_NORMAL);?//設置餅形圖文字的字體 $size=0.5;?//設置餅形圖的半徑 /***********************統計全部許愿比率*************************/ //創建餅形圖對象 $p0= new PiePlot3D($arraynum0);?//創建餅形圖對象 $p0->SetLegends($arraycip0); $p0->SetSize($size);?//設置餅形圖的大小 $p0->SetCenter(0.45,0.48);?//設置餅形圖的坐標位置 $p0->SetLegends($arraycip0);?//設置城市名稱 $p0->value->SetFont(FF_FONT0);?//設置字體 $p0->title->SetFont(FF_SIMSUN,FS_BOLD);? //設置標題字體加粗 /*************************************************************/ $graph->Add($p0);? //添加3D餅形圖到圖像中 $graph->Stroke();?//輸出圖像 ?> (3)應用3D餅形圖動態統計分析”親情類“的許愿比率。其實現方法與獲取全部的許愿比率的方法基本類似,不同的是這里在檢索親情類許愿人數時設置了where查詢條件。另外在設置餅形圖的半徑和位置上稍微有變化。 復制代碼 代碼如下: include("global.php");?//鏈接數據庫文件 include ("jpgraph/jpgraph.php");?//引用圖表分析類文件 include ("jpgraph/jpgraph_pie.php");?//引用餅形圖類文件 include_once ("jpgraph/jpgraph_pie3d.php");? //引用3D餅圖PiePlot3D對象所在的類文件 /***********************統計親情類別*************************/ $sql2="select distinct(count(cip)) as num,cip from tb_wishes where wishsort='親情' group by cip "; $DB->query($sql2); ?//動態統計親情類許愿 $res2=$DB->get_rows_array($sql2);?//生成二維數組 $rows_count2=count($res2);? //統計二維數組的數量 $arraynum2=array();?//聲明城市”親情類“許愿總數數組 $arraycip2=array();? //聲明”親情類“城市名稱數組 //解析數組 for($k=0;$k array_push($arraynum2,$res2[$k][num]);?//輸出城市的許愿數量 array_push($arraycip2,$res2[$k][cip]);? //輸出城市名稱 } /*************************************************************/ //創建畫布 $graph = new PieGraph(320,246);? //創建畫布 $graph->SetShadow();?//設置陰影 $graph->title->Set("統計分析全部區域的[ 親情類 ] 許愿比率");??//設置標題名稱 $graph->title->SetFont(FF_SIMSUN,FS_BOLD);?//設置標題的字體加粗 $graph->legend->SetFont(FF_SIMSUN,FS_NORMAL);?//設置餅形圖文字的字體 $size=0.3; ?//設置餅形圖的半徑 /***********************統計親情許愿比率*************************/ $p= new PiePlot3D($arraynum2);?//創建餅形圖對象 $p->SetLegends($arraycip2);??//設置城市名稱 $p->SetSize($size);??//設置餅形圖的大小 $p->SetCenter(0.45,0.55);?//設置餅形圖的坐標位置 $p->value->SetFont(FF_FONT0);?//設置字體 $p->title->SetFont(FF_SIMSUN,FS_BOLD);?//設置標題字體加粗 /*************************************************************/ $graph->Add($p);?//添加3D餅形圖到圖像中 $graph->Stroke();?//輸出圖像 ?> 3,許愿墻列表,許愿墻字條高級搜索功能的實現 為了便于訪客能更清晰地查看各種不同類別的許愿字條,本模塊設計了愛墻列表和許愿字條高級搜索功能。其中,愛墻列表時在默認狀態下檢索全部的許愿字條,而高級搜索功能是按照訪客設置的一定的查詢條件來檢索與之匹配的許愿字條。 設計愛墻列表及許愿字條高級搜索的表單元素如下:
4,許愿墻顯示效果如圖: |
總結
以上是生活随笔為你收集整理的PHP许愿墙的经济可行性,深入PHP许愿墙模块功能分析的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: innerText,outerText,
- 下一篇: html:(32):字体,字号,颜色