تصف هذه المقالة طريقة تمرير القيم بين تركيز مكونات JavaScript ونقاط المرساة داخل الصفحة. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
الوظيفتان الصغيرتان المذكورتان أعلاه مفيدة للغاية في بعض صفحات الهاتف المحمول الجديدة.
كيفية تشغيل حدث عند وضع المؤشر على مربع الإدخال ، ويؤدي إلى حدث آخر عند وضع المؤشر على مربع الإدخال؟ حتى لو لم يدخل المستخدم أي شيء ...
من السهل تمرير القيم بين الصفحات ، ولكن كيفية تمرير القيم بين المراسي داخل الصفحة؟
1. الأهداف الأساسية
هناك صفحة مع مربع إدخال وارتباط تشعبي عليه. هذين الأمرين ليس لهما اتصال.
إنها مجرد أن الوظيفة ليست كبيرة ، لذلك أكتب وظيفتين معًا
1. وظيفة مربع الإدخال
بمجرد وضع المؤشر على مربع الحوار ، تتحول الخلفية إلى اللون الأحمر ، وبمجرد أن ينقر الماوس الخاص بالمستخدم في مكان آخر ، فإنه يتحول إلى اللون الرمادي مرة أخرى.
2. وظيفة الارتباط التشعبي
مرر قيمة النص = 1 إلى نقطة الربط السفلية في أسفل الصفحة من خلال طريقة GET. يوجد مربع إدخال معاق أسفل نقطة المرساة السفلية ، ومعلمة النص على شريط عنوان الاقتراع باستمرار
ابدأ إذا لم تنقر ، لا توجد معلمة نصية ، لذلك يتم عرض مربع الإدخال دائمًا على أنه فارغ
بمجرد النقر فوق الارتباط التشعبي ، يصبح مربع الحوار أدناه 1 بعد 0.5 ثانية. نظرًا لأنه تتم معالجته بالميلي ثانية ، تتم معالجة شعور المستخدم في الوقت الفعلي.
هناك أيضًا ارتباط تشعبي خلفي فوق هذا المعاق. قم بمسح معلمات الصفحة وسحب شريط التمرير لأسفل مرة أخرى وعرضه على أنه فارغ مرة أخرى.
يرجى ملاحظة أنه عندما يتم نقل القيمة بنجاح بين المراسي في الصفحة ، عنوان URL للمتصفح:
2. عملية الإنتاج
لا حاجة لتقديم أي مكونات إضافية ، فقط افتح صفحة HTML للكتابة. يرجى الاطلاع على الرمز التالي:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> onFoucs </title>
</head>
<body>
<!-تحديد مربع الإدخال. OnFocus هو التركيز. بمجرد وضع المؤشر على مربع الإدخال ، سيتم تشغيل المعلمة getFocus () على الفور. يفقد Onblur التركيز ، ويتحول Onfocus إلى العكس. ->
<p>
<type type = "text" onfocus = "getFocus ()" onBlur = "Lovingfocus ()"/>
</p>
<!-لاحظ بناء جملة الارتباطات التشعبية للمعلمات التي تم تمريرها بواسطة نقاط المرساة في الصفحة. استخدم "Connect Parameters" ثم استخدم #Connect Points. بالنسبة لمعلمات متعددة ، اكتبها على أنها "texta = 1 & textb = 2#bottom ، استخدم" & link->
<p>
<a href = "onfocus.html؟ text = 1#bottom"> المراسي </a>
</p>
<!-يتم استخدام الكثير من LIS فقط لاحتلال الخط ~ من أجل السماح للجميع رؤية تأثير المرساة->
<li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </li>
<!-هذا الارتباط التشعبي يعادل زر الخلفية->
<p>
<a id = "bottom" href = "javaScript: History.go (-1) ؛"> back </a>
</p>
<!-أنا مربع الحوار المعاق->
<p>
<type type = "text" id = "pollingtext" up upded = "upabled"/>
</p>
</body>
</html>
<script>
/*قم أولاً بتغيير لون الخلفية للصفحة إلى #eeeeeeee*/
window.onload = function () {
document.bgColor = "#eeeeeee" ؛
الاقتراع () ؛
}
/* عندما يتم التركيز مربع الحوار ، قم بتغيير لون الخلفية إلى اللون الأحمر ، وإلا قم بتغييره إلى #eeeeee*/
وظيفة getFocus () {
document.bgColor = "#ff0000" ؛
}
وظيفة Lovingfocus () {
document.bgColor = "#eeeeeee" ؛
}
/*هذا تعبير منتظم مخصص للمعلمات عند أخذ عنوان URL الحصول على قيم تم تمريره*/
وظيفة geturlparam (الاسم) {
var reg = new regexp ("(^| &)" + name + "= ([^&]*) (& | $)") ؛
var r = window.location.search.substr (1) .Match (reg) ؛
إذا (r! = null) إرجاع unescape (r [2]) ؛ العودة لاغية.
}
/*الشرطة باستمرار للتحقق مما إذا كانت المعلمة GET قد تم تمريرها*/
وظيفة متزامنة () {
document.getElementById ("pollingText"). value = geturlparam ("text") ؛
}
وظيفة الاقتراع () {
متزامن()؛
setInterval ("Synchronous ()" ، 500) ؛
}
</script>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.