深入PHP許愿墻模塊功能分析
更新時間：2013年06月25日 10:28:38 作者：
本篇文章是對PHP實現(xiàn)許愿墻的模塊功能進行了詳細的分析介紹，需要的朋友參考下
許愿墻模塊功能分析
一，熱點技術(shù)
1，實現(xiàn)可拖放DOM技術(shù)移動許愿字條
可拖放DOM模式(Draggable DOM pattern)的宗旨在于允許瀏覽者自己定義頁面中各元素的位置，并且，只需要用鼠標選中要移動的部分，把它拖到新的位置上，就可以定制頁面。
DOM是Document Object Model文檔對象模型的縮寫，是一種與瀏覽器、平臺、語言無關(guān)的接口，使用戶可以訪問頁面其他的標準組件。DOM是以層次結(jié)構(gòu)組織的節(jié)點或信息片段的集合。這個層次結(jié)構(gòu)允許開發(fā)人員在樹中導(dǎo)航尋找特定信息。分析該結(jié)構(gòu)通常需要加載整個文檔的構(gòu)造層次結(jié)構(gòu)，然后才能做任何工作。由于它基于信息層次，因此DOM被認為基于樹或基于對象。
具體實現(xiàn)時以下時間會被觸發(fā)：
(1)moveStart
(2)Move
(3)moveEnd
當(dāng)按下鼠標左鍵，開始移動鼠標時，在被拖動的許愿條上就會觸發(fā)moveStart事件。用戶可以使用moveStart事件處理函數(shù)在拖動開始時允許javaScript代碼。當(dāng)moveStart事件被觸發(fā)后，Move時間會一直觸發(fā)，只要對象還在被拖動，就一直觸發(fā)。當(dāng)拖動停止時，則觸發(fā)moveEnd事件。
echo輸出許愿條樣式布局，代碼如下：
echo "
<DIV class='".$pagecolor."'style='left:".$L."px;top:".$T."px;z-index:".$Z."' id='".$id."' onmousedown='Move(this,event)' ondblclick=Show(".$id.",'shadeDiv')>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=shead>
<span class='Num' >愛墻編號:".$id." ".$sendtime." <a onclick='myClose(".$id.")'>×</span>
</DIV>
</TD>
</TR>
<TR>
<TD>
<DIV class=sbody><img src='".$face."' id='IconImg' style='float:left'>
<span id='PickerSample'>".$Picker."</span><br> <span id='ContentSample'>$content</span>
</DIV>
<DIV class=sbody >
<H2><span id='authorSample'>".$author."</span></H2>
</DIV>
<DIV class=sbot align='right'>
<br><a href='#' onclick='holdout(".$id.",".$hits.")''>[祝福你]</a> 福氣:<span id='fq_id".$id."'>".$hits."</span> <span id='QQSample'>QQ：<a title='單擊與他/她交談' target='_blank'>".$QQ."</a></span>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>";
當(dāng)按下鼠標左鍵時，應(yīng)用鼠標時間onmousedown觸發(fā)Move()函數(shù)
var Layer='';
document.onmouseup=moveEnd;
document.onmousemove=moveStart;
var b;
var c;
function Move(Object,event){ //移動DIV許愿字條
Layer=Object.id;
if(document.all){
document.getElementById(Layer).setCapture();
b=event.x-document.getElementById(Layer).style.pixelLeft; //設(shè)置左邊框
c=event.y-document.getElementById(Layer).style.pixelTop; //設(shè)置右邊框
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
b=event.layerX; //返回時間對象相對于本體的橫坐標
c=event.layerY; //返回時間對象相對于本體的縱坐標
}
/**實現(xiàn)鼠標單擊字條時，字條置上**/
document.getElementById(Layer).style.zIndex=iLayerMaxNum;
iLayerMaxNum=iLayerMaxNum+1;
/********************************/
}
document.all是文檔中所有標簽組成的一個數(shù)組變量，包括了文檔對象中的所有元素，這個數(shù)組可以訪問文檔中的所有元素。
語法：
document.all[i]
document.all[name]
document.all.tags[tagname]
說明：
all[]是一個多功能的類似數(shù)組的對象，它提供了對文檔中所有HTML元素的訪問。all[]數(shù)組源自于IE4并已經(jīng)被很多其他瀏覽器采用
all[]已經(jīng)被Document接口的標準的getElementById()方法和getElementByTagName()方法以及Document對象的getElementByName()方法所取代。
all[]包含的元素保存了最初的順序，如果你知道他們在數(shù)組中的確切數(shù)字化位置，可以直接從數(shù)組中提取他們。然而，更為常見的是使用all[]數(shù)組，根據(jù)他們的HTML屬性name或id來訪問元素。如果元素擁有指定的name,將得到共享同一名稱的元素的一個數(shù)組。
document.all可以判斷瀏覽器是否是IE
if(document.all){
alert("is IE!");
}
window.captureEvents()
window.captureEvents(event1 | event2 | eventN)
captureEvents()方法捕獲所有發(fā)生的事件類型，如果有多個事件發(fā)生，則用|豎線隔開；captureEvents()方法主要事件如下：
Event.ABORT
Event.BLUR
Event.CHANGE
Event.CLICK
Event.DBLCLICK
Event.DRAGDROP
Event.ERROR
Event.FOCUS
Event.KEYDOWN
Event.KEYPRESS
Event.KEYUP
Event.LOAD
Event.MOUSEDOWN
Event.MOUSEMOVE
Event.MOUSEOUT
Event.MOUSEOVER
Event.MOUSEUP
Event.MOVE
Event.RESET
Event.RESIZE
Event.SELECT
Event.SUBMIT
Event.UNLOAD
示例代碼：
<html>
<head>
<title>Using window.captureEvents</title>
<script language="JavaScript1.2">
<!--
var counter = 0;
window.captureEvents(Event.CLICK)
window.onclick = myClickHandler;
function myClickHandler(){
window.document.myForm.myText.handleEvent;
}
function changeText(){
document.myForm.myText.value = counter++;
}
-->
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT size=2 value="" name="myText" onClick='changeText()'>
</form>
</body>
</html>
當(dāng)鼠標移動時，觸發(fā)moveStart()函數(shù)，代碼如下：
function moveStart(d){
if(Layer!=''){ //如果圖層不為空
if(document.all){
document.getElementById(Layer).style.left=event.x-b; //設(shè)置左邊距
document.getElementById(Layer).style.top=event.y-c; //設(shè)置右邊距
}else if(window.captureEvents){
document.getElementById(Layer).style.left=(d.clientX-b)+"px";
document.getElementById(Layer).style.top=(d.clientY-c)+"px";
}
}
}
應(yīng)用DOM方法(document對象的getElementById方法)獲取包含許愿字條layer層左邊距和上邊距的距離。b和c分別表示獲取Layer層的橫縱坐標。
clientX：檢索與窗口客戶區(qū)域有關(guān)的鼠標坐標的x坐標，屬性為只讀，沒有默認值。
clientY：檢索與窗口客戶區(qū)域有關(guān)的鼠標光標的y坐標，屬性為只讀，沒有默認值。
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft
各瀏覽器通用屬性：
screenX:鼠標在顯示屏幕上的坐標。
clientX:鼠標在頁面顯示區(qū)域的坐標。
特有屬性：(注：IE和FF的定位有個1px的差別，實際上，IE的定位從0開始，F(xiàn)F的定位從1開始，F(xiàn)F永遠會比IE大1px，需要根據(jù)實際情況處理。)
pageX:FF特有，鼠標在頁面上的位置，從頁面左上角開始定位，這個可以很方便在整個頁面上進行定位，IE沒有直接替換的屬性。
layerX:FF特有，鼠標相對于“觸發(fā)事件的元素的層級關(guān)系中離該元素最近的，設(shè)置了position的父元素”的邊界的位置，從border的左上角開始定位，即如果這個父元素存在border，則坐標原點在border的左上角，而不是內(nèi)容區(qū)域的左上角。
offsetX:IE特有，鼠標相對于“觸發(fā)事件的元素”的位置，從內(nèi)容區(qū)域左上角開始定位，不是從border左上角開始！這個屬性比較好用，用來判斷鼠標點在一個元素中的哪個位置很方便，F(xiàn)F沒有直接替換的屬性。
x：IE特有，跟layerX一個效果，可作為layerX的直接替換屬性。
offsetLeft:這個屬性不是事件對象的屬性，而是DOM對象所有的，該屬性表示的是DOM對象在“該DOM對象的層級關(guān)系中離該對象最近的，設(shè)置了position的父對象”中的位置，雖然話是這么說的，但是不同的瀏覽器效果不一樣，F(xiàn)F中嚴格按上述說明執(zhí)行，但是在IE6/7中，這個屬性返回該DOM對象在其直接父對象中的位置，但是IE8改正了這個問題，不過IE8又有了一個新問題，其他的瀏覽器都是從父對象的內(nèi)容區(qū)域的左上角開始定位，IE8確是從父元素的border的左上角開始定位，由于測試環(huán)境為IETester中的IE8，不能排除是IETester的問題。
當(dāng)鼠標抬起時，觸發(fā)moveEnd()函數(shù)，代碼如下：
function moveEnd(d){
if(Layer!=''){ //如果layer圖層不為空
if(document.all){
document.getElementById(Layer).releaseCapture();
Layer=''; //將layer圖層設(shè)為空
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
Layer=''; //將layer圖層設(shè)為空
}
}
}
在上面的代碼中，setCapture()函數(shù)的作用是將后續(xù)的mouse事件都發(fā)送給這個對象，releaseCapture()函數(shù)是將mouse事件返回，由document、window等對象來自行處理，這樣就保證了在拖動的過程中，不會由于經(jīng)過了其他元素而受到干擾。另外，還有一個很重要的因素，在win32上，MOUSEMOVE的時間不是連續(xù)的，并不是每次移動一個像素的鼠標指針，就會發(fā)生一個MOUSEMOVE事件，Windows會周期性檢測鼠標指針的位置變化來產(chǎn)生MOUSEMOVE的事件。所以，如果是一個很小的頁面對象，例如一個直徑5像素的圓點，如果沒有setCapture和releaseCapture,那么在按住鼠標之后，快速地移動鼠標，就有可能鼠標移動走了但小圓點還在原地，就是因為下一次的mousemove事件已經(jīng)不再發(fā)給這個圓點對象了。
2,對QQ號文本框中禁止非數(shù)字字符輸入
在動態(tài)網(wǎng)站中，為了確保用戶輸入的文本或數(shù)值的有效性，必須對用戶輸入的數(shù)據(jù)加以驗證，確保數(shù)據(jù)的準確及安全性。本模塊禁止用戶向QQ文本框中輸入漢字或英文字符。
<input name="QQ" type="text" id="QQ"
<SPAN style="WHITE-SPACE: pre"> </SPAN>onKeyUp="setQQ();if(/(^0+)/.test(value))value=value.replace(/^0*/, '')"
<SPAN style="WHITE-SPACE: pre"> </SPAN>onKeyDown="setQQ();" //鍵盤按下時觸發(fā)，比如按著1不放時，該函數(shù)生效
<SPAN style="WHITE-SPACE: pre"> </SPAN>onKeyPress="return event.keyCode>=48 && event.keyCode<=57;" size="16" maxlength="10"
<SPAN style="WHITE-SPACE: pre"> </SPAN>onpaste="var s=clipboardData.getData('text'); if(!/\D/.test(s))value=s.replace(/^0*/,'');
<SPAN style="WHITE-SPACE: pre"> </SPAN>return false;"
/>
上面代碼中，分別應(yīng)用3個事件來控制QQ號輸入的值。
onKeyUp事件：事件會在鍵盤按鍵被松開時發(fā)生。如果是數(shù)字則可以添加到QQ號文本框中。
onKeyPress事件：事件會在鍵盤按鍵被按下并釋放一個鍵時發(fā)生。只允許用戶輸入0~9之間的數(shù)字。
onpaste事件：當(dāng)用戶粘貼數(shù)據(jù)以便從系統(tǒng)剪切板向文檔傳送數(shù)據(jù)時在目標對象上觸發(fā)。當(dāng)用戶向QQ號文本框中粘貼字符串時，只允許用戶粘貼數(shù)字串。
另外，應(yīng)用isNaN()方法來驗證輸入的QQ號是否是數(shù)值型。
isNaN(num Value);
numvalue：是必選項，用來檢查是否為NaN的值。
當(dāng)提交簽字許愿字條時，將觸發(fā)checkForm()函數(shù)，應(yīng)用document.getElementById()函數(shù)和表單字段的ID（QQ文本框的ID號為“QQ”）來直接獲取這個元素。應(yīng)用isNaN()方法來驗證QQ號是否為數(shù)值型。
function checkForm(){ //祝福內(nèi)容
if(isNaN(document.getElementById('QQ').value)){
alert('您輸入的QQ號不是數(shù)值型，請重新輸入!');
document.getElementById('QQ').focus();
return false;
}
}
常用文本框限制代碼：
代碼示例：
onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"
說明：
replace(/[^a-zA-Z]/g,'')
其中有^為邏輯詞“非”，然后后面跟著a-zA-Z指的是英文字母大小寫范圍，“/g”表示用后面的''中的字符(當(dāng)前為空)全局替換。
此句代碼的含義為：在文本框中只能輸入大寫或小寫字母，如果不是，則自動刪除。
常用輸入限制代碼：
只能輸入英文字母：
<input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"/>
只能輸入英文和數(shù)字：
<input type="text" onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')"/>
<input type="text" onkeyup="value=value.replace(/[\W]/g,'')"/> \W匹配字母或數(shù)字或下劃線或漢字,\D表示匹配數(shù)字
只能輸入數(shù)字和x(用于身份證號的輸入) ：
<input type="text" onKeyUp="value=value.replace(/[^\d|x]/g,'')" /> |后面的就是可以排除的非數(shù)字，可是一個范圍x-z
只能輸入數(shù)字
<input type="text" onKeyUp="value=value.replace(/[^\d]/g,'')" /> \D表示匹配數(shù)字，中文輸入法輸入時，存在后續(xù)表格不能輸入中文問題
<input type="text" onKeypress="if(event.keyCode < 45 || event.keyCode >57) event.returnValue = false;"> 不能輸入字母,但能輸入/.-等
<INPUT TYPE="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" onpaste="return false"> 不能輸入數(shù)字,不允許粘貼
<input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能輸入數(shù)字');this.value='';}">
<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value)) execCommand('undo')"> 但可以輸入空格，解決中文輸入法問題
只能輸入字母和漢字(還有一些非數(shù)字字符)
<input onkeyup="value=value.replace(/[\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))">
小數(shù)點后只能有最多兩位(數(shù)字,中文都可輸入),不能輸入字母和運算符號
<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">
3,限制紙條內(nèi)容的長度
在簽寫許愿內(nèi)容時，通常需要限制用戶輸入文本的長度。在字符串長度的計算上，漢字是占兩個字符(漢字的寬度以及存儲所占的位置決定了一個漢字占兩個字符)，而英文字母和數(shù)字都被識別為一個字符。在PHP中獲取字符串長度應(yīng)用strlen()函數(shù)實現(xiàn)。但是在本模塊中，為了能夠?qū)崿F(xiàn)統(tǒng)計許愿內(nèi)容所允許輸入的剩余字符數(shù)，這里就要重新輸寫計算中英文數(shù)字混合字符串長度的函數(shù)。在簽寫許愿內(nèi)容時，實時限制字符數(shù)。
添加一個文本框，用來控制輸入祝福紙條內(nèi)容剩余的字節(jié)數(shù)。
<INPUT style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" readOnly maxLength=3 size=3 value=150 name=freeLength>
在上面的代碼中，應(yīng)用“freeLength”來實時輸出祝福紙條內(nèi)容所剩余的字符數(shù)。
添加一個編輯框用來輸入祝福紙條的內(nèi)容，添加onkeydown和onkeyup事件來觸發(fā)javascript腳本自定義的函數(shù)textCounter(),用來限制該編輯輸入的字符數(shù)，最多輸入150個字符，如果許愿內(nèi)容大于150，則自動刪除，僅保留最大容量值。
<textarea name="content" id="content" cols="66" rows="6"
onkeydown="textCounter(this.form.content,this.form.freeLength,150)"
onkeyup="textCounter(this.form.content,this.form.freeLength,150)"
onafterpaste="textCounter(this.form.content,this.form.freeLength,150)">
</textarea>
在上面的代碼中，textCounter()函數(shù)有3個參數(shù)值，第一個參數(shù)值“this.form.content”是指輸入的許愿內(nèi)容；第二個參數(shù)值“this.form.freeLength”是指允許輸入的許愿內(nèi)容字符數(shù)；第三個參數(shù)“150”是輸入許愿內(nèi)容的最大容量值。
應(yīng)用javascript腳本自定義一個函數(shù)textCounter()，控制祝福內(nèi)容不能超過150個字符，這里需要注意的是，中英文所占的字節(jié)數(shù)不同。
DBCS是亞洲的字符集，包含ANSI(ANSI即ASCII碼值為0~255之間的字符)。DBCS使用1個或者2個字節(jié)來表示一個字符集，超過256個字符則占用兩個字節(jié)。當(dāng)字符為ANSI時，存放于文件中只占用1個字節(jié)。如果非ANSI(大于256個字符)，則占用兩個字節(jié)。因此，這里就用三目運算符來分別計算英文數(shù)字和漢字所占用的字節(jié)數(shù)。當(dāng)變量StrValue.charCodeAt(i)小于等于256時，按1個字節(jié)計算；大于256時按2個字節(jié)計算。
function textCounter(field, countfield, maxlimit) { //祝福內(nèi)容限制在120個字符內(nèi)
var StrValue = field.value;
var ByteCount = 0;
var StrLength = field.value.length;
for (i=0;i<StrLength;i++){ //記算祝福文字個數(shù)，英文數(shù)字占1個字符，漢字占2個字
ByteCount = (StrValue.charCodeAt(i)<=256) ? ByteCount + 1 : ByteCount + 2;
}
if(ByteCount<=maxlimit){
strtemp=StrValue;
document.getElementById('ContentSample').innerHTML = StrValue;
countfield.value = maxlimit - ByteCount;
}else{
document.getElementById('content').innerHTML = strtemp;
}
}
該函數(shù)只能限制顯示部分150字節(jié)，但是輸入框沒有現(xiàn)在，而且粘貼超過150字節(jié)時，顯示為空白。修改代碼如下：
function textCounter(field, countfield, maxlimit) { //祝福內(nèi)容限制在150個字符內(nèi)
var StrValue = field.value;
var ByteCount = 0;
var StrLength = field.value.length;
var cutstr = '';
for (i=0;i<StrLength;i++){
ByteCount = (StrValue.charCodeAt(i)<=256) ? ByteCount + 1 : ByteCount + 2; //記算祝福文字個數(shù)，英文數(shù)字占1個字符，漢字占2個字
if( ByteCount<=maxlimit){
cutstr = StrValue.substring(0,i+1); //如果輸入字符小于限制長度，截取當(dāng)前輸入字符i+1為輸入字符個數(shù)
strtemp = cutstr;
} else {
cutstr=strtemp; //否則截取最大輸入字符長度
}
}
if(ByteCount<=maxlimit){
document.getElementById('ContentSample').innerHTML = cutstr; //輸出顯示內(nèi)容
countfield.value = maxlimit - ByteCount;
}else{
document.getElementById('content').value = cutstr; //限制輸入框顯示內(nèi)容
document.getElementById('ContentSample').innerHTML = cutstr; //輸出顯示內(nèi)容
countfield.value =0; //剩余字節(jié)數(shù)
}
}
在上面的代碼中，“countfield.value”是用來計算輸入字符串剩余的字符數(shù)，并將該值賦給textCounter()函數(shù)的第2個參數(shù)值“this.form.freeLength”，以此來實時計算當(dāng)前許愿內(nèi)容所允許輸入的字符數(shù)量。
4,PHP驗證碼類當(dāng)前頁面校驗驗證碼輸入對與錯
當(dāng)前頁面驗證輸入是否正確的方法Ajax，add.js
function codecheck(){
var getVcode = document.getElementById('checkcode').value; //獲取驗證碼輸入框的內(nèi)容
xmlhttp.open("get","codeChk.php?code="+getVcode,true); //將驗證碼發(fā)送到codeChk.php頁面檢驗驗證碼是否正確
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{
var msg=xmlhttp.responseText;
if(msg==1){
document.getElementById("messageImg").src="images/dui.gif"; //驗證碼正確，輸出顯示正確圖片
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驗證碼檢驗頁面
<?php
session_start();
require 'secoder.class.php'; //先把類包含進來，實際路徑根據(jù)實際情況進行修改。
$vcode = new YL_Security_Secoder(); //實例化一個對象
$code = $_GET['code'];
echo $vcode->check($code); //check($code)函數(shù)返回的是true或者false，返回true時，codeChk.php頁面輸出的是1，否則沒有輸出
?>
secoder.class.php驗證碼類中的check($code)函數(shù)
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']) { //不區(qū)分大小寫比較
return true;
}
return false;
}
5,定義生成指定范圍的許愿條隨機算法
本模塊需要生成一個指定范圍的隨機算法，用來顯示許愿字條的顯示位置，以使每次展示在讀者眼前的都是不同的許愿字條。本模塊主要應(yīng)用rand()函數(shù)控制許愿墻紙的顯示位置。
rand()函數(shù)用于產(chǎn)生一個隨機整數(shù)
語法：rand(min,max)
參數(shù)：min,max可選，規(guī)定隨機數(shù)產(chǎn)生的范圍
如果沒有提供可選參數(shù) min 和 max，rand() 返回 0 到 RAND_MAX 之間的偽隨機整數(shù)。在某些平臺下（例如 Windows）RAND_MAX 只有 32768。如果需要的范圍大于 32768，那么指定 min 和 max 參數(shù)就可以生成大于 RAND_MAX 的數(shù)了，或者考慮用 mt_rand() 來替代它。
mt_rand() 使用 Mersenne Twister 算法返回隨機整數(shù)
語法：mt_rand(min,max)
如果沒有提供可選參數(shù) min 和 max，mt_rand() 返回 0 到 RAND_MAX 之間的偽隨機數(shù)。很多老的libc的隨機數(shù)發(fā)生器具有一些不確定和未知的特性而且很慢。php的rand()函數(shù)默認使用libc隨機數(shù)發(fā)生器。mt_rand()函數(shù)是非正式用來替換它的。該函數(shù)用了Mersenne Twister中已知的特性作為隨機數(shù)發(fā)生器，它可以產(chǎn)生隨機數(shù)值的平均速度比libc提供的rand()快四倍。
隨機顯示許愿墻紙的關(guān)鍵代碼如下：
$T=rand(320,520);
$L=rand(5,790);
$Z=$page_count;
$Z = $Z - 3;
echo "
<DIV class='".$pagecolor."'style='left:".$L."px;top:".$T."px;z-index:".$Z.";' id='".$id."' onmousedown='Move(this,event)' ondblclick=Show(".$id.",'shadeDiv')>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=shead>
<span class='Num' >愛墻編號:".$id." ".$sendtime." <a onclick='myClose(".$id.")'>×</span>
</DIV>
</TD>
</TR>
<TR>
<TD>
<DIV class=sbody><img src='".$face."' id='IconImg' style='float:left'>
<span id='PickerSample'>".$Picker."</span><br> <span id='ContentSample'>$content</span>
</DIV>
<DIV class=sbody >
<H2><span id='authorSample'>".$author."</span></H2>
</DIV>
<DIV class=sbot align='right'>
<br><a href='#' onclick='holdout(".$id.",".$hits.")''>[祝福你]</a> 福氣:<span id='fq_id".$id."'>".$hits."</span> <span id='QQSample'>QQ：<a title='單擊與他/她交談' target='_blank'>".$QQ."</a></span>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>";
6,解析IP獲取用戶所在城市
在PHP中，使用PHP預(yù)定義變量$_SERVER['REMOTE_ADDR']獲取客戶端的IP地址。然后將IP按照通用的算法將其解析成一個數(shù)字串(每個城市都有一個對應(yīng)的數(shù)字串)，通過這個數(shù)字串來確定查詢用戶所在的城市名稱。
在數(shù)據(jù)庫中，IP區(qū)域的存儲時一個數(shù)字串，并非實際的IP地址，這時就需要對客戶端或服務(wù)器端的IP轉(zhuǎn)換成指定數(shù)字串的格式，從而進行地域信息的查詢。
$ip=getenv('REMOTE_ADDR'); //獲取客戶端IP地址
/********解釋IP區(qū)域***********/
$cip=cip($ip);
$csql="select * from tb_ip where (ip1<'".$cip."' and ip2>'".$cip."') or (ip1=ip2 and ip2='".$cip."')";
//執(zhí)行查詢
$res = $DB->fetch_one_array($csql);
$cip1=$res['country'];
if($cip1==""){
$cip1="IP不詳";
}
二,實現(xiàn)過程
1，雙擊許愿字條，該字條置頂顯示，并屏蔽整個頁面
當(dāng)用戶雙擊許愿字條后，該許愿字條將置頂顯示，同時屏蔽整個頁面，以達到突出顯示的效果。
(1)控制DIV突顯效果，首頁設(shè)置一個隱藏的DIV，ID名稱為“shadeDiv”，代碼如下
<div style="display:none;" id="shadeDiv" onclick="Hide();"></div>
(2)應(yīng)用Javascript腳本自定義一個Hide()函數(shù)，通過設(shè)置DIV的顯示屬性display設(shè)置為空，從而隱藏DIV，代碼如下：
function Hide(){
document.getElementById("shadeDiv").style.display = "none";
iLayerMaxNum = iLayerMaxNum+2;
}
(3)在CSS樣式表中設(shè)置隱藏DIV的樣式。代碼如下：
#shadeDiv{filter:alpha(Opacity=55);opacity:0.35;background: #333;position:absolute;} //IE瀏覽器下濾鏡效果，兼容性不好
(4)接下來，雙擊已經(jīng)設(shè)計好的許愿字條DIV圖層，代碼如下：
ondblclick=Show(".$id.",'shadeDiv')
(5)自定義一個函數(shù)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(); //設(shè)置隱藏區(qū)域的面積，這里是獲取許愿墻顯示區(qū)域的面積，即本例中設(shè)置濾鏡的面積
document.getElementById(divName).style.width = size[0]+"px";
document.getElementById(divName).style.height = size[1]+"px";
}
(6)設(shè)置紙條顯示的區(qū)域,這里得到的僅僅是數(shù)字
function getPageSize(){
var w =document.body.clientWidth;
var h= document.body.clientHeight;
arrayPageSize = new Array(w,h);
return arrayPageSize;
}
2,應(yīng)用Jpgraph圖形類庫實現(xiàn)3D餅形圖表按地域統(tǒng)計分析許愿比率,實現(xiàn)過程如下：
(1)應(yīng)用浮動框架技術(shù)實現(xiàn)不同類別下的地域統(tǒng)計分析結(jié)果，每一個黃顏色的版塊分別是一個浮動框架.浮動框架布局的代碼如下：
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”全部“許愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_all.php" style="HEIGHT:290px;VISIBILITY:inherit;WIDTH:1004px;Z-INDEX:3">
</IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”親情類“許愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_relative.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
</IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”愛情類“許愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_love.php" style="HEIGHT:90px;VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX: 3">
</IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”友情類“許愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_friend.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
</IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”自己類“許愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_self.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
</IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”奧運會類“許愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_olympic.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
</IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”汶川類“許愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_wch.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
</IFRAME>
</div>
(2)應(yīng)用3D餅形圖動態(tài)統(tǒng)計分析全部區(qū)域的許愿比率
首先應(yīng)用Jpgraph類庫實現(xiàn)圖表分析，需要應(yīng)用include語句引用jpgraph.php文件。代碼如下：
<?php
include("global.php"); //鏈接數(shù)據(jù)庫源文件
include("jpgraph/jpgraph.php"); //引用圖表分析類文件
?>
繪制餅形圖需要引用jpgraph_pie.php文件。繪制3D效果的餅形圖需要創(chuàng)建PiePlot3D類對象，PiePlot3D類在Jpgraph_pie3d.php中定義，需要應(yīng)用include語句調(diào)用該文件。代碼如下：
<?php
include("jpgraph/jpgraph_pie.php"); //引用餅形圖類文件
include_once("jpgraph/jpgraph_pie3d.php"); //引用3D餅圖PiePlot3D對象所在的類文件
?>
創(chuàng)建graph對象，生成一個990x276像素大小的畫布，設(shè)置統(tǒng)計圖所在畫布的位置以及畫布的陰影。設(shè)置標題的字體以及圖例的字體。設(shè)置餅形圖所在畫布的位置以及半徑，將繪制的3D餅形圖添加到圖像中。
<?php
$graph = new PieGraph(990,276); //創(chuàng)建畫布
$graph->SetShadow(); //設(shè)置陰影
$graph->title->Set("應(yīng)用3D餅形圖統(tǒng)計分析全部區(qū)域許愿比率"); //設(shè)置標題名稱
$graph->title->SetFont(FF_SIMSUN,FS_BOLD); //設(shè)置標題的字體加粗
$graph->legend->SetFont(FF_SIMSUN,FS_NORMAL); //設(shè)置餅形圖文字的字體
$size=0.5; //設(shè)置餅形圖的半徑
/***********************統(tǒng)計全部許愿比率*************************/
//創(chuàng)建餅形圖對象
$p0= new PiePlot3D($arraynum0); //創(chuàng)建餅形圖對象
$p0->SetLegends($arraycip0);
$p0->SetSize($size); //設(shè)置餅形圖的大小
$p0->SetCenter(0.45,0.48); //設(shè)置餅形圖的坐標位置
$p0->SetLegends($arraycip0); //設(shè)置城市名稱
$p0->value->SetFont(FF_FONT0); //設(shè)置字體
$p0->title->SetFont(FF_SIMSUN,FS_BOLD); //設(shè)置標題字體加粗
/*************************************************************/
$graph->Add($p0); //添加3D餅形圖到圖像中
$graph->Stroke(); //輸出圖像
?>
(3)應(yīng)用3D餅形圖動態(tài)統(tǒng)計分析”親情類“的許愿比率。其實現(xiàn)方法與獲取全部的許愿比率的方法基本類似，不同的是這里在檢索親情類許愿人數(shù)時設(shè)置了where查詢條件。另外在設(shè)置餅形圖的半徑和位置上稍微有變化。
<?php
include("global.php"); //鏈接數(shù)據(jù)庫文件
include ("jpgraph/jpgraph.php"); //引用圖表分析類文件
include ("jpgraph/jpgraph_pie.php"); //引用餅形圖類文件
include_once ("jpgraph/jpgraph_pie3d.php"); //引用3D餅圖PiePlot3D對象所在的類文件
/***********************統(tǒng)計親情類別*************************/
$sql2="select distinct(count(cip)) as num,cip from tb_wishes where wishsort='親情' group by cip ";
$DB->query($sql2); //動態(tài)統(tǒng)計親情類許愿
$res2=$DB->get_rows_array($sql2); //生成二維數(shù)組
$rows_count2=count($res2); //統(tǒng)計二維數(shù)組的數(shù)量
$arraynum2=array(); //聲明城市”親情類“許愿總數(shù)數(shù)組
$arraycip2=array(); //聲明”親情類“城市名稱數(shù)組
//解析數(shù)組
for($k=0;$k<$rows_count2;$k++){
array_push($arraynum2,$res2[$k][num]); //輸出城市的許愿數(shù)量
array_push($arraycip2,$res2[$k][cip]); //輸出城市名稱
}
/*************************************************************/
//創(chuàng)建畫布
$graph = new PieGraph(320,246); //創(chuàng)建畫布
$graph->SetShadow(); //設(shè)置陰影
$graph->title->Set("統(tǒng)計分析全部區(qū)域的[ 親情類 ] 許愿比率"); //設(shè)置標題名稱
$graph->title->SetFont(FF_SIMSUN,FS_BOLD); //設(shè)置標題的字體加粗
$graph->legend->SetFont(FF_SIMSUN,FS_NORMAL); //設(shè)置餅形圖文字的字體
$size=0.3; //設(shè)置餅形圖的半徑
/***********************統(tǒng)計親情許愿比率*************************/
$p= new PiePlot3D($arraynum2); //創(chuàng)建餅形圖對象
$p->SetLegends($arraycip2); //設(shè)置城市名稱
$p->SetSize($size); //設(shè)置餅形圖的大小
$p->SetCenter(0.45,0.55); //設(shè)置餅形圖的坐標位置
$p->value->SetFont(FF_FONT0); //設(shè)置字體
$p->title->SetFont(FF_SIMSUN,FS_BOLD); //設(shè)置標題字體加粗
/*************************************************************/
$graph->Add($p); //添加3D餅形圖到圖像中
$graph->Stroke(); //輸出圖像
?>
3,許愿墻列表,許愿墻字條高級搜索功能的實現(xiàn)
為了便于訪客能更清晰地查看各種不同類別的許愿字條，本模塊設(shè)計了愛墻列表和許愿字條高級搜索功能。其中，愛墻列表時在默認狀態(tài)下檢索全部的許愿字條，而高級搜索功能是按照訪客設(shè)置的一定的查詢條件來檢索與之匹配的許愿字條。
設(shè)計愛墻列表及許愿字條高級搜索的表單元素如下：
<table width="1004" height="25" border="0" cellpadding="0" cellspacing="0">
<form name="form" method="get" action="">
<tr>
<td align="center" bgcolor="#339933">請輸入查詢條件：
<input type="text" name="content1" size="30" class="inputs">
<select name="select">
<option value="奧運會">奧運會</option>
<option value="汶川">汶川</option>
<option value="愛情">愛情</option>
<option value="親情">親情</option>
<option value="友情">友情</option>
<option value="自己">自己</option>
<option value="全部" selected="selected">全部</option>
</select>
<input type="submit" name="submit" value="檢索許愿" class="btn_search">
(支持多條件查詢，如：愛墻號、許愿人、許愿內(nèi)容等)
</td>
</tr>
</form>
</table>
4,許愿墻顯示效果如圖：
一，熱點技術(shù)
1，實現(xiàn)可拖放DOM技術(shù)移動許愿字條
可拖放DOM模式(Draggable DOM pattern)的宗旨在于允許瀏覽者自己定義頁面中各元素的位置，并且，只需要用鼠標選中要移動的部分，把它拖到新的位置上，就可以定制頁面。
DOM是Document Object Model文檔對象模型的縮寫，是一種與瀏覽器、平臺、語言無關(guān)的接口，使用戶可以訪問頁面其他的標準組件。DOM是以層次結(jié)構(gòu)組織的節(jié)點或信息片段的集合。這個層次結(jié)構(gòu)允許開發(fā)人員在樹中導(dǎo)航尋找特定信息。分析該結(jié)構(gòu)通常需要加載整個文檔的構(gòu)造層次結(jié)構(gòu)，然后才能做任何工作。由于它基于信息層次，因此DOM被認為基于樹或基于對象。
具體實現(xiàn)時以下時間會被觸發(fā)：
(1)moveStart
(2)Move
(3)moveEnd
當(dāng)按下鼠標左鍵，開始移動鼠標時，在被拖動的許愿條上就會觸發(fā)moveStart事件。用戶可以使用moveStart事件處理函數(shù)在拖動開始時允許javaScript代碼。當(dāng)moveStart事件被觸發(fā)后，Move時間會一直觸發(fā)，只要對象還在被拖動，就一直觸發(fā)。當(dāng)拖動停止時，則觸發(fā)moveEnd事件。
echo輸出許愿條樣式布局，代碼如下：
復(fù)制代碼 代碼如下:
echo "
<DIV class='".$pagecolor."'style='left:".$L."px;top:".$T."px;z-index:".$Z."' id='".$id."' onmousedown='Move(this,event)' ondblclick=Show(".$id.",'shadeDiv')>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=shead>
<span class='Num' >愛墻編號:".$id." ".$sendtime." <a onclick='myClose(".$id.")'>×</span>
</DIV>
</TD>
</TR>
<TR>
<TD>
<DIV class=sbody><img src='".$face."' id='IconImg' style='float:left'>
<span id='PickerSample'>".$Picker."</span><br> <span id='ContentSample'>$content</span>
</DIV>
<DIV class=sbody >
<H2><span id='authorSample'>".$author."</span></H2>
</DIV>
<DIV class=sbot align='right'>
<br><a href='#' onclick='holdout(".$id.",".$hits.")''>[祝福你]</a> 福氣:<span id='fq_id".$id."'>".$hits."</span> <span id='QQSample'>QQ：<a title='單擊與他/她交談' target='_blank'>".$QQ."</a></span>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>";
當(dāng)按下鼠標左鍵時，應(yīng)用鼠標時間onmousedown觸發(fā)Move()函數(shù)
復(fù)制代碼 代碼如下:
var Layer='';
document.onmouseup=moveEnd;
document.onmousemove=moveStart;
var b;
var c;
function Move(Object,event){ //移動DIV許愿字條
Layer=Object.id;
if(document.all){
document.getElementById(Layer).setCapture();
b=event.x-document.getElementById(Layer).style.pixelLeft; //設(shè)置左邊框
c=event.y-document.getElementById(Layer).style.pixelTop; //設(shè)置右邊框
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
b=event.layerX; //返回時間對象相對于本體的橫坐標
c=event.layerY; //返回時間對象相對于本體的縱坐標
}
/**實現(xiàn)鼠標單擊字條時，字條置上**/
document.getElementById(Layer).style.zIndex=iLayerMaxNum;
iLayerMaxNum=iLayerMaxNum+1;
/********************************/
}
document.all是文檔中所有標簽組成的一個數(shù)組變量，包括了文檔對象中的所有元素，這個數(shù)組可以訪問文檔中的所有元素。
語法：
document.all[i]
document.all[name]
document.all.tags[tagname]
說明：
all[]是一個多功能的類似數(shù)組的對象，它提供了對文檔中所有HTML元素的訪問。all[]數(shù)組源自于IE4并已經(jīng)被很多其他瀏覽器采用
all[]已經(jīng)被Document接口的標準的getElementById()方法和getElementByTagName()方法以及Document對象的getElementByName()方法所取代。
all[]包含的元素保存了最初的順序，如果你知道他們在數(shù)組中的確切數(shù)字化位置，可以直接從數(shù)組中提取他們。然而，更為常見的是使用all[]數(shù)組，根據(jù)他們的HTML屬性name或id來訪問元素。如果元素擁有指定的name,將得到共享同一名稱的元素的一個數(shù)組。
document.all可以判斷瀏覽器是否是IE
復(fù)制代碼 代碼如下:
if(document.all){
alert("is IE!");
}
window.captureEvents()
window.captureEvents(event1 | event2 | eventN)
captureEvents()方法捕獲所有發(fā)生的事件類型，如果有多個事件發(fā)生，則用|豎線隔開；captureEvents()方法主要事件如下：
Event.ABORT
Event.BLUR
Event.CHANGE
Event.CLICK
Event.DBLCLICK
Event.DRAGDROP
Event.ERROR
Event.FOCUS
Event.KEYDOWN
Event.KEYPRESS
Event.KEYUP
Event.LOAD
Event.MOUSEDOWN
Event.MOUSEMOVE
Event.MOUSEOUT
Event.MOUSEOVER
Event.MOUSEUP
Event.MOVE
Event.RESET
Event.RESIZE
Event.SELECT
Event.SUBMIT
Event.UNLOAD
示例代碼：
復(fù)制代碼 代碼如下:
<html>
<head>
<title>Using window.captureEvents</title>
<script language="JavaScript1.2">
<!--
var counter = 0;
window.captureEvents(Event.CLICK)
window.onclick = myClickHandler;
function myClickHandler(){
window.document.myForm.myText.handleEvent;
}
function changeText(){
document.myForm.myText.value = counter++;
}
-->
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT size=2 value="" name="myText" onClick='changeText()'>
</form>
</body>
</html>
當(dāng)鼠標移動時，觸發(fā)moveStart()函數(shù)，代碼如下：
復(fù)制代碼 代碼如下:
function moveStart(d){
if(Layer!=''){ //如果圖層不為空
if(document.all){
document.getElementById(Layer).style.left=event.x-b; //設(shè)置左邊距
document.getElementById(Layer).style.top=event.y-c; //設(shè)置右邊距
}else if(window.captureEvents){
document.getElementById(Layer).style.left=(d.clientX-b)+"px";
document.getElementById(Layer).style.top=(d.clientY-c)+"px";
}
}
}
應(yīng)用DOM方法(document對象的getElementById方法)獲取包含許愿字條layer層左邊距和上邊距的距離。b和c分別表示獲取Layer層的橫縱坐標。
clientX：檢索與窗口客戶區(qū)域有關(guān)的鼠標坐標的x坐標，屬性為只讀，沒有默認值。
clientY：檢索與窗口客戶區(qū)域有關(guān)的鼠標光標的y坐標，屬性為只讀，沒有默認值。
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft
各瀏覽器通用屬性：
screenX:鼠標在顯示屏幕上的坐標。
clientX:鼠標在頁面顯示區(qū)域的坐標。
特有屬性：(注：IE和FF的定位有個1px的差別，實際上，IE的定位從0開始，F(xiàn)F的定位從1開始，F(xiàn)F永遠會比IE大1px，需要根據(jù)實際情況處理。)
pageX:FF特有，鼠標在頁面上的位置，從頁面左上角開始定位，這個可以很方便在整個頁面上進行定位，IE沒有直接替換的屬性。
layerX:FF特有，鼠標相對于“觸發(fā)事件的元素的層級關(guān)系中離該元素最近的，設(shè)置了position的父元素”的邊界的位置，從border的左上角開始定位，即如果這個父元素存在border，則坐標原點在border的左上角，而不是內(nèi)容區(qū)域的左上角。
offsetX:IE特有，鼠標相對于“觸發(fā)事件的元素”的位置，從內(nèi)容區(qū)域左上角開始定位，不是從border左上角開始！這個屬性比較好用，用來判斷鼠標點在一個元素中的哪個位置很方便，F(xiàn)F沒有直接替換的屬性。
x：IE特有，跟layerX一個效果，可作為layerX的直接替換屬性。
offsetLeft:這個屬性不是事件對象的屬性，而是DOM對象所有的，該屬性表示的是DOM對象在“該DOM對象的層級關(guān)系中離該對象最近的，設(shè)置了position的父對象”中的位置，雖然話是這么說的，但是不同的瀏覽器效果不一樣，F(xiàn)F中嚴格按上述說明執(zhí)行，但是在IE6/7中，這個屬性返回該DOM對象在其直接父對象中的位置，但是IE8改正了這個問題，不過IE8又有了一個新問題，其他的瀏覽器都是從父對象的內(nèi)容區(qū)域的左上角開始定位，IE8確是從父元素的border的左上角開始定位，由于測試環(huán)境為IETester中的IE8，不能排除是IETester的問題。
當(dāng)鼠標抬起時，觸發(fā)moveEnd()函數(shù)，代碼如下：
復(fù)制代碼 代碼如下:
function moveEnd(d){
if(Layer!=''){ //如果layer圖層不為空
if(document.all){
document.getElementById(Layer).releaseCapture();
Layer=''; //將layer圖層設(shè)為空
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
Layer=''; //將layer圖層設(shè)為空
}
}
}
在上面的代碼中，setCapture()函數(shù)的作用是將后續(xù)的mouse事件都發(fā)送給這個對象，releaseCapture()函數(shù)是將mouse事件返回，由document、window等對象來自行處理，這樣就保證了在拖動的過程中，不會由于經(jīng)過了其他元素而受到干擾。另外，還有一個很重要的因素，在win32上，MOUSEMOVE的時間不是連續(xù)的，并不是每次移動一個像素的鼠標指針，就會發(fā)生一個MOUSEMOVE事件，Windows會周期性檢測鼠標指針的位置變化來產(chǎn)生MOUSEMOVE的事件。所以，如果是一個很小的頁面對象，例如一個直徑5像素的圓點，如果沒有setCapture和releaseCapture,那么在按住鼠標之后，快速地移動鼠標，就有可能鼠標移動走了但小圓點還在原地，就是因為下一次的mousemove事件已經(jīng)不再發(fā)給這個圓點對象了。
2,對QQ號文本框中禁止非數(shù)字字符輸入
在動態(tài)網(wǎng)站中，為了確保用戶輸入的文本或數(shù)值的有效性，必須對用戶輸入的數(shù)據(jù)加以驗證，確保數(shù)據(jù)的準確及安全性。本模塊禁止用戶向QQ文本框中輸入漢字或英文字符。
復(fù)制代碼 代碼如下:
<input name="QQ" type="text" id="QQ"
<SPAN style="WHITE-SPACE: pre"> </SPAN>onKeyUp="setQQ();if(/(^0+)/.test(value))value=value.replace(/^0*/, '')"
<SPAN style="WHITE-SPACE: pre"> </SPAN>onKeyDown="setQQ();" //鍵盤按下時觸發(fā)，比如按著1不放時，該函數(shù)生效
<SPAN style="WHITE-SPACE: pre"> </SPAN>onKeyPress="return event.keyCode>=48 && event.keyCode<=57;" size="16" maxlength="10"
<SPAN style="WHITE-SPACE: pre"> </SPAN>onpaste="var s=clipboardData.getData('text'); if(!/\D/.test(s))value=s.replace(/^0*/,'');
<SPAN style="WHITE-SPACE: pre"> </SPAN>return false;"
/>
上面代碼中，分別應(yīng)用3個事件來控制QQ號輸入的值。
onKeyUp事件：事件會在鍵盤按鍵被松開時發(fā)生。如果是數(shù)字則可以添加到QQ號文本框中。
onKeyPress事件：事件會在鍵盤按鍵被按下并釋放一個鍵時發(fā)生。只允許用戶輸入0~9之間的數(shù)字。
onpaste事件：當(dāng)用戶粘貼數(shù)據(jù)以便從系統(tǒng)剪切板向文檔傳送數(shù)據(jù)時在目標對象上觸發(fā)。當(dāng)用戶向QQ號文本框中粘貼字符串時，只允許用戶粘貼數(shù)字串。
另外，應(yīng)用isNaN()方法來驗證輸入的QQ號是否是數(shù)值型。
isNaN(num Value);
numvalue：是必選項，用來檢查是否為NaN的值。
當(dāng)提交簽字許愿字條時，將觸發(fā)checkForm()函數(shù)，應(yīng)用document.getElementById()函數(shù)和表單字段的ID（QQ文本框的ID號為“QQ”）來直接獲取這個元素。應(yīng)用isNaN()方法來驗證QQ號是否為數(shù)值型。
復(fù)制代碼 代碼如下:
function checkForm(){ //祝福內(nèi)容
if(isNaN(document.getElementById('QQ').value)){
alert('您輸入的QQ號不是數(shù)值型，請重新輸入!');
document.getElementById('QQ').focus();
return false;
}
}
常用文本框限制代碼：
代碼示例：
onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"
說明：
replace(/[^a-zA-Z]/g,'')
其中有^為邏輯詞“非”，然后后面跟著a-zA-Z指的是英文字母大小寫范圍，“/g”表示用后面的''中的字符(當(dāng)前為空)全局替換。
此句代碼的含義為：在文本框中只能輸入大寫或小寫字母，如果不是，則自動刪除。
常用輸入限制代碼：
只能輸入英文字母：
復(fù)制代碼 代碼如下:
<input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"/>
只能輸入英文和數(shù)字：
復(fù)制代碼 代碼如下:
<input type="text" onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')"/>
<input type="text" onkeyup="value=value.replace(/[\W]/g,'')"/> \W匹配字母或數(shù)字或下劃線或漢字,\D表示匹配數(shù)字
只能輸入數(shù)字和x(用于身份證號的輸入) ：
復(fù)制代碼 代碼如下:
<input type="text" onKeyUp="value=value.replace(/[^\d|x]/g,'')" /> |后面的就是可以排除的非數(shù)字，可是一個范圍x-z
只能輸入數(shù)字
復(fù)制代碼 代碼如下:
<input type="text" onKeyUp="value=value.replace(/[^\d]/g,'')" /> \D表示匹配數(shù)字，中文輸入法輸入時，存在后續(xù)表格不能輸入中文問題
<input type="text" onKeypress="if(event.keyCode < 45 || event.keyCode >57) event.returnValue = false;"> 不能輸入字母,但能輸入/.-等
<INPUT TYPE="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" onpaste="return false"> 不能輸入數(shù)字,不允許粘貼
<input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能輸入數(shù)字');this.value='';}">
<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value)) execCommand('undo')"> 但可以輸入空格，解決中文輸入法問題
只能輸入字母和漢字(還有一些非數(shù)字字符)
復(fù)制代碼 代碼如下:
<input onkeyup="value=value.replace(/[\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))">
小數(shù)點后只能有最多兩位(數(shù)字,中文都可輸入),不能輸入字母和運算符號
復(fù)制代碼 代碼如下:
<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">
3,限制紙條內(nèi)容的長度
在簽寫許愿內(nèi)容時，通常需要限制用戶輸入文本的長度。在字符串長度的計算上，漢字是占兩個字符(漢字的寬度以及存儲所占的位置決定了一個漢字占兩個字符)，而英文字母和數(shù)字都被識別為一個字符。在PHP中獲取字符串長度應(yīng)用strlen()函數(shù)實現(xiàn)。但是在本模塊中，為了能夠?qū)崿F(xiàn)統(tǒng)計許愿內(nèi)容所允許輸入的剩余字符數(shù)，這里就要重新輸寫計算中英文數(shù)字混合字符串長度的函數(shù)。在簽寫許愿內(nèi)容時，實時限制字符數(shù)。
添加一個文本框，用來控制輸入祝福紙條內(nèi)容剩余的字節(jié)數(shù)。
復(fù)制代碼 代碼如下:
<INPUT style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" readOnly maxLength=3 size=3 value=150 name=freeLength>
在上面的代碼中，應(yīng)用“freeLength”來實時輸出祝福紙條內(nèi)容所剩余的字符數(shù)。
添加一個編輯框用來輸入祝福紙條的內(nèi)容，添加onkeydown和onkeyup事件來觸發(fā)javascript腳本自定義的函數(shù)textCounter(),用來限制該編輯輸入的字符數(shù)，最多輸入150個字符，如果許愿內(nèi)容大于150，則自動刪除，僅保留最大容量值。
復(fù)制代碼 代碼如下:
<textarea name="content" id="content" cols="66" rows="6"
onkeydown="textCounter(this.form.content,this.form.freeLength,150)"
onkeyup="textCounter(this.form.content,this.form.freeLength,150)"
onafterpaste="textCounter(this.form.content,this.form.freeLength,150)">
</textarea>
在上面的代碼中，textCounter()函數(shù)有3個參數(shù)值，第一個參數(shù)值“this.form.content”是指輸入的許愿內(nèi)容；第二個參數(shù)值“this.form.freeLength”是指允許輸入的許愿內(nèi)容字符數(shù)；第三個參數(shù)“150”是輸入許愿內(nèi)容的最大容量值。
應(yīng)用javascript腳本自定義一個函數(shù)textCounter()，控制祝福內(nèi)容不能超過150個字符，這里需要注意的是，中英文所占的字節(jié)數(shù)不同。
DBCS是亞洲的字符集，包含ANSI(ANSI即ASCII碼值為0~255之間的字符)。DBCS使用1個或者2個字節(jié)來表示一個字符集，超過256個字符則占用兩個字節(jié)。當(dāng)字符為ANSI時，存放于文件中只占用1個字節(jié)。如果非ANSI(大于256個字符)，則占用兩個字節(jié)。因此，這里就用三目運算符來分別計算英文數(shù)字和漢字所占用的字節(jié)數(shù)。當(dāng)變量StrValue.charCodeAt(i)小于等于256時，按1個字節(jié)計算；大于256時按2個字節(jié)計算。
復(fù)制代碼 代碼如下:
function textCounter(field, countfield, maxlimit) { //祝福內(nèi)容限制在120個字符內(nèi)
var StrValue = field.value;
var ByteCount = 0;
var StrLength = field.value.length;
for (i=0;i<StrLength;i++){ //記算祝福文字個數(shù)，英文數(shù)字占1個字符，漢字占2個字
ByteCount = (StrValue.charCodeAt(i)<=256) ? ByteCount + 1 : ByteCount + 2;
}
if(ByteCount<=maxlimit){
strtemp=StrValue;
document.getElementById('ContentSample').innerHTML = StrValue;
countfield.value = maxlimit - ByteCount;
}else{
document.getElementById('content').innerHTML = strtemp;
}
}
該函數(shù)只能限制顯示部分150字節(jié)，但是輸入框沒有現(xiàn)在，而且粘貼超過150字節(jié)時，顯示為空白。修改代碼如下：
復(fù)制代碼 代碼如下:
function textCounter(field, countfield, maxlimit) { //祝福內(nèi)容限制在150個字符內(nèi)
var StrValue = field.value;
var ByteCount = 0;
var StrLength = field.value.length;
var cutstr = '';
for (i=0;i<StrLength;i++){
ByteCount = (StrValue.charCodeAt(i)<=256) ? ByteCount + 1 : ByteCount + 2; //記算祝福文字個數(shù)，英文數(shù)字占1個字符，漢字占2個字
if( ByteCount<=maxlimit){
cutstr = StrValue.substring(0,i+1); //如果輸入字符小于限制長度，截取當(dāng)前輸入字符i+1為輸入字符個數(shù)
strtemp = cutstr;
} else {
cutstr=strtemp; //否則截取最大輸入字符長度
}
}
if(ByteCount<=maxlimit){
document.getElementById('ContentSample').innerHTML = cutstr; //輸出顯示內(nèi)容
countfield.value = maxlimit - ByteCount;
}else{
document.getElementById('content').value = cutstr; //限制輸入框顯示內(nèi)容
document.getElementById('ContentSample').innerHTML = cutstr; //輸出顯示內(nèi)容
countfield.value =0; //剩余字節(jié)數(shù)
}
}
在上面的代碼中，“countfield.value”是用來計算輸入字符串剩余的字符數(shù)，并將該值賦給textCounter()函數(shù)的第2個參數(shù)值“this.form.freeLength”，以此來實時計算當(dāng)前許愿內(nèi)容所允許輸入的字符數(shù)量。
4,PHP驗證碼類當(dāng)前頁面校驗驗證碼輸入對與錯
當(dāng)前頁面驗證輸入是否正確的方法Ajax，add.js
復(fù)制代碼 代碼如下:
function codecheck(){
var getVcode = document.getElementById('checkcode').value; //獲取驗證碼輸入框的內(nèi)容
xmlhttp.open("get","codeChk.php?code="+getVcode,true); //將驗證碼發(fā)送到codeChk.php頁面檢驗驗證碼是否正確
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{
var msg=xmlhttp.responseText;
if(msg==1){
document.getElementById("messageImg").src="images/dui.gif"; //驗證碼正確，輸出顯示正確圖片
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驗證碼檢驗頁面
復(fù)制代碼 代碼如下:
<?php
session_start();
require 'secoder.class.php'; //先把類包含進來，實際路徑根據(jù)實際情況進行修改。
$vcode = new YL_Security_Secoder(); //實例化一個對象
$code = $_GET['code'];
echo $vcode->check($code); //check($code)函數(shù)返回的是true或者false，返回true時，codeChk.php頁面輸出的是1，否則沒有輸出
?>
secoder.class.php驗證碼類中的check($code)函數(shù)
復(fù)制代碼 代碼如下:
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']) { //不區(qū)分大小寫比較
return true;
}
return false;
}
5,定義生成指定范圍的許愿條隨機算法
本模塊需要生成一個指定范圍的隨機算法，用來顯示許愿字條的顯示位置，以使每次展示在讀者眼前的都是不同的許愿字條。本模塊主要應(yīng)用rand()函數(shù)控制許愿墻紙的顯示位置。
rand()函數(shù)用于產(chǎn)生一個隨機整數(shù)
語法：rand(min,max)
參數(shù)：min,max可選，規(guī)定隨機數(shù)產(chǎn)生的范圍
如果沒有提供可選參數(shù) min 和 max，rand() 返回 0 到 RAND_MAX 之間的偽隨機整數(shù)。在某些平臺下（例如 Windows）RAND_MAX 只有 32768。如果需要的范圍大于 32768，那么指定 min 和 max 參數(shù)就可以生成大于 RAND_MAX 的數(shù)了，或者考慮用 mt_rand() 來替代它。
mt_rand() 使用 Mersenne Twister 算法返回隨機整數(shù)
語法：mt_rand(min,max)
如果沒有提供可選參數(shù) min 和 max，mt_rand() 返回 0 到 RAND_MAX 之間的偽隨機數(shù)。很多老的libc的隨機數(shù)發(fā)生器具有一些不確定和未知的特性而且很慢。php的rand()函數(shù)默認使用libc隨機數(shù)發(fā)生器。mt_rand()函數(shù)是非正式用來替換它的。該函數(shù)用了Mersenne Twister中已知的特性作為隨機數(shù)發(fā)生器，它可以產(chǎn)生隨機數(shù)值的平均速度比libc提供的rand()快四倍。
隨機顯示許愿墻紙的關(guān)鍵代碼如下：
復(fù)制代碼 代碼如下:
$T=rand(320,520);
$L=rand(5,790);
$Z=$page_count;
$Z = $Z - 3;
echo "
<DIV class='".$pagecolor."'style='left:".$L."px;top:".$T."px;z-index:".$Z.";' id='".$id."' onmousedown='Move(this,event)' ondblclick=Show(".$id.",'shadeDiv')>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=shead>
<span class='Num' >愛墻編號:".$id." ".$sendtime." <a onclick='myClose(".$id.")'>×</span>
</DIV>
</TD>
</TR>
<TR>
<TD>
<DIV class=sbody><img src='".$face."' id='IconImg' style='float:left'>
<span id='PickerSample'>".$Picker."</span><br> <span id='ContentSample'>$content</span>
</DIV>
<DIV class=sbody >
<H2><span id='authorSample'>".$author."</span></H2>
</DIV>
<DIV class=sbot align='right'>
<br><a href='#' onclick='holdout(".$id.",".$hits.")''>[祝福你]</a> 福氣:<span id='fq_id".$id."'>".$hits."</span> <span id='QQSample'>QQ：<a title='單擊與他/她交談' target='_blank'>".$QQ."</a></span>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>";
6,解析IP獲取用戶所在城市
在PHP中，使用PHP預(yù)定義變量$_SERVER['REMOTE_ADDR']獲取客戶端的IP地址。然后將IP按照通用的算法將其解析成一個數(shù)字串(每個城市都有一個對應(yīng)的數(shù)字串)，通過這個數(shù)字串來確定查詢用戶所在的城市名稱。
在數(shù)據(jù)庫中，IP區(qū)域的存儲時一個數(shù)字串，并非實際的IP地址，這時就需要對客戶端或服務(wù)器端的IP轉(zhuǎn)換成指定數(shù)字串的格式，從而進行地域信息的查詢。
復(fù)制代碼 代碼如下:
$ip=getenv('REMOTE_ADDR'); //獲取客戶端IP地址
/********解釋IP區(qū)域***********/
$cip=cip($ip);
$csql="select * from tb_ip where (ip1<'".$cip."' and ip2>'".$cip."') or (ip1=ip2 and ip2='".$cip."')";
//執(zhí)行查詢
$res = $DB->fetch_one_array($csql);
$cip1=$res['country'];
if($cip1==""){
$cip1="IP不詳";
}
二,實現(xiàn)過程
1，雙擊許愿字條，該字條置頂顯示，并屏蔽整個頁面
當(dāng)用戶雙擊許愿字條后，該許愿字條將置頂顯示，同時屏蔽整個頁面，以達到突出顯示的效果。
(1)控制DIV突顯效果，首頁設(shè)置一個隱藏的DIV，ID名稱為“shadeDiv”，代碼如下
<div style="display:none;" id="shadeDiv" onclick="Hide();"></div>
(2)應(yīng)用Javascript腳本自定義一個Hide()函數(shù)，通過設(shè)置DIV的顯示屬性display設(shè)置為空，從而隱藏DIV，代碼如下：
復(fù)制代碼 代碼如下:
function Hide(){
document.getElementById("shadeDiv").style.display = "none";
iLayerMaxNum = iLayerMaxNum+2;
}
(3)在CSS樣式表中設(shè)置隱藏DIV的樣式。代碼如下：
#shadeDiv{filter:alpha(Opacity=55);opacity:0.35;background: #333;position:absolute;} //IE瀏覽器下濾鏡效果，兼容性不好
(4)接下來，雙擊已經(jīng)設(shè)計好的許愿字條DIV圖層，代碼如下：
ondblclick=Show(".$id.",'shadeDiv')
(5)自定義一個函數(shù)show()，用來控制背景的效果。
復(fù)制代碼 代碼如下:
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(); //設(shè)置隱藏區(qū)域的面積，這里是獲取許愿墻顯示區(qū)域的面積，即本例中設(shè)置濾鏡的面積
document.getElementById(divName).style.width = size[0]+"px";
document.getElementById(divName).style.height = size[1]+"px";
}
(6)設(shè)置紙條顯示的區(qū)域,這里得到的僅僅是數(shù)字
復(fù)制代碼 代碼如下:
function getPageSize(){
var w =document.body.clientWidth;
var h= document.body.clientHeight;
arrayPageSize = new Array(w,h);
return arrayPageSize;
}
2,應(yīng)用Jpgraph圖形類庫實現(xiàn)3D餅形圖表按地域統(tǒng)計分析許愿比率,實現(xiàn)過程如下：
(1)應(yīng)用浮動框架技術(shù)實現(xiàn)不同類別下的地域統(tǒng)計分析結(jié)果，每一個黃顏色的版塊分別是一個浮動框架.浮動框架布局的代碼如下：
復(fù)制代碼 代碼如下:
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”全部“許愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_all.php" style="HEIGHT:290px;VISIBILITY:inherit;WIDTH:1004px;Z-INDEX:3">
</IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”親情類“許愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_relative.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
</IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”愛情類“許愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_love.php" style="HEIGHT:90px;VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX: 3">
</IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”友情類“許愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_friend.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
</IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”自己類“許愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_self.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
</IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”奧運會類“許愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_olympic.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
</IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”汶川類“許愿的比率---------------------------->
<div align="center">
<IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_wch.php" style="VISIBILITY:inherit;WIDTH:330px;height:260px;Z-INDEX:3">
</IFRAME>
</div>
(2)應(yīng)用3D餅形圖動態(tài)統(tǒng)計分析全部區(qū)域的許愿比率
首先應(yīng)用Jpgraph類庫實現(xiàn)圖表分析，需要應(yīng)用include語句引用jpgraph.php文件。代碼如下：
復(fù)制代碼 代碼如下:
<?php
include("global.php"); //鏈接數(shù)據(jù)庫源文件
include("jpgraph/jpgraph.php"); //引用圖表分析類文件
?>
繪制餅形圖需要引用jpgraph_pie.php文件。繪制3D效果的餅形圖需要創(chuàng)建PiePlot3D類對象，PiePlot3D類在Jpgraph_pie3d.php中定義，需要應(yīng)用include語句調(diào)用該文件。代碼如下：
復(fù)制代碼 代碼如下:
<?php
include("jpgraph/jpgraph_pie.php"); //引用餅形圖類文件
include_once("jpgraph/jpgraph_pie3d.php"); //引用3D餅圖PiePlot3D對象所在的類文件
?>
創(chuàng)建graph對象，生成一個990x276像素大小的畫布，設(shè)置統(tǒng)計圖所在畫布的位置以及畫布的陰影。設(shè)置標題的字體以及圖例的字體。設(shè)置餅形圖所在畫布的位置以及半徑，將繪制的3D餅形圖添加到圖像中。
復(fù)制代碼 代碼如下:
<?php
$graph = new PieGraph(990,276); //創(chuàng)建畫布
$graph->SetShadow(); //設(shè)置陰影
$graph->title->Set("應(yīng)用3D餅形圖統(tǒng)計分析全部區(qū)域許愿比率"); //設(shè)置標題名稱
$graph->title->SetFont(FF_SIMSUN,FS_BOLD); //設(shè)置標題的字體加粗
$graph->legend->SetFont(FF_SIMSUN,FS_NORMAL); //設(shè)置餅形圖文字的字體
$size=0.5; //設(shè)置餅形圖的半徑
/***********************統(tǒng)計全部許愿比率*************************/
//創(chuàng)建餅形圖對象
$p0= new PiePlot3D($arraynum0); //創(chuàng)建餅形圖對象
$p0->SetLegends($arraycip0);
$p0->SetSize($size); //設(shè)置餅形圖的大小
$p0->SetCenter(0.45,0.48); //設(shè)置餅形圖的坐標位置
$p0->SetLegends($arraycip0); //設(shè)置城市名稱
$p0->value->SetFont(FF_FONT0); //設(shè)置字體
$p0->title->SetFont(FF_SIMSUN,FS_BOLD); //設(shè)置標題字體加粗
/*************************************************************/
$graph->Add($p0); //添加3D餅形圖到圖像中
$graph->Stroke(); //輸出圖像
?>
(3)應(yīng)用3D餅形圖動態(tài)統(tǒng)計分析”親情類“的許愿比率。其實現(xiàn)方法與獲取全部的許愿比率的方法基本類似，不同的是這里在檢索親情類許愿人數(shù)時設(shè)置了where查詢條件。另外在設(shè)置餅形圖的半徑和位置上稍微有變化。
復(fù)制代碼 代碼如下:
<?php
include("global.php"); //鏈接數(shù)據(jù)庫文件
include ("jpgraph/jpgraph.php"); //引用圖表分析類文件
include ("jpgraph/jpgraph_pie.php"); //引用餅形圖類文件
include_once ("jpgraph/jpgraph_pie3d.php"); //引用3D餅圖PiePlot3D對象所在的類文件
/***********************統(tǒng)計親情類別*************************/
$sql2="select distinct(count(cip)) as num,cip from tb_wishes where wishsort='親情' group by cip ";
$DB->query($sql2); //動態(tài)統(tǒng)計親情類許愿
$res2=$DB->get_rows_array($sql2); //生成二維數(shù)組
$rows_count2=count($res2); //統(tǒng)計二維數(shù)組的數(shù)量
$arraynum2=array(); //聲明城市”親情類“許愿總數(shù)數(shù)組
$arraycip2=array(); //聲明”親情類“城市名稱數(shù)組
//解析數(shù)組
for($k=0;$k<$rows_count2;$k++){
array_push($arraynum2,$res2[$k][num]); //輸出城市的許愿數(shù)量
array_push($arraycip2,$res2[$k][cip]); //輸出城市名稱
}
/*************************************************************/
//創(chuàng)建畫布
$graph = new PieGraph(320,246); //創(chuàng)建畫布
$graph->SetShadow(); //設(shè)置陰影
$graph->title->Set("統(tǒng)計分析全部區(qū)域的[ 親情類 ] 許愿比率"); //設(shè)置標題名稱
$graph->title->SetFont(FF_SIMSUN,FS_BOLD); //設(shè)置標題的字體加粗
$graph->legend->SetFont(FF_SIMSUN,FS_NORMAL); //設(shè)置餅形圖文字的字體
$size=0.3; //設(shè)置餅形圖的半徑
/***********************統(tǒng)計親情許愿比率*************************/
$p= new PiePlot3D($arraynum2); //創(chuàng)建餅形圖對象
$p->SetLegends($arraycip2); //設(shè)置城市名稱
$p->SetSize($size); //設(shè)置餅形圖的大小
$p->SetCenter(0.45,0.55); //設(shè)置餅形圖的坐標位置
$p->value->SetFont(FF_FONT0); //設(shè)置字體
$p->title->SetFont(FF_SIMSUN,FS_BOLD); //設(shè)置標題字體加粗
/*************************************************************/
$graph->Add($p); //添加3D餅形圖到圖像中
$graph->Stroke(); //輸出圖像
?>
3,許愿墻列表,許愿墻字條高級搜索功能的實現(xiàn)
為了便于訪客能更清晰地查看各種不同類別的許愿字條，本模塊設(shè)計了愛墻列表和許愿字條高級搜索功能。其中，愛墻列表時在默認狀態(tài)下檢索全部的許愿字條，而高級搜索功能是按照訪客設(shè)置的一定的查詢條件來檢索與之匹配的許愿字條。
設(shè)計愛墻列表及許愿字條高級搜索的表單元素如下：
復(fù)制代碼 代碼如下:
<table width="1004" height="25" border="0" cellpadding="0" cellspacing="0">
<form name="form" method="get" action="">
<tr>
<td align="center" bgcolor="#339933">請輸入查詢條件：
<input type="text" name="content1" size="30" class="inputs">
<select name="select">
<option value="奧運會">奧運會</option>
<option value="汶川">汶川</option>
<option value="愛情">愛情</option>
<option value="親情">親情</option>
<option value="友情">友情</option>
<option value="自己">自己</option>
<option value="全部" selected="selected">全部</option>
</select>
<input type="submit" name="submit" value="檢索許愿" class="btn_search">
(支持多條件查詢，如：愛墻號、許愿人、許愿內(nèi)容等)
</td>
</tr>
</form>
</table>
4,許愿墻顯示效果如圖：
相關(guān)文章
下面小編就為大家?guī)硪黄猵hp獲取linux命令結(jié)果的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
phpmyadmin顯示utf8_general_ci中文亂碼的問題終級篇
自己寫PHP也有一年多了,然后編碼問題卻老是沒有得到好的解決,自己的情況是這樣的,網(wǎng)頁顯示完全正常,在phpmyadmin數(shù)據(jù)庫顯示中文亂碼,不管是簡體還是繁體,只要是中文都是亂碼2013-04-04
深入掌握include_once與require_once的區(qū)別
要深入掌握include(_once)與require(_once)，需要掌握以下幾點內(nèi)容，不過有人建議不建議使用2013-06-06
這篇文章主要為大家介紹了php多版本管理工具phpbrew使用教程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
MySQL授權(quán)問題總結(jié)...2007-05-05
解析PHP中的內(nèi)存管理,PHP動態(tài)分配和釋放內(nèi)存
本篇文章是對PHP中的內(nèi)存管理,PHP動態(tài)分配和釋放內(nèi)存進行了詳細的分析介紹，需要的朋友參考下2013-06-06
這篇文章主要幫助大家理解php依賴注入和控制反轉(zhuǎn)，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了php實現(xiàn)的一段簡單概率相關(guān)代碼,通過數(shù)字的運算分析概率統(tǒng)計的原理與使用技巧,需要的朋友可以參考下2016-05-05
PHP與HTML中實現(xiàn)緩存可以幫助提高網(wǎng)頁加載速度和減輕服務(wù)器負載,本文主要為大家詳細介紹了一些常見的PHP與HTML緩存實現(xiàn)方法,需要的小伙伴可以參考下2023-12-12
這篇文章主要給大家介紹了關(guān)于PHP如何利用一行代碼刪除目錄下所有文件的相關(guān)資料，文中先對glob函數(shù)進行了一個簡單的介紹，而后通過示例代碼將刪除的方法介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2018-01-01