Este ejemplo de artículo describe cómo JS implementa una función de adición de dirección de correo electrónico genial. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <html>
<Evista>
<title> JS implementa la función de adición de dirección de correo electrónico genial </title>
<style type = "text/css">
UL {Estilo de lista: ninguno; margen: 0; relleno: 0;}
li {margen: 0; relleno: 0;}
#content {ancho: 100%;}
#sendmail {float: izquierda; Ancho: 60%;}
#friendList {float: izquierda; Ancho: 30%;}
#bxaddrfly {posición: absoluto; altura: 18px; Ancho: 46px; fondo: #EEE; borde: 1px #ccc sólido; pantalla: ninguno;}
#tbaddrtree {ancho: 126px; flotante: izquierda; relleno: 5px; borde: 1px #7f9db9 sólido;}
#tbaddrtree li {ancho: 100%; flotante: izquierda;}
#tbaddrtree a {backgroud: #fff; ancho: 100%; color: #494949; Decoración de texto: none; float: izquierda;}
#tbaddrtree a: hover {fondo: #e5edf6;}
</style>
<script type = "text/javaScript">
var ev = {};
var flydiv = "bxaddrfly";
var inceptDiv = "sendAddress";
var addEvent = "addAdDress ()";
función oo (obj) {return (document.getElementById)? document.getElementById (obj): document.all [obj];}
función isnone (str) {return str == null || str == ""? Verdadero: falso}
varilla var = nuevo objeto ();
Browser.isfirefox = (navigator.useragent.tolowercase (). IndexOf ("firefox")! =-1);
if (browser.isfirefox) {ExtendEventObject ();}
function ExtendEventObject () {
Window.Constructor.Prototype .__ DefineGetter __ ("Event", function () {
var o = argumentos.callee.caller;
var e;
while (o! = null) {
e = o.argumentos [0];
if (e && (e.constructor == evento || e.constructor == mouseEvent)) return e;
o = o.caller;
}
regresar nulo;
});
Event.prototype .__ DefineGetter __ ("srCelement", function () {
var nodo = this.target;
while (node.nodeType! = 1) node = node.parentnode;
nodo de retorno;
});
}
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 miembro, tr
var ee = e.srcelement;
if (ee.tagname == "a" && e.type == "mouseover") {ee.style.textDecoration = "subline"}
if (ee.tagname == "a" && e.type == "mouseout") {ee.style.textDecoration = ""}
if (e.type == "hacer clic" && e.srcelement.tagname == "a") {
var li = ee.parentnode.parentnode;
ev.addinfo = "/" "+li.getattribute (" memberName ")+"/"</" "+li.getAttribute (" Correo electrónico ")+"/">"
oo (volante) .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 inCtex = incepte.offsettop;
var inceptey = incepte.offsetleft;
while (incepte = incepte.offsetParent) {
InceptEx += incepte.offsettop;
inceptey += incepte.offsetleft;
}
ev.flyarr = nueva matriz (ex, EY, InceptEx, Inceptey, 10);
Fly (Flydiv, AddEvent);
}
Función 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 (volante);
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 = nulo;
devolver;
}
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)
}
función addAddress ()
{
var key = ev.addinfo;
if (oo (inceptDiv) .value.indexof (key) ==-1)
{
OO (InceptDiv) .Value+= Key+",";
}
}
</script>
</ablo>
<Body>
<div id = "contenido">
<div id = "sendmail">
<input name = "textfield" type = "text" id = "sendAddress" size = "70">
</div>
<div id = "Lista de amigos">
<div id = "tbaddrtree">
<ul>
<li memberName = "Zhang San" Correo electrónico = "[email protected]"> <Nobr> <a> Zhang San </a> </lobr> </li>
<li memberName = "li si" email = "[email protected]"> <Nobr> <a> li si </a> </BOBR> </li>
<li memberName = "wangwu" email = "[email protected]"> <Nobr> <a> Wangwu </a> </lobr> </li>
</ul>
</div>
<div id = "bxaddrfly"> </div>
</div>
</div>
<Br />
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.