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


Posted in Javascript onNovember 05, 2008
<!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"> 
<!-- 
function MM_reloadPage(init) { //reloads the window if Nav4 resized 
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { 
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} 
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); 
} 
MM_reloadPage(true); 
//--> 
</script> 
<style type="text/css"> 
<!-- 
body { 
margin-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
} 
body { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
line-height: 150%; 
color: #003399; 
text-decoration: none; 
} 
a:link { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
line-height: 150%; 
font-weight: normal; 
color: #003399; 
text-decoration: none; 
} 
a:visited { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
line-height: 150%; 
font-weight: normal; 
color: #003399; 
text-decoration: none; 
} 
a:hover { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
line-height: 150%; 
color: #0099FF; 
text-decoration: underline; 
} 
a:active { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
line-height: 150%; 
color: #0099FF; 
text-decoration: underline; 
} 
--> 
</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>
Javascript 相关文章推荐
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
js+css实现红包雨效果
Jul 12 Javascript
js form action动态修改方法
Nov 04 #Javascript
JS 继承实例分析
Nov 04 #Javascript
初学Javascript的一些总结
Nov 03 #Javascript
JS提交并解析后台返回的XML的代码
Nov 03 #Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 #Javascript
JS 创建对象(常见的几种方法)
Nov 03 #Javascript
ajax无刷新动态调用股票信息(改良版)
Nov 01 #Javascript
You might like
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
需要发散思维学习PHP
2009/06/29 PHP
分享3个php获取日历的函数
2015/09/25 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
Python3.2中Print函数用法实例详解
2015/05/19 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
Python类class参数self原理解析
2020/11/19 Python
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
上海奥佳笔试题面试题
2016/11/16 面试题
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
给男朋友的道歉信
2014/01/12 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
爱情保证书
2015/01/17 职场文书
皇城相府导游词
2015/02/06 职场文书
2015年工会工作总结
2015/03/30 职场文书
老人院义工活动感想
2015/08/07 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
nginx配置指令之server_name的具体使用
2022/08/14 Servers