この記事の例では、JS でクールな EMAIL アドレス追加機能を実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。 コードをコピー コードは次のとおりです: JS实现很酷的EMAIL地址添加功能 <br> ul{ list-style:none; margin:0; padding:0;}<br> li{ margin:0; padding:0;}<br> #content{width:100%;}<br> #sendmail{float:left; width:60%;}<br> #friendlist{float:left; width:30%;}<br> #bxAddrFly{position:absolute;height:18px; width:46px;background:#EEE; border:1px #ccc solid;display:none;}<br> #tbAddrTree{ width:126px; float:left; padding:5px;border:1px #7F9DB9 solid;}<br> #tbAddrTree li{ width:100%; float:left;}<br> #tbAddrTree a{backgroud: #fff;width: 100%;color:#494949;text-decoration: none;float:left;}<br> #tbAddrTree a:hover{background: #e5edf6;}<br> <br> var ev={};<br> var flyDiv="bxAddrFly";<br> var inceptDiv="SendAddress";<br> var addEvent="addAddress()";<br> function oo(obj){return (document.getElementById) ? document.getElementById(obj): document.all[obj];}<br> function isNone(str){return str==null||str==""?true:false}<br> var Browser = new Object();<br> Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox")!=-1);<br> if (Browser.isFirefox) { extendEventObject();}<br> function extendEventObject() {<br> window.constructor.prototype.__defineGetter__("event", function(){<br> var o = arguments.callee.caller;<br> var e;<br> while(o != null){<br> e = o.arguments[0];<br> if(e && (e.constructor == Event || e.constructor == MouseEvent)) return e;<br> o = o.caller;<br> }<br> return null;<br> }); <p>Event.prototype.__defineGetter__("srcElement", function () {<br> var node = this.target;<br> while (node.nodeType != 1) node = node.parentNode;<br> return node;<br> });<br> }<br> window.onload = function(){<br> var addrTree = oo('tbAddrTree');<br> addrTree.onmouseover = function(){addrTree_event(event)};<br> addrTree.onmouseout = function(){addrTree_event(event)};<br> addrTree.onclick = function(){addrTree_event(event)};<br> }<br> function addrTree_event(e){<br> var memberID,tr<br> var ee = e.srcElement; <br> if(ee.tagName=="A"&&e.type=="mouseover"){ee.style.textDecoration="underline"}<br> if(ee.tagName=="A"&&e.type=="mouseout"){ee.style.textDecoration=""}<br> if(e.type=="click"&&e.srcElement.tagName=="A"){<br> var li=ee.parentNode.parentNode;<br> ev.AddInfo="\""+li.getAttribute("memberName")+"\"<\""+li.getAttribute("email")+"\">"<br> oo(flyDiv).innerHTML=li.getAttribute("memberName");<br> addrTree_add(e.clientX,e.clientY)<br> }<br> }<br> function addrTree_add(ex,ey){<br> if(oo(flyDiv).style.display=='none'||oo(flyDiv).style.display==''){oo(flyDiv).style.display='block';}<br> var inceptE = oo(inceptDiv);<br> var inceptEX = inceptE.offsetTop; <br> var inceptEY = inceptE.offsetLeft; <br> while(inceptE = inceptE.offsetParent){<br> inceptEX += inceptE.offsetTop; <br> inceptEY += inceptE.offsetLeft; <br> }<br> ev.flyArr=new Array(ex,ey,inceptEX,inceptEY,10);<br> fly(flyDiv,addEvent);<br> }</p> <p>function fly(flyObj,flyRun){<br> var obj,a=ev.flyArr,x,y<br> if(flyObj!=null){<br> if(ev.flyObj!=null){<br> window.clearTimeout(ev.flyTm);<br> ev.flyObj.style.top=-900;<br> }<br> a[5]=0;<br> ev.flyObj=oo(flyObj);<br> ev.flyRun=flyRun;<br> }</p> <p>obj=ev.flyObj;<br> if(a[4]==null){a[4]=1}<br> a[5]+=a[4]/Math.sqrt(Math.pow(a[2]-a[0],2)+Math.pow(a[3]-a[1],2));<br> if(a[5]>1){<br> obj.style.top=-900;<br> eval(ev.flyRun);<br> ev.flyObj=null;<br> return;<br> }</p> <p>window.clearTimeout(ev.flyTm);<br> x=(a[2]-a[0])*a[5]+a[0];<br> y=(a[3]-a[1])*a[5]+a[1];<br> obj.style.left=x;<br> obj.style.top=y;<br> document.body.style.overflowX="hidden";<br> ev.flyTm=window.setTimeout("fly()",10)<br> }</p> <p>function addAddress()<br> {<br> var key=ev.AddInfo;<br> if (oo(inceptDiv).value.indexOf(key)==-1)<br> {<br> oo(inceptDiv).value+=key+",";<br> }<br> }<br> Zhang San 王五 この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
