编程 Javascript

仿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圆形浮动菜单特效代码

Mar 03 Javascript

ExtJS Store的数据访问与更新问题

Apr 28 Javascript

JavaScript结合AJAX_stream实现流式显示

Jan 08 Javascript

浅谈JavaScript Math和Number对象

Jan 26 Javascript

JS常用倒计时代码实例总结

Feb 07 Javascript

Bootstrap响应式表格详解

May 23 Javascript

详解在微信小程序的JS脚本中使用Promise来优化函数处理

Mar 06 Javascript

JS实现判断数组是否包含某个元素示例

May 24 Javascript

详解vue 动态加载并注册组件且通过 render动态创建该组件

May 30 Javascript

JavaScript代码实现简单计算器

Dec 27 Javascript

Vue实现tab导航栏并支持左右滑动功能

Jun 28 Vue.js

Vue2.0搭建脚手架

Mar 13 Vue.js

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实现的构造sql语句类实例

2016/02/03 PHP

PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】

2017/11/16 PHP

laravel 框架结合关联查询 when()用法分析

2019/11/22 PHP

ext监听事件方法[初级篇]

2008/04/27 Javascript

Jquery实现弹出层分享微博插件具备动画效果

2013/04/03 Javascript

JS性能优化笔记搜索整理

2013/08/21 Javascript

js实现无缝滚动特效

2015/12/20 Javascript

JavaScript中Form表单技术汇总(推荐)

2016/06/26 Javascript

jQuery leonaScroll 1.1 自定义滚动条插件(推荐)

2016/09/17 Javascript

使用JavaScript获取URL中的参数(两种方法)

2016/11/16 Javascript

浅谈Vuejs中nextTick()异步更新队列源码解析

2017/12/31 Javascript

echarts同一页面中四个图表切换的js数据交互方法示例

2018/07/03 Javascript

vue内置组件transition简单原理图文详解(小结)

2018/07/12 Javascript

vue实现与安卓、IOS交互的方法

2018/11/02 Javascript

JavaScript单线程和任务队列原理解析

2020/02/04 Javascript

在vue中使用echarts(折线图的demo,markline用法)

2020/07/20 Javascript

从0到1学习JavaScript编写贪吃蛇游戏

2020/07/28 Javascript

VUE : vue-cli中去掉路由中的井号#操作

2020/09/04 Javascript

numpy中的高维数组转置实例

2018/04/17 Python

对pandas replace函数的使用方法小结

2018/05/18 Python

tensorflow 获取模型所有参数总和数量的方法

2018/06/14 Python

Python中反射和描述器总结

2018/09/23 Python

Django 响应数据response的返回源码详解

2019/08/06 Python

python检测服务器端口代码实例

2019/08/31 Python

Python基于进程池实现多进程过程解析

2020/04/30 Python

Django url 路由匹配过程详解

2021/01/22 Python

CSS3中HSL和HSLA的简单使用示例

2015/07/14 HTML / CSS

幼儿园义卖活动方案

2014/01/17 职场文书

怎样拟定创业计划书

2014/05/01 职场文书

文秘专业应届生求职信

2014/05/26 职场文书

本科毕业生应聘求职信

2014/07/06 职场文书

公司的门卫岗位职责

2014/09/09 职场文书

公积金接收函格式

2015/01/30 职场文书

人生一定要学会的三样东西：放下、忘记、珍惜

2019/08/21 职场文书

python 逐步回归算法

2021/04/06 Python

Java使用jmeter进行压力测试

2021/07/09 Java/Android