이 기사 예제는 JS가 멋진 이메일 주소 추가 기능을 구현하는 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<title> js는 멋진 이메일 주소 추가 기능 </title>를 구현합니다
<스타일 유형 = "텍스트/CSS">
ul {목록 스타일 : 없음; 여백 : 0; 패딩 : 0;}
Li {마진 : 0; 패딩 : 0;}
#Content {너비 : 100%;}
#sendmail {float : 왼쪽; 너비 : 60%;}
#FriendList {float : 왼쪽; 너비 : 30%;}
#bxaddrfly {위치 : 절대; 높이 : 18px; 너비 : 46px; 배경 : #eee; 국경 : 1px #CCC Solid; 디스플레이 : 없음;}
#tbaddrtree {너비 : 126px; 플로트 : 왼쪽; 패딩 : 5px; 테두리 : 1px #7f9db9 Solid;}
#tbaddrtree li {너비 : 100%; float : 왼쪽;}
#tbaddrtree a {Backgroud : #fff; 너비 : 100%; 색상 : #494949; 텍스트 결정 : 없음; float : 왼쪽;}
#tbaddrtree A : 호버 {배경 : #e5edf6;}
</스타일>
<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];}
함수는 없음 (str) {return str == null || str == ""? true : false}
var browser = new Object ();
browser.ispirefox = (navigator.useragent.tolowercase (). indexof ( "firefox")! = -1);
if (browser.isfirefox) {extendeventObject ();}
함수 extendeventObject () {
window.constructor.prototype .__ definegetter __ ( "event", function () {
var o = arguments.callee.caller;
var e;
while (o! = null) {
e = O. arguments [0];
if (e && (e.constructor == event || e.constructor == mouseevent)) return e;
o = O.Caller;
}
널 리턴;
});
event.prototype .__ definegetter __ ( "srcelement", function () {
var 노드 = 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) {
var member, tr
var ee = e.srcelement;
if (ee.tagname == "a"&& e.type == "mouseover") {ee.style.textDecoration = "밑줄"}
if (ee.tagname == "a"&& e.type == "mouseout") {ee.style.textDecoration = ""}
if (e.type == "클릭"&& e.srcelement.tagname == "a") {
var li = ee.parentNode.parentNode;
ev.addinfo = "/" "+li.getAttribute ("membername ")+"/"</" "+li.getAttribute ("이메일 ")+"/">"
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 = 새로운 배열 (Ex, Ey, Inceptex, Inceptey, 10);
Fly (Flydiv, addevent);
}
기능 플라이 (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;
평가 (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+",";
}
}
</스크립트>
</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]"> <bobr> <a> zhang san </a> </nobr> </li>
<li membername = "li si"email = "[email protected]"> <obr> <a> li si </a> </nobr> </li>
<li membername = "wangwu"email = "[email protected]"> <bobr> <a> wangwu </a> </nobr> </li>
</ul>
</div>
<div id = "bxaddrfly"> </div>
</div>
</div>
<br />
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.