溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用PHP怎么實現(xiàn)一個許愿墻模塊功能

發(fā)布時間：2021-01-16 10:03:09 來源：億速云 閱讀：292 作者：Leah 欄目：開發(fā)技術(shù)

這篇文章將為大家詳細講解有關(guān)使用PHP怎么實現(xiàn)一個許愿墻模塊功能，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guā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ā)人員在樹中導航尋找特定信息。分析該結(jié)構(gòu)通常需要加載整個文檔的構(gòu)造層次結(jié)構(gòu)，然后才能做任何工作。由于它基于信息層次，因此DOM被認為基于樹或基于對象。
具體實現(xiàn)時以下時間會被觸發(fā)：
(1)moveStart
(2)Move
(3)moveEnd
當按下鼠標左鍵，開始移動鼠標時，在被拖動的許愿條上就會觸發(fā)moveStart事件。用戶可以使用moveStart事件處理函數(shù)在拖動開始時允許javaScript代碼。當moveStart事件被觸發(fā)后，Move時間會一直觸發(fā)，只要對象還在被拖動，就一直觸發(fā)。當拖動停止時，則觸發(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>
       &nbsp;&nbsp;<span class='Num' >愛墻編號:".$id."&nbsp;&nbsp;&nbsp;".$sendtime."&nbsp;<a onclick='myClose(".$id.")'>×</span>
      </DIV>
     </TD>
    </TR>
    <TR>
     <TD>
       <DIV class=sbody><img src='".$face."' id='IconImg' style='float:left'>
       &nbsp;<span id='PickerSample'>".$Picker."</span><br>&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;福氣:<span id='fq_id".$id."'>".$hits."</span> <span id='QQSample'>QQ：<a href='http://wpa.qq.com/msgrd?uin=".$QQ."&Site=1&Menu=yes' title='單擊與他/她交談' target='_blank'>".$QQ."</a></span>
      </DIV>
     </TD>
    </TR>
   </TBODY>
  </TABLE>
 </DIV>";


當按下鼠標左鍵時，應(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>


當鼠標移動時，觸發(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的問題。
當鼠標抬起時，觸發(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 > </SPAN>onKeyUp="setQQ();if(/(^0+)/.test(value))value=value.replace(/^0*/, '')" 
<SPAN > </SPAN>onKeyDown="setQQ();"    //鍵盤按下時觸發(fā)，比如按著1不放時，該函數(shù)生效
<SPAN > </SPAN>onKeyPress="return event.keyCode>=48 && event.keyCode<=57;" size="16" maxlength="10"
<SPAN > </SPAN>onpaste="var s=clipboardData.getData('text'); if(!/\D/.test(s))value=s.replace(/^0*/,'');
<SPAN > </SPAN>return false;"
/>


上面代碼中，分別應(yīng)用3個事件來控制QQ號輸入的值。
onKeyUp事件：事件會在鍵盤按鍵被松開時發(fā)生。如果是數(shù)字則可以添加到QQ號文本框中。
onKeyPress事件：事件會在鍵盤按鍵被按下并釋放一個鍵時發(fā)生。只允許用戶輸入0~9之間的數(shù)字。
onpaste事件：當用戶粘貼數(shù)據(jù)以便從系統(tǒng)剪切板向文檔傳送數(shù)據(jù)時在目標對象上觸發(fā)。當用戶向QQ號文本框中粘貼字符串時，只允許用戶粘貼數(shù)字串。
另外，應(yīng)用isNaN()方法來驗證輸入的QQ號是否是數(shù)值型。
isNaN(num Value);
numvalue：是必選項，用來檢查是否為NaN的值。
當提交簽字許愿字條時，將觸發(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”表示用后面的''中的字符(當前為空)全局替換。
此句代碼的含義為：在文本框中只能輸入大寫或小寫字母，如果不是，則自動刪除。
常用輸入限制代碼：
只能輸入英文字母：

復(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  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é)。當字符為ANSI時，存放于文件中只占用1個字節(jié)。如果非ANSI(大于256個字符)，則占用兩個字節(jié)。因此，這里就用三目運算符來分別計算英文數(shù)字和漢字所占用的字節(jié)數(shù)。當變量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); //如果輸入字符小于限制長度，截取當前輸入字符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”，以此來實時計算當前許愿內(nèi)容所允許輸入的字符數(shù)量。

4,PHP驗證碼類當前頁面校驗驗證碼輸入對與錯
當前頁面驗證輸入是否正確的方法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>
       &nbsp;&nbsp;<span class='Num' >愛墻編號:".$id."&nbsp;&nbsp;&nbsp;".$sendtime."&nbsp;<a onclick='myClose(".$id.")'>×</span>
      </DIV>
     </TD>
    </TR>
    <TR>
     <TD>
       <DIV class=sbody><img src='".$face."' id='IconImg' style='float:left'>
       &nbsp;<span id='PickerSample'>".$Picker."</span><br>&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;福氣:<span id='fq_id".$id."'>".$hits."</span> <span id='QQSample'>QQ：<a href='http://wpa.qq.com/msgrd?uin=".$QQ."&Site=1&Menu=yes' 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，雙擊許愿字條，該字條置頂顯示，并屏蔽整個頁面
當用戶雙擊許愿字條后，該許愿字條將置頂顯示，同時屏蔽整個頁面，以達到突出顯示的效果。
(1)控制DIV突顯效果，首頁設(shè)置一個隱藏的DIV，ID名稱為“shadeDiv”，代碼如下
<div  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" >
    </IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”親情類“許愿的比率---------------------------->
<div align="center">
 <IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_relative.php" >
    </IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”愛情類“許愿的比率----------------------------> 
<div align="center">
 <IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_love.php"    >
    </IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”友情類“許愿的比率---------------------------->
<div align="center">
 <IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_friend.php" >
 </IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”自己類“許愿的比率---------------------------->
<div align="center">
 <IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_self.php" >
 </IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”奧運會類“許愿的比率---------------------------->
<div align="center">
 <IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_olympic.php" >
 </IFRAME>
</div>
<!----------------------------應(yīng)用3D餅形圖按地域統(tǒng)計分析”汶川類“許愿的比率---------------------------->
<div align="center">
 <IFRAME frameBorder=0 id=top name=top scrolling=no src="statistic_wch.php" >
 </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">&nbsp;
    <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">
    &nbsp;(支持多條件查詢，如：愛墻號、許愿人、許愿內(nèi)容等)&nbsp;
   </td>
       </tr>
    </form>
</table>

關(guān)于使用PHP怎么實現(xiàn)一個許愿墻模塊功能就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

php
AI
助
手