许愿墙模块功能分析
一，热点技术
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 "
复制代码 代码如下:
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; //设置左边框
c=event.y-document.getElementById(Layer).style.pixelTop; //设置右边框
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
b=event.layerX; //返回时间对象相对于本体的横坐标
c=event.layerY; //返回时间对象相对于本体的纵坐标
}
/**实现鼠标单击字条时，字条置上**/
document.getElementById(Layer).style.zIndex=iLayerMaxNum;
iLayerMaxNum=iLayerMaxNum+1;
/********************************/
}
复制代码 代码如下:
if(document.all){
alert("is IE!");
}
复制代码 代码如下:
复制代码 代码如下:
function moveStart(d){
if(Layer!=''){ //如果图层不为空
if(document.all){
document.getElementById(Layer).style.left=event.x-b; //设置左边距
document.getElementById(Layer).style.top=event.y-c; //设置右边距
}else if(window.captureEvents){
document.getElementById(Layer).style.left=(d.clientX-b)+"px";
document.getElementById(Layer).style.top=(d.clientY-c)+"px";
}
}
}
复制代码 代码如下:
function moveEnd(d){
if(Layer!=''){ //如果layer图层不为空
if(document.all){
document.getElementById(Layer).releaseCapture();
Layer=''; //将layer图层设为空
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
Layer=''; //将layer图层设为空
}
}
}
复制代码 代码如下:
onKeyUp="setQQ();if(/(^0+)/.test(value))value=value.replace(/^0*/, '')"
onKeyDown="setQQ();" //键盘按下时触发，比如按着1不放时，该函数生效
onKeyPress="return event.keyCode>=48 && event.keyCode onpaste="var s=clipboardData.getData('text'); if(!/\D/.test(s))value=s.replace(/^0*/,'');
return false;"
/>
复制代码 代码如下:
function checkForm(){ //祝福内容
if(isNaN(document.getElementById('QQ').value)){
alert('您输入的QQ号不是数值型，请重新输入!');
document.getElementById('QQ').focus();
return false;
}
}
复制代码 代码如下:
复制代码 代码如下:
\W匹配字母或数字或下划线或汉字,\D表示匹配数字
复制代码 代码如下:
|后面的就是可以排除的非数字，可是一个范围x-z
复制代码 代码如下:
\D表示匹配数字，中文输入法输入时，存在后续表格不能输入中文问题
不能输入字母,但能输入/.-等
不能输入数字,不允许粘贴
但可以输入空格，解决中文输入法问题
复制代码 代码如下:
复制代码 代码如下:
复制代码 代码如下:
复制代码 代码如下:
复制代码 代码如下:
function textCounter(field, countfield, maxlimit) { //祝福内容限制在120个字符内
var StrValue = field.value;
var ByteCount = 0;
var StrLength = field.value.length;
for (i=0;i
if(ByteCount strtemp=StrValue;
document.getElementById('ContentSample').innerHTML = StrValue;
countfield.value = maxlimit - ByteCount;
}else{
document.getElementById('content').innerHTML = strtemp;
}
}
复制代码 代码如下:
function textCounter(field, countfield, maxlimit) { //祝福内容限制在150个字符内
var StrValue = field.value;
var ByteCount = 0;
var StrLength = field.value.length;
var cutstr = '';
for (i=0;i
strtemp = cutstr;
} else {
cutstr=strtemp; //否则截取最大输入字符长度
}
}
if(ByteCount document.getElementById('ContentSample').innerHTML = cutstr; //输出显示内容
countfield.value = maxlimit - ByteCount;
}else{
document.getElementById('content').value = cutstr; //限制输入框显示内容
document.getElementById('ContentSample').innerHTML = cutstr; //输出显示内容
countfield.value =0; //剩余字节数
}
}
复制代码 代码如下:
function codecheck(){
var getVcode = document.getElementById('checkcode').value; //获取验证码输入框的内容
xmlhttp.open("get","codeChk.php?code="+getVcode,true); //将验证码发送到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);
}
复制代码 代码如下:
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，否则没有输出
?>
复制代码 代码如下:
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;
}
复制代码 代码如下:
$T=rand(320,520);
$L=rand(5,790);
$Z=$page_count;
$Z = $Z - 3;
echo "
复制代码 代码如下:
$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不详";
}
复制代码 代码如下:
function Hide(){
document.getElementById("shadeDiv").style.display = "none";
iLayerMaxNum = iLayerMaxNum+2;
}
复制代码 代码如下:
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";
}
复制代码 代码如下:
function getPageSize(){
var w =document.body.clientWidth;
var h= document.body.clientHeight;
arrayPageSize = new Array(w,h);
return arrayPageSize;
}
复制代码 代码如下:
复制代码 代码如下:
include("global.php"); //链接数据库源文件
include("jpgraph/jpgraph.php"); //引用图表分析类文件
?>
复制代码 代码如下:
include("jpgraph/jpgraph_pie.php"); //引用饼形图类文件
include_once("jpgraph/jpgraph_pie3d.php"); //引用3D饼图PiePlot3D对象所在的类文件
?>
复制代码 代码如下:
$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(); //输出图像
?>
复制代码 代码如下:
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(); //输出图像
?>
复制代码 代码如下:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
