この記事の例では、JSがクールな電子メールアドレスの追加機能をどのように実装するかについて説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします：<html>
<head>
<Title> JSはクールなメールアドレスの追加機能</title>を実装します
<style type = "text/css">
ul {list-style：none;マージン：0;パディング：0;}
li {マージン：0;パディング：0;}
#content {width：100％;}
#sendmail {float：left;幅：60％;}
#friendlist {float：left;幅：30％;}
#bxaddrfly {position：absolute; height：18px;幅：46px;背景：#eee;ボーダー：1px #ccc solid; display：none;}
#tbaddrtree {width：126px;フロート：左;パディング：5px;境界線：1px＃7f9db9ソリッド;}
#tbaddrtree li {width：100％;フロート：左;}
#tbaddrtree a {backgroud：#fff; width：100％; color：＃494949;テキストゼロ：なし; 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];}
関数isnone（str）{return str == null || str == "？true：false}
var browser = new object（）;
browser.isfirefox =（navigator.useragent.tolowercase（）。indexof（ "firefox"）！= -1）;
if（browser.isfirefox）{extendeventobject（）;}
関数extendeventObject（）{
window.constructor.prototype .__定義__（ "event"、function（）{{
var o = arguments.callee.caller;
var e;
while（o！= null）{
e = o.arguments [0];
if（e &&（e.constructor == event || e.constructor == mousevent））return e;
o = o.caller;
}
nullを返します。
}）;
event.prototype .__定義__（ "srcelement"、function（）{
var node = this.target;
while（node.nodetype！= 1）node = node.parentnode;
ノードを返す;
}）;
}
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）};
}
関数addrtree_event（e）{
varmemberid、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）
}
}
関数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;
戻る;
}
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）
}
関数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">
<入力名= "textfield" type = "text" id = "sendaddress" size = "70">
</div>
<div id = "friendlist">
<div id = "tbaddrtree">
<ul>
<li membername = "zhang san" email = "[email protected]"> <nobr> <a> zhang san </a> </nobr> </li>
<li membername = "li si" email = "[email protected]"> <nobr> <a> li si </a> </nobr> </li>
<li membername = "wangwu" email = "[email protected]"> <nobr> <a> wangwu </a> </nobr> </li>
</ul>
</div>
<div id = "bxaddrfly"> </div>
</div>
</div>
<br />
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。