仿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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
iframe实用操作锦集
Apr 22 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
原生js+css实现tab切换功能
Sep 17 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实时显示输出
2008/10/02 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
浅析php原型模式
2014/11/25 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
Python中使用item()方法遍历字典的例子
2014/08/26 Python
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
Python画图学习入门教程
2016/07/01 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
python更改已存在excel文件的方法
2018/05/03 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
python将字母转化为数字实例方法
2019/10/04 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
python 图像增强算法实现详解
2021/01/24 Python
函授教育个人学习的自我评价
2013/12/31 职场文书
家长对老师的评语
2014/04/18 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫