في الآونة الأخيرة ، كنت أدرس JS بشكل جيد وتعميق فهمي لفصل الكائنات من خلال حالة مربع موجه تسجيل الدخول إلى البريد الإلكتروني المزيف! لا تقل أي شيء ، دعنا نلتقط صورة أولاً:
الوظيفة: تحقيق مطابقة منتظمة لعرض المحتوى المتسق وأحداث لوحة المفاتيح وأحداث الماوس
تصميم بسيط:
<div id = "login"> <h2> Imitation Weibo login </h2> <viv> <input type = "text" placeholder = 'email/member account/number phone mobile' autocomplete = 'off' class = 'name' id = "nameInput 'maxLength = '18'> </viv> <ul id = 'efare'> <li> الرجاء تحديد نوع البريد الإلكتروني: </li> <li eLail = ""> </li> <li eLaM = "@sina.com">@sina.com </li> <li eLail = "@163.com">@163.com </li> <li email = "qq.com">@qq.com " البريد الإلكتروني = "@sina.cn">@sina.cn </li> <li eLail = "@139.com">@139.com </li> </ul> </viv>
رمز CSS:
Body ، UL ، LI ، H2 {Margin: 0 ؛ Padding: 0 ؛ Color: #CCC ؛} ul {style-style-type: none ؛}#login {width: 250px ؛ background: #fff ؛ border: 1px solid #ccc ؛ text-align: hargin ؛ H2 {background:#fa7d3c ؛ color: #fff ؛ line-height: 40px ؛ } .detail {} لا شيء ؛}#اقترح li {width: 225px ؛ الارتفاع: 25px ؛ text-align: left ؛ المؤشر: pointer ؛}#اقترح li.note {color:#989090 ؛رمز JS:
window.onload = function () {var s1 = new اقتراح () ؛ s1.init () ؛} ؛ function اقتراح () {this.oinput = document.getElementById ('nameInput') ؛ this.oul = document.getElementById ('اقتراح') ؛ this.ali = this.oul.getElementSbyTagName ('li') ؛} اقتراح. this.toblur () ؛ } ، tochange: function () {// ie: onpropertychange // standard: oninput /*كيفية الحكم على أقصر متصفح IE: var isie =!-[1 ،]* /var ie =!-[1 ،] ؛ // حفظ هذا الإشارة ، هذه المشكلة التي تشير إلى هذا = هذا ؛ if (ie) {this.oinput.onpropertyChange = function () {if (this.oinput.value == '') {this.tips () ؛ //؟ حل موقف إضافة محتوى جديد إلى li عندما تكون القيمة الخالية تحت ie ؛ } this.showul () ؛ this.tips () ؛ this.sel (1) ؛ // حدد العنصر الأول} ؛ } آخر {this.oinput.oninput = function () {this.showul () ؛ this.tips () ؛ this.sel (1) ؛ // حدد العنصر الأول}}} ، Showul: function () {this.oul.style.display = 'block' ؛ } ، toblur: function () {var this = this ؛ this.oinput.onblur = function () {this.oul.style.display = 'none' ؛ }} ، نصائح: function () {var value = this.oinput.value ؛ ] // console.log (re) ؛ // إصلاح الأخطاء: يتم مسح جميع المحتويات في وقت واحد ولا يزال مطالبة بـ (var i = 1 ؛ i <this.ali.length ؛ i ++) {this.ali [i] .style.display = 'block' ؛ } if (re.test (value)) {// تطابق الموقف بعد @ إدخال (var i = 1 ؛ i <this.ali.length ؛ i ++) {var oemail = this.ali [i] .getAttribute ('email') ؛ if (i == 1) {this.ali [i] .innerhtml = value ؛ } آخر {if (re.test (oemail)) {// يتم عرض المباراة ، وإلا إخفاء this.ali [i] .style.display = 'block' ؛ } آخر {this.ali [i] .style.display = 'none' ؛ }}}} آخر {// قبل إدخال @ (var i = 1 ؛ i <this.ali.length ؛ i ++) {var oemail = this.ali [i] .getAttribute ('email') ؛ if (! oemail) {this.ali [i] .innerhtml = value ؛ } آخر {this.ali [i] .innerhtml = value+oemail ؛ }}}}} ، sel: function (inow) {// إيقاف الفهرس الحالي var this = this ؛ // في كل مرة تقوم فيها بتغيير نوع إعادة الضبط ، لن يتم تكراره لـ (var i = 1 ؛ i <this.ali.length ؛ i ++) {this.ali [i] .className = 'item' ؛ } if (this.oinput.value == '') {this.ali [inow] .className = 'item' ؛ } آخر {this.ali [inow] .className = 'Active' ؛ } لـ (var i = 1 ؛ i <this.ali.length ؛ i ++) {this.ali [i] .index = i ؛ this.ali [i] .onmouseover = function () {for (var i = 1 ؛ i <this.ali.length ؛ i ++) {this.ali [i] .className = 'item' ؛ } this.className = 'Active' ؛ inow = this.index ؛ // الفهرس الحالي} ؛ // mouse click event: this.ali [i] .onmousedown = function () {this.oinput.value = this.innerhtml ؛ }} // لوحة المفاتيح: this.oinput.onkeydown = function (e) {var e = e || window.event ؛ if ( } آخر {inow-- ؛ } لـ (var i = 1 ؛ i <this.ali.length ؛ i ++) {this.ali [i] .className = 'item' ؛ } this.ali [inow] .className = 'Active' ؛ } آخر if ( } آخر {inow ++ ؛ } لـ (var i = 1 ؛ i <this.ali.length ؛ i ++) {this.ali [i] .className = 'item' ؛ } this.ali [inow] .className = 'Active' ؛ } if if ( this.oinput.blur () ؛ // Trigger act the Blur بعد الدخول وإخفاء طبقة UL}}}}نحن بحاجة إلى التعامل مع فروع متعددة وتفاصيل صغيرة. نشعر أيضًا أن هذا غالبًا ما يتم مواجهته في مشاكل موجهة نحو الكائن. من خلال هذه الحالة ، لدينا فهم جيد لهذا.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.