仿163填写邮件地址自动显示下拉（无优化）

2024-10-15 04:30:01

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>20060427simulate 163</title>
<script language="JavaScript" type="text/JavaScript">

</script>
<style type="text/css">

</style>
</head>
<script language="javascript">
/*
author：moonboy
本例中采用onKeyUp事件方可将录入的数据取到。在使用onKeyDown,onKeyPress事件时只是在录入第二个数据时才能取到第一个数据（i don't konw why）。
*/
//var ns = String.fromCharCode(event.keyCode);
function droplist(){
var np= event.keyCode;
if(np==38||np==40){
}
var textv = document.getElementById("drop").value; //取得文本框内的值
textv=textv.toLowerCase(); //全部转成小写
var user = new Array();//初始化数组用来存储页面列表值的集合
var sortUser = new Array();//排序后的数组
var resultuser = new Array();//输出到前台的数组
var vv = document.getElementsByName("hv");//页面的值
var vvl= vv.length;//页面值的数组长度
//付值将从页面取到的集合放入user数组
for(var i=0;i<vvl;i++){
user[i]=vv[i].value;
}
sortUser = user.sort();//对数组排序
var rs =new Array();//初始化符合查询条件的数组
var temp;
var c=0;//符合条件的数组计数
for(var j=0;j<vvl;j++){
temp=queryWord(textv,sortUser[j]);//调用queryWord函数，计算出符合条件的值
if(temp==""){
continue;
}else{
//temp=getSelect(textv,temp);
rs[c]="<tr id='tv' name='tv' bgcolor='#eeeeee'><td id='al"+c+"' onclick='onV("+c+")' style='cursor:pointer' onmouseover='alterBg("+c+",0)' onmouseout='alterBg("+c+",1)'>"+getSelect(textv,temp)+"</td></tr>";
c++;
}
}
resultuser=rs.join("");//将书组数据分隔符设为换行符
if(textv.length==0){
resultuser="";
}
document.getElementById("p").innerHTML="<table width='150px' cellpadding='0' bgcolor='#FFFFFF' cellspacing='0'>"+resultuser+"</table>";//将数据打印到指定区域
}
function getSelect(obj,objtext){
var ol= obj.length;
var res;
obj=objtext.substring(0,ol);
res="<b>"+obj+"</b>"+objtext.substring(ol,objtext.length);
return res;
}
function alterBg(j,i){//改变下拉列表鼠标事件颜色
var o = document.getElementById('al'+j);
if(i==0)
o.style.backgroundColor ="#FFFFEE";
else if(i==1)
o.style.backgroundColor ="#eeeeee";
}
function onV(j){//取得下拉列表点击值
var o = document.getElementById('al'+j).innerHTML;
o=o.replace("<B>","");
o=o.replace("</B>","");
document.getElementById('drop').value=o;
}
function queryWord(para,str){//该函数为根据条件查询的结果
var r;
r=str.search(para);
if(r==0){
return str;
}else{
return "";
}
}
function Search(textv,str){//测试用函数在本例中不使用
//var textv = document.getElementById("drop").value;
var r,result; // 声明变量。
r = str.search(textv); // 查找字符串。
str=str.slice(r,-1);
document.getElementById("p").innerHTML=str.substring(0,str.indexOf(" "));
result=str.substring(0,str.indexOf(""));
return result;
// 返回 Boolean 结果。
}
var i=0;
var k;
function changeTable(){
var selectLength;
selectLength=document.getElementsByName("tv").length;
document.getElementById("opp").innerHTML=selectLength;
var keyvalue=event.keyCode;
if(selectLength>0){
if(keyvalue==40){
k=i;
i++;
}
else if(keyvalue==38){
k=i;
i--
};
if(i<0){
i=selectLength-1;
}else if(i>selectLength-1){
i=0;
}
var m = "al"+i;
var n ="al"+k;
if(selectLength==1){
var p = document.getElementById(m);
p.style.backgroundColor="#ffffee";
}else{
if(i>=0 && i<selectLength){
var p = document.getElementById(m);
p.style.backgroundColor="#ffffee";
}
if(k>=0 && k<selectLength){
var h = document.getElementById(n);
h.style.backgroundColor="#eeeeee";
}
if(keyvalue==13){
onV(i);
}
}
}
}
function loadDiv(){
div1.style.visibility="show";
div2.style.visibility="show";
}
function showBody(){
var div1 = document.getElementById('Layer1');
var div2 = document.getElementById('Layer2');
div1.style.visibility="hidden";
div2.style.visibility="hidden";
}
</script>
<body>
<div id="opp"></div>
<div id="Layer1" style="position:absolute; background-color:#000000; left:0px; top:0px; width:100%; height:650px; filter: alpha(opacity=20); z-index:1; visibility: hidden;"></div>
<div id="Layer2" style="position:absolute; left:0px; top:150px; width:100%; height:200px; z-index:2; visibility: hidden;">
<table align="center" width="50%" height="70" cellpadding="0" bgcolor="#FFFFFF" cellspacing="0" >
<tr>
<td align="center"><a href="javascript:void(0)" onclick="showBody()">点击这里for my dear Gee_gee</a>(Moontoucher's UI manager)</td>
</tr>
</table> </div><br>
<br>
<br>
<br>
<br>
<input name="drop" type="text" id="drop" onKeyup="droplist();changeTable()" >
仿163输入邮件地址自动显示下拉列表（献给最亲爱的gee_gee）
<div id="p" style="height:100px; width:170px; overflow:auto; border-width:1px; border-color:#000000 "></div>
<input type="hidden" id="hv" name="hv" value="123">
<input type="hidden" id="hv" name="hv" value="uio">
<input type="hidden" id="hv" name="hv" value="lkjl">
<input type="hidden" id="hv" name="hv" value="9876">
<input type="hidden" id="hv" name="hv" value="123467">
<input type="hidden" id="hv" name="hv" value="fghj">
<input type="hidden" id="hv" name="hv" value="yutf78">
<input type="hidden" id="hv" name="hv" value="王旺">
<input type="hidden" id="hv" name="hv" value="cuiliyi">
<input type="hidden" id="hv" name="hv" value="呵呵">
<input type="hidden" id="hv" name="hv" value="王子复仇记">
<input type="hidden" id="hv" name="hv" value="certerly">
<input type="hidden" id="hv" name="hv" value="123">
<input type="hidden" id="hv" name="hv" value="uio">
</body>
</html>

仿163填写邮件地址自动显示下拉（无优化）

复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"
JSuggest自动匹配下拉框使用方法(示例代码)

1.下载jquery-latest.js,JSuggest.js和JSuggest.css JSuggest.js源代码如下复制代码代码如下: /*** * Description : JSuggest 下拉提示框*/ function JSuggest(){ // DIV下拉框this.div = null; // DIV下的ulthis.ul = null; // 文本输入框this.input = null; // 当前DIV所选的LI对象this.current_li = null;
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码

使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA
JavaScript实现鼠标经过显示下拉框

本文实例为大家分享了JavaScript实现鼠标经过显示下拉框的具体代码,供大家参考,具体内容如下代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=
ajax 自动完成下拉框自动提示位置问题

复制代码代码如下: function divPosition(){ var clx,cly; clx=event.clientX; cly = event.clientY; objouter.style.top = clx+10; objouter.style.left = cly+20;
Bootstrap导航条可点击和鼠标悬停显示下拉菜单

使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码先看下jquery仿京东导航效果: 前端html代码如下: 复制代码代码如下: <ul> <li><a href="#">baidu</a></li> <div
如何使用数组来显示下拉菜单？

Sub DoDropDown(Arr(), strSelName, onchange, strSelected, strexclude)Dim i if strSelected <> "" then swap arr, strSelected end if response.write "<select NAME='" & strSelName & "' SIZE=1 O
jQuery 实现自动填充邮箱功能（带下拉提示）

在做这个功能时候,我参考的是网易注册(http://reg.163.com/reg/reg.jsp?product=urs)中的邮箱栏目所实现的功能与效果.这个功能的目的是使用户在填写邮箱栏目的过程中,在带有邮箱后缀名的菜单的提示下,可以不需要完整输入自己的注册邮箱,达到方便.快捷.友好的效果.在做这个功能的时候,需要充分站在使用者的角度,看怎样设计能够最符合通常情况下人们的使用习惯,又怎样设计反而会让用户感到不便.先来看看功能实现的演示效果图: 在线演示:http://jsfiddle.net
Android 仿硅谷新闻下拉刷新/上拉加载更多

1.添加加载更多布局 1_初始化和隐藏代码在RefreshListView构造方法中调用 private void initFooterView(Context context) { View footerView = View.inflate(context, R.layout.refresh_listview_footer, null); //隐藏代码 footerView.measure(0, 0); int footerViewHeight = footerView.getMeasur

仿163填写邮件地址自动显示下拉（无优化）

相关推荐

随机推荐