仿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中去掉数组中的重复值的实现方法
Aug 03 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
Vue中key的作用示例代码详解
Jun 10 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
深入php中var_dump方法的使用详解
2013/06/24 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
python中管道用法入门实例
2015/06/04 Python
Python抓取百度查询结果的方法
2015/07/08 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
大专生简历的自我评价
2013/11/26 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
学校课外活动总结
2014/05/08 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
离职报告格式
2014/11/04 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
民主生活会主持词
2015/07/01 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
Python 匹配文本并在其上一行追加文本
2022/05/11 Python