Cet exemple d'article décrit comment JS met en œuvre une fonction d'ajout d'adresse e-mail cool. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <html>
<adal>
<Title> JS implémente la fonction d'addition d'adresse e-mail cool </TITAL>
<style type = "text / css">
ul {style liste: aucun; marge: 0; rembourrage: 0;}
li {margin: 0; rembourrage: 0;}
#Content {largeur: 100%;}
#Sendmail {float: Left; Largeur: 60%;}
#friendList {float: Left; Largeur: 30%;}
#bxaddrfly {position: absolue; hauteur: 18px; Largeur: 46px; arrière-plan: #eee; Border: 1px #ccc solide; affichage: aucun;}
#tbaddrtree {width: 126px; flottant: à gauche; rembourrage: 5px; bordure: 1px # 7f9db9 solide;}
#tbaddrtree li {largeur: 100%; Float: à gauche;}
#tbaddrtree a {backgroud: #fff; largeur: 100%; couleur: # 494949; text-décoration: aucun; float: gauche;}
#tbaddrtree A: Hover {background: # e5edf6;}
</ style>
<script type = "text / javascript">
var ev = {};
var flydiv = "bxaddrfly";
var inceptdiv = "sendAddress";
var addEvent = "addaddress ()";
fonction oo (obj) {return (document.getElementById)? document.getElementById (obj): document.all [obj];}
Fonction isNone (str) {return str == null || str == ""? true: false}
Var Browser = New Object ();
Browser.isfirefox = (Navigator.UserAgent.tolowerCase (). Indexof ("Firefox")! = - 1);
if (Browser.isfirefox) {extendEventObject ();}
fonction extenventObject () {
window.constructor.prototype .__ Definegetter __ ("Event", function () {
var o = arguments.callee.Caller;
var e;
tandis que (o! = null) {
e = o.arguments [0];
if (e && (e.Constructor == Event || e.Contructor == Mousevent)) return e;
O = O.Caller;
}
retourner null;
});
Event.prototype .__ Definegetter __ ("srcelement", function () {
var node = this.target;
while (node.NodeType! = 1) node = node.parentNode;
Node de retour;
});
}
window.onload = function () {
var addRtree = oo ('tbaddrtree');
addRtree.OnMouseOver = function () {addrTree_Event (événement)};
addRtree.onMouseout = function () {addrTree_Event (événement)};
addRtree.OnClick = function () {addrTree_Event (événement)};
}
fonction addrtree_event (e) {
var membre, 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 == "cliquez" && e.srcelement.tagname == "a") {
var li = ee.parentNode.parentNode;
ev.addinfo = "/" "+ li.getAttribute (" membrename ") +" / "</" "+ li.getAttribute (" e-mail ") +" / ">"
OO (FlyDiv) .InnerHtml = li.getAttribute ("MemberName");
addRtree_add (e.clientx, e.clienty)
}
}
fonction addrtree_add (ex, ey) {
if (oo (flyDiv) .style.display == 'Aucun' || 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 = nouveau tableau (ex, ey, inceptex, inceptey, 10);
Fly (Flydiv, Advevent);
}
Fonction 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;
retour;
}
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)
}
fonction adaddress ()
{
var key = ev.addinfo;
if (oo (inceptdiv) .value.indexof (key) == - 1)
{
oo (inceptdiv) .value + = key + ",";
}
}
</cript>
</ head>
<body>
<div id = "contenu">
<div id = "sendmail">
<input name = "textfield" type = "text" id = "sendAddress" size = "70">
</div>
<div id = "FriendList">
<div id = "tbaddrtree">
<ul>
<li membrename = "zhang san" e-mail = "[email protected]"> <nobr> <a> Zhang san </a> </brr> </li>
<li membre-nom = "li si" email = "[email protected]"> <nobr> <a> li si </a> </brr> </li>
<li membre-nom = "wangwu" email = "[email protected]"> <nobr> <a> wangwu </a> </brr> </li>
</ul>
</div>
<div id = "bxaddrfly"> </ div>
</div>
</div>
<br />
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.