Contoh artikel ini menjelaskan bagaimana JS mengimplementasikan fungsi penambahan alamat email yang keren. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <Html>
<head>
<Title> JS mengimplementasikan fungsi penambahan alamat email keren </iteme>
<type style = "text/css">
ul {List-style: None; Margin: 0; padding: 0;}
Li {margin: 0; padding: 0;}
#content {width: 100%;}
#sendmail {float: left; Lebar: 60%;}
#friendlist {float: left; Lebar: 30%;}
#bxaddrfly {position: absolute; tinggi: 18px; Lebar: 46px; latar belakang: #EEE; Perbatasan: 1px #ccc solid; display: none;}
#tbaddrtree {width: 126px; float: kiri; padding: 5px; Border: 1px #7f9db9 solid;}
#tbaddrtree li {width: 100%; float: kiri;}
#tbaddrtree a {backgroud: #fff; lebar: 100%; warna: #494949; Text-Decoration: none; float: left;}
#tbaddrtree A: hover {latar belakang: #e5edf6;}
</tyle>
<type skrip = "Teks/JavaScript">
var ev = {};
var flydiv = "bxaddrfly";
var inceptDiv = "sendAddress";
var addevent = "addAddress ()";
function oo (obj) {return (document.geteLementById)? document.geteLementById (obj): document.all semua [obj];}
fungsi isnone (str) {return str == null || str == ""? true: false}
var browser = objek baru ();
Browser.isfirefox = (navigator.useragent.tolowercase (). Indexof ("firefox")! =-1);
if (browser.isfirefox) {extentEventObject ();}
fungsi extentEventObject () {
window.constructor.prototype .__ definegetter __ ("event", function () {
var o = argumen.callee.caller;
var e;
while (o! = null) {
e = o.arguments [0];
if (e && (e.constructor == event || e.constructor == mouseEvent)) return e;
o = o.caller;
}
kembali nol;
});
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)};
}
fungsi addrtree_event (e) {
VAR MEMANDID, 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 == "klik" && 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)
}
}
fungsi addrtree_add (ex, ey) {
if (oo (flydiv) .style.display == 'none' || oo (flydiv) .style.display == '') {oo (flydiv) .style.display = 'block';}
var incepte = oo (insteptDiv);
var inceptex = Incepte.offsettop;
var inceptey = Incepte.Offsetleft;
while (incepte = incepte.offsetParent) {
inceptex += Incepte.offsettop;
Inceptey += Incepte.Offsetleft;
}
ev.flyarr = array baru (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;
kembali;
}
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 = "tersembunyi";
ev.flytm = window.setTimeout ("fly ()", 10)
}
fungsi addAddress ()
{
var key = ev.addinfo;
if (oo (insteptdiv) .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 = "Zhang San" Email = "[email protected]"> <obrr> <a> Zhang San </a> </obr> </li>
<Li MemberName = "li si" email = "[email protected]"> <obrr> <a> li si </a> </obr> </li>
<Li MemberName = "wangwu" email = "[email protected]"> <obrr> <a> wangwu </a> </obr> </li>
</ul>
</div>
<Div id = "bxaddrfly"> </div>
</div>
</div>
<br />
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.