يصف مثال المقالة كيف ينفذ JS وظيفة إضافة عنوان بريد إلكتروني رائع. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز كما يلي: <html>
<head>
<TITLE> JS تنفذ وظيفة إضافة عنوان البريد الإلكتروني الرائع </title>
<type type = "text/css">
ul {على غرار القائمة: لا شيء ؛ الهامش: 0 ؛ الحشو: 0 ؛}
li {margin: 0 ؛ الحشو: 0 ؛}
#content {width: 100 ٪ ؛}
#SendMail {Float: Left ؛ العرض: 60 ٪ ؛}
#friendlist {float: Left ؛ العرض: 30 ٪ ؛}
#bxaddrfly {الموضع: absomute ؛ الارتفاع: 18px ؛ العرض: 46px ؛ الخلفية: #EEE ؛ الحدود: 1px #ccc الصلبة ؛ العرض: لا شيء ؛}
#tbaddrtree {width: 126px ؛ تعويم: اليسار. الحشو: 5px ؛ الحدود: 1px #7f9db9 الصلبة ؛}
#tbaddrtree li {width: 100 ٪ ؛ تعويم: اليسار ؛}
#tbaddrtree a {backgroud: #fff ؛ width: 100 ٪ ؛ color: #494949 ؛ decoration text: none ؛ float: left ؛}
#tbaddrtree a: hover {background: #e5edf6 ؛}
</style>
<script type = "text/javaScript">
var ev = {} ؛
var flydiv = "bxaddrfly" ؛
var inceptdiv = "sendAddress" ؛
var addEvent = "addAddress ()" ؛
وظيفة 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) {extedeventObject () ؛}
الوظيفة تمتد
window.constructor.prototype .__ definester __ ("event" ، function () {
var o = edations.callee.caller ؛
var e ؛
بينما (o! = null) {
E = O.Arguments [0] ؛
if (e && (e.constructor == event ||
o = o.caller ؛
}
العودة لاغية.
}) ؛
Event.Prototype .__ definester __ ("srcelement" ، function () {
var node = this.target ؛
بينما (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 memberid ، 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 == "انقر"
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 ؛
بينما (incepte = incepte.offsetParent) {
inceptex += incepte.offsettop ؛
inceptey += incepte.offsetleft ؛
}
ev.flyarr = صفيف جديد (ex ، ey ، inceptex ، inceptey ، 10) ؛
يطير (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 ؛
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 (مفتاح) ==-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" eLun
<li memberName = "li si" email = "[email protected]"
<li memberName = "wangwu" email = "[email protected]"> <bolr> <a> wangwu </a> </bolr> </li>
</ul>
</div>
<div id = "bxaddrfly"> </viv>
</div>
</div>
<br />
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.