>

美洲杯在线投注_2019美洲杯外围投注[投注官网]

热门关键词: 美洲杯在线投注,2019美洲杯外围投注[投注官网]

ecshop搜索出现相关商品的效果滑动下拉效果

- 编辑:美洲杯在线投注 -

ecshop搜索出现相关商品的效果滑动下拉效果

复制代码 代码如下:

  1. <input name="keywords" onkeyup="showAndHide('List1','show',this.value);" onblur="showAndHide('List1','hide');" type="text" id="keyword" value="{$search_keywords|escape}" style=" border:0; margin-left:15px;margin-top:5px; width:130px; height:15px;"/>
  2. <div class="Menu" id="List1">
  3. <div class="Menu2">
  4. <ul style="padding:0px; margin:0px;" id="show_stock">
  5. </ul>
  6. </div>
  7. </div>

复制代码 代码如下:

在商品少的情况下 我们之间查询 如果多了,最模板建议修改程序

只能输入英文和数字:

我们输入框的代码

(6)设置纸条显示的区域,这里得到的仅仅是数字

 

$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 href='http://wpa.qq.com/msgrd?uin=".$QQ."&Site=1&Menu=yes' title='单击与他/她交谈' target='_blank'>".$QQ."</a></span>
      </DIV>
     </TD>
    </TR>
   </TBODY>
  </TABLE>
 </DIV>";

  1.  
  2. <script type="text/javascript">
  3.   function showAndHide(obj,types,text){
  4.     var Layer=window.document.getElementById(obj);
  5.     switch(types){
  6.    case "show":
  7.      if(text!='')
  8.   {
  9.              Layer.style.display="block";
  10.     Ajax.call('search_div.php', 'act=search&text=' text, changesumResp**e, 'GET', 'JSON'); 
  11.   }
  12.    break;
  13.    case "hide":
  14.      Layer.style.display="none";
  15. }
  16.   }
  17.   function getValue(obj,str){
  18.     var input=window.document.getElementById(obj);
  19. input.value=str;
  20.   }
  21.  
  22. function changesumResp**e(res)
  23. {
  24.     var a='';
  25.       for (var i = 0; i < res.content.length; i )
  26.       {
  27.         a = "<li onmousedown=getValue('keyword','" res.content[i].goods_name "')>" res.content[i].goods_name "</li>";
  28.    }
  29.   // alert(a);
  30.    document.getElementById('show_stock').innerHTML = a;
  31.   
  32. </script>

<?php
 include("jpgraph/jpgraph_pie.php");  //引用饼形图类文件
 include_once("jpgraph/jpgraph_pie3d.php");  //引用3D饼图PiePlot3D对象所在的类文件
?>

复制代码

复制代码 代码如下:

  1.  
  2. <?php
  3. define('IN_ECS', true);
  4. require(dirname(__FILE__) . '/includes/init.php');
  5. require(dirname(__FILE__) . '/admin/includes/lib_main.php');
  6. if($_REQUEST['act'] == 'search'){
  7.   $keywords = json_str_iconv(trim($_GET['text']));
  8.   $sql = "SELECT goods_name,goods_id FROM " . $GLOBALS['ecs']->table('goods')." where goods_name like '%$keywords%'";
  9.   $brand_array = $GLOBALS['db']->getall($sql);
  10.   foreach($brand_array as $ids =>$value)
  11.   {
  12.    $brand_array[$ids]['goods_name'] = sub_str_xaphp($brand_array[$ids]['goods_name'],5);
  13.   
  14.   }
  15.   make_json_result($brand_array);
  16. }
  17. function sub_str_xaphp($str, $length = 0, $append = true)
  18. {
  19.     $str = trim($str);
  20.     $strlength = strlen($str);
  21.     if ($length == 0 || $length >= $strlength)
  22.     {
  23.         return $str;
  24.     }
  25.     elseif ($length < 0)
  26.     {
  27.         $length = $strlength $length;
  28.         if ($length < 0)
  29.         {
  30.             $length = $strlength;
  31.         }
  32.     }
  33.     if (function_exists('mb_substr'))
  34.     {
  35.         $newstr = mb_substr($str, 0, $length, EC_CHARSET);
  36.     }
  37.     elseif (function_exists('iconv_substr'))
  38.     {
  39.         $newstr = iconv_substr($str, 0, $length, EC_CHARSET);
  40.     }
  41.     else
  42.     {
  43.         //$newstr = trim_right(substr($str, 0, $length));
  44.         $newstr = substr($str, 0, $length);
  45.     }
  46.     if ($append && $str != $newstr)
  47.     {
  48.         $newstr .= '';
  49.     }
  50.     return $newstr;
  51. }
  52. ?>

复制代码 代码如下:

复制代码

复制代码 代码如下:

以下代码需要加到输入框普遍 比如page_header.lbi

2,对QQ号文本框中禁止非数字字符输入 在动态网站中,为了确保用户输入的文本或数值的有效性,必须对用户输入的数据加以验证,确保数据的准确及安全性。本模块禁止用户向QQ文本框中输入汉字或英文字符。

search_div.php

复制代码 代码如下:

图片 1

(3)应用3D饼形图动态统计分析”亲情类“的许愿比率。其实现方法与获取全部的许愿比率的方法基本类似,不同的是这里在检索亲情类许愿人数时设置了where查询条件。另外在设置饼形图的半径和位置上稍微有变化。

ajax请求php的代码

应用javascript脚本自定义一个函数textCounter(),控制祝福内容不能超过150个字符,这里需要注意的是,中英文所占的字节数不同。

 

2,应用Jpgraph图形类库实现3D饼形图表按地域统计分析许愿比率,实现过程如下: (1)应用浮动框架技术实现不同类别下的地域统计分析结果,每一个黄颜色的版块分别是一个浮动框架.浮动框架布局的代码如下:

ecshop搜索栏效果如下

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";
}

复制代码

常用文本框限制代码:
代码示例:
onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"
说明: replace(/[^a-zA-Z]/g,'')
其中有^为逻辑词“非”,然后后面跟着a-zA-Z指的是英文字母大小写范围,“/g”表示用后面的''中的字符(当前为空)全局替换。
此句代码的含义为:在文本框中只能输入大写或小写字母,如果不是,则自动删除。
常用输入限制代码:
只能输入英文字母:

  1.  
  2. /*搜索滑动效果*/
  3. .Menu {
  4. position:absolute;
  5. top:30px;
  6. left:7px;
  7. width:150px;
  8. height:auto;
  9. z-index:1;
  10. background:#FFF;
  11. border:1px solid #000;
  12. display:none;
  13. }
  14. .Menu2 {
  15. position: absolute;
  16. left:0;
  17. top:0;
  18. width:100%;
  19. height:auto;
  20. overflow:hidden;
  21. z-index:1;
  22. }
  23. .Menu2 ul{margin:0;padding:0}
  24. .Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;
  25.              border-bottom:1px dashed #ccc;color:#666;cursor:pointer;background:#FFF;
  26.     change:expression(
  27.      this.onmouseover=function(){
  28.        this.style.background="#F2F5EF";
  29.      },
  30.      this.onmouseout=function(){
  31.        this.style.background="";
  32.      }
  33.     )
  34.    }
  35. input{width:200px}
  36. .form{width:200px;height:auto;}
  37. .form div{position:relative;top:0;left:0;margin-bottom:5px}

all[]包含的元素保存了最初的顺序,如果你知道他们在数组中的确切数字化位置,可以直接从数组中提取他们。然而,更为常见的是使用all[]数组,根据他们的HTML属性name或id来访问元素。如果元素拥有指定的name,将得到共享同一名称的元素的一个数组。
document.all可以判断浏览器是否是IE

复制代码

复制代码 代码如下:

 所需要的样式我们可以复制到style.css里:

复制代码 代码如下:

(3)在CSS样式表中设置隐藏DIV的样式。代码如下: #shadeDiv{filter:alpha(Opacity=55);opacity:0.35;background: #333;position:absolute;} //IE浏览器下滤镜效果,兼容性不好
(4)接下来,双击已经设计好的许愿字条DIV图层,代码如下: ondblclick=Show(".$id.",'shadeDiv')
(5)自定义一个函数show(),用来控制背景的效果。

复制代码 代码如下:

(2)应用3D饼形图动态统计分析全部区域的许愿比率 首先应用Jpgraph类库实现图表分析,需要应用include语句引用jpgraph.php文件。代码如下:

$ip=getenv('REMOTE_ADDR');   //获取客户端IP地址
/********解释IP区域***********/
$cip=cip($ip);
$csql="select * from tb_ip where (ip1<'".$cip."' and  ip2>'".$cip."') or (ip1=ip2 and ip2='".$cip."')";
//执行查询
$res = $DB->fetch_one_array($csql);
$cip1=$res['country'];
if($cip1==""){
 $cip1="IP不详";
}

 <input type="text" onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')"/>
 <input type="text" onkeyup="value=value.replace(/[W]/g,'')"/>     W匹配字母或数字或下划线或汉字,D表示匹配数字

各浏览器通用属性:
screenX:
鼠标在显示屏幕上的坐标。
clientX:鼠标在页面显示区域的坐标。

特有属性:(
注:IE和FF的定位有个1px的差别,实际上,IE的定位从0开始,FF的定位从1开始,FF永远会比IE大1px,需要根据实际情况处理。)
pageX:FF特有,鼠标在页面上的位置,从页面左上角开始定位,这个可以很方便在整个页面上进行定位,IE没有直接替换的属性。

<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">
     (支持多条件查询,如:爱墙号、许愿人、许愿内容等) 
   </td>
       </tr>
    </form>
</table>

function textCounter(field, countfield, maxlimit) {  //祝福内容限制在150个字符内
  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; //记算祝福文字个数,英文数字占1个字符,汉字占2个字
        if( ByteCount<=maxlimit){
   cutstr = StrValue.substring(0,i 1); //如果输入字符小于限制长度,截取当前输入字符i 1为输入字符个数
   strtemp = cutstr; 
        } else {
   cutstr=strtemp;  //否则截取最大输入字符长度
  }
 }
 if(ByteCount<=maxlimit){
  document.getElementById('ContentSample').innerHTML = cutstr;  //输出显示内容
  countfield.value = maxlimit - ByteCount;
 }else{
  document.getElementById('content').value = cutstr;  //限制输入框显示内容
  document.getElementById('ContentSample').innerHTML = cutstr;  //输出显示内容
  countfield.value =0; //剩余字节数
 }
}

function Hide(){
 document.getElementById("shadeDiv").style.display = "none";
 iLayerMaxNum = iLayerMaxNum 2;
}

<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>

许愿墙模块功能分析
一,热点技术
1,实现可拖放DOM技术移动许愿字条
可拖放DOM模式(Draggable DOM pattern)的宗旨在于允许浏览者自己定义页面中各元素的位置,并且,只需要用鼠标选中要移动的部分,把它拖到新的位置上,就可以定制页面。

function textCounter(field, countfield, maxlimit) {  //祝福内容限制在120个字符内
  var StrValue  = field.value;
   var ByteCount = 0;
 var StrLength = field.value.length;
 for (i=0;i<StrLength;i ){   //记算祝福文字个数,英文数字占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;
 }
}

复制代码 代码如下:

offsetLeft:这个属性不是事件对象的属性,而是DOM对象所有的,该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的,设置了position的父对象”中的位置,虽然话是这么说的,但是不同的浏览器效果不一样,FF中严格按上述说明执行,但是在IE6/7中,这个属性返回该DOM对象在其直接父对象中的位置,但是IE8改正了这个问题,不过IE8又有了一个新问题,其他的浏览器都是从父对象的内容区域的左上角开始定位,IE8确是从父元素的border的左上角开始定位,由于测试环境为IETester中的IE8,不能排除是IETester的问题。
当鼠标抬起时,触发moveEnd()函数,代码如下:

复制代码 代码如下:

<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();"    //键盘按下时触发,比如按着1不放时,该函数生效
<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;"
/>

 <input type="text" onKeyUp="value=value.replace(/[^d|x]/g,'')" />   |后面的就是可以排除的非数字,可是一个范围x-z

只能输入字母和汉字(还有一些非数字字符)

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);
}

 <input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /.dd$/.test(value))event.returnValue=false">

当按下鼠标左键时,应用鼠标时间onmousedown触发Move()函数

 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"/>

只能输入数字和x(用于身份证号的输入) :

codeChk.php验证码检验页面

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

应用DOM方法(document对象的getElementById方法)获取包含许愿字条layer层左边距和上边距的距离。b和c分别表示获取Layer层的横纵坐标。
clientX:检索与窗口客户区域有关的鼠标坐标的x坐标,属性为只读,没有默认值。
clientY:检索与窗口客户区域有关的鼠标光标的y坐标,属性为只读,没有默认值。
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft

复制代码 代码如下:

当鼠标移动时,触发moveStart()函数,代码如下:

<?php
$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(); //输出图像
?>

复制代码 代码如下:

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;
 /********************************/
}

只能输入数字

二,实现过程
1,双击许愿字条,该字条置顶显示,并屏蔽整个页面
当用户双击许愿字条后,该许愿字条将置顶显示,同时屏蔽整个页面,以达到突出显示的效果。
(1)控制DIV突显效果,首页设置一个隐藏的DIV,ID名称为“shadeDiv”,代码如下 <div style="display:none;" id="shadeDiv" onclick="Hide();"></div>
(2)应用Javascript脚本自定义一个Hide()函数,通过设置DIV的显示属性display设置为空,从而隐藏DIV,代码如下:

复制代码 代码如下:

本文由计算机教程发布,转载请注明来源:ecshop搜索出现相关商品的效果滑动下拉效果