JS实现很酷的EMAIL地址添加功能实例

本文实例讲述了JS实现很酷的EMAIL地址添加功能的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<html>
<head>
<title>JS实现很酷的EMAIL地址添加功能</title>
<style type="text/css">
ul{ list-style:none; margin:0; padding:0;}
li{ margin:0; padding:0;}
#content{width:100%;}
#sendmail{float:left; width:60%;}
#friendlist{float:left; width:30%;}
#bxAddrFly{position:absolute;height:18px; width:46px;background:#EEE; border:1px #ccc solid;display:none;}
#tbAddrTree{ width:126px; float:left; padding:5px;border:1px #7F9DB9 solid;}
#tbAddrTree li{ width:100%; float:left;}
#tbAddrTree a{backgroud: #fff;width: 100%;color:#494949;text-decoration: none;float:left;}
#tbAddrTree a:hover{background: #e5edf6;}
</style>
<script type="text/javascript">
var ev={};
var flyDiv="bxAddrFly";
var inceptDiv="SendAddress";
var addEvent="addAddress()";
function oo(obj){return (document.getElementById) ? document.getElementById(obj): document.all[obj];}
function isNone(str){return str==null||str==""?true:false}
var Browser = new Object();
Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox")!=-1);
if (Browser.isFirefox) { extendEventObject();}
function extendEventObject() {
window.constructor.prototype.__defineGetter__("event", function(){
var o = arguments.callee.caller;
var e;
while(o != null){
e = o.arguments[0];
if(e && (e.constructor == Event || e.constructor == MouseEvent)) return e;
o = o.caller;
}
return null;
});

Event.prototype.__defineGetter__("srcElement", function () {
var node = this.target;
while (node.nodeType != 1) node = node.parentNode;
return node;
});
}
window.onload = function(){
var addrTree = oo('tbAddrTree');
addrTree.onmouseover = function(){addrTree_event(event)};
addrTree.onmouseout = function(){addrTree_event(event)};
addrTree.onclick = function(){addrTree_event(event)};
}
function addrTree_event(e){
var memberID,tr
var ee = e.srcElement;
if(ee.tagName=="A"&&e.type=="mouseover"){ee.style.textDecoration="underline"}
if(ee.tagName=="A"&&e.type=="mouseout"){ee.style.textDecoration=""}
if(e.type=="click"&&e.srcElement.tagName=="A"){
var li=ee.parentNode.parentNode;
ev.AddInfo="\""+li.getAttribute("memberName")+"\"<\""+li.getAttribute("email")+"\">"
oo(flyDiv).innerHTML=li.getAttribute("memberName");
addrTree_add(e.clientX,e.clientY)
}
}
function addrTree_add(ex,ey){
if(oo(flyDiv).style.display=='none'||oo(flyDiv).style.display==''){oo(flyDiv).style.display='block';}
var inceptE = oo(inceptDiv);
var inceptEX = inceptE.offsetTop;  
var inceptEY = inceptE.offsetLeft;  
while(inceptE = inceptE.offsetParent){
inceptEX += inceptE.offsetTop;  
inceptEY += inceptE.offsetLeft;  
}
ev.flyArr=new Array(ex,ey,inceptEX,inceptEY,10);
fly(flyDiv,addEvent);
}

function fly(flyObj,flyRun){
var obj,a=ev.flyArr,x,y
if(flyObj!=null){
if(ev.flyObj!=null){
window.clearTimeout(ev.flyTm);
ev.flyObj.style.top=-900;
}
a[5]=0;
ev.flyObj=oo(flyObj);
ev.flyRun=flyRun;
}

obj=ev.flyObj;
if(a[4]==null){a[4]=1}
a[5]+=a[4]/Math.sqrt(Math.pow(a[2]-a[0],2)+Math.pow(a[3]-a[1],2));
if(a[5]>1){
obj.style.top=-900;
eval(ev.flyRun);
ev.flyObj=null;
return;
}

window.clearTimeout(ev.flyTm);
x=(a[2]-a[0])*a[5]+a[0];
y=(a[3]-a[1])*a[5]+a[1];
obj.style.left=x;
obj.style.top=y;
document.body.style.overflowX="hidden";
ev.flyTm=window.setTimeout("fly()",10)
}

function addAddress()
{
var key=ev.AddInfo;
if (oo(inceptDiv).value.indexOf(key)==-1)
{
oo(inceptDiv).value+=key+",";
}
}
</script>
</head>
<body>
<div id="content">
  <div id="sendmail">
    <input name="textfield" type="text" id="SendAddress" size="70">
  </div>
  <div id="friendlist">
    <div id="tbAddrTree">
      <ul>
        <li membername="张三" email="zhangsan@163.com"><nobr><a>张三</a></nobr></li>
        <li membername="李四" email="lisi@1126.com"><nobr><a>李四</a></nobr></li>
        <li membername="王五" email="wangwu@189.com"><nobr><a>王五</a></nobr></li>
      </ul>
    </div>
    <div id="bxAddrFly"> </div>
  </div>
</div>
<br />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript实现url地址自动检测并添加URL链接示例代码

    背景:写一个简单的聊天系统,发出Htpp的Url实现跳转加上a标签. 实现代码: 复制代码 代码如下: String.prototype.httpHtml = function(){ var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g; return this.replace(reg, '<a target=_blank href="$1$2">$1$2</a>'); }; 摘录: URL地

  • js实现移动端编辑添加地址【模仿京东】

    js实现移动端编辑添加地址【模仿京东】

    效果图: 注:这里的数据格式用的是jsonp,json在这里存在跨域问题 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no,"&

  • JS实现很酷的EMAIL地址添加功能实例

    本文实例讲述了JS实现很酷的EMAIL地址添加功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现很酷的EMAIL地址添加功能</title> <style type="text/css"> ul{ list-style:none; margin:0; padding:0;} li{ margin:0; padding:0;} #content{widt

  • JS实现百度搜索接口及链接功能实例代码

    本文通过代码给大家介绍js实现百度搜索接口及链接功能,具体代码如下所示: 在上篇文章给大家介绍了JS 实现百度搜索功能 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>anchor</title> <style> *{ margin:0; padding:0; } #wei{ wid

  • JS图片轮播与索引变色功能实例详解

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

  • 利用js正则表达式验证手机号,email地址,邮政编码

    手机号码的验证(13开头和158,159开头,共11位) 复制代码 代码如下: var re;var ss=document.getElementById('textbox3').value;re= /^(13[0-9]{9})|(15[89][0-9]{8})$/if(re.test(ss)) {   document.getElementById('label3').innerText="";   //给label赋值用innerText }else{ document.getEl

  • JS实现自动阅读单词(有道单词本添加功能)

    JS实现自动阅读单词(有道单词本添加功能)

    个人比较习惯使用有道,使用了一段时间,背单词的时候很不方便 而有道单词客户Duan没有自动阅读的功能, 本文用强大的js实现了简单的自动下一个单词的功能, 方法: 第一步打开有道路径下的"\Dict\6.3.69.8341\resultui\js\wordBook.js" 文件 添加以下代码 //自动下一个代码 var btnStart = document.getElementById('btn'); var textBox = document.getElementById('te

  • vue.js 实现输入框动态添加功能

    代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-demo</title> </head> <body> &

  • Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)

    Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)

    1.前阶段做了这个地址管理页面,实现的过程中遇到了很多的问题,好在最后实现了,在此记录一下: 首先是加载页面阶段ajax从数据库中获取数据,然后动态的显示在页面中,随后可以点击单个的编辑或删除进行相关操作,可以单击默认地址按钮进行样式切换,默认地址可以没有(单击选中和取消),但是如果设置默认地址则只能设置一个,好,下面我们来一步一步的实现. 2.我这里使用的是Vue.js,页面加载阶段很简单,直接在mounted声明一个方法,然后在方法中调用ajax请求访问数据然后通过v-for循环将数据放入到

  • Vue.js实现无限加载与分页功能开发

    Vue.js实现无限加载与分页功能开发

    本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js完成一个需求的思考过程:与一些构建大型应用的高阶教程相比,又更专注于一些零碎细节的实现,方便读者快速掌握.致用. 需求分析 当一个页面中信息量过大时(例如一个新闻列表中有200条新闻需要展示),就会产生问题,例如: >数据量过大,影响加载速度 >用户体验差,很难定位到之前自己看过的某篇文章 >

  • 使用vue2实现购物车和地址选配功能

    首先,vue基础js写法 new Vue({ el:"#app", //模型 data:{ }, filters:{ }, mounted:function(){ this.$nextTick(function(){ //初始化调用 }); }, computed:{ //实时计算 }, methods:{ } }); v-for <li v-for="(item,index) in productList"> <div class="i

  • Vue.js 实现微信公众号菜单编辑器功能(二)

    Vue.js 实现微信公众号菜单编辑器功能(一)上一篇菜单的点击和添加菜单功能已经在模版实现了,接下来实现菜单的编辑功能 实现菜单删除方法 在vue实例中添加删除菜单方法,根据选中的菜单级别和索引来删除. methods: { //删除菜单 delMenu:function(){ //删除主菜单 if(this.selectedMenuLevel()==1&&confirm('删除后菜单下设置的子菜单也将被删除')){ if(this.selectedMenuIndex===0){ thi

随机推荐