เมื่อเร็ว ๆ นี้ฉันได้ศึกษา JS ได้ดีและความเข้าใจที่ลึกซึ้งของฉันเกี่ยวกับวัตถุที่มุ่งเน้นผ่านกรณีของกล่องพรอมต์ล็อกอินอีเมลปลอม! อย่าพูดอะไรมาถ่ายรูปกันเถอะ:
ฟังก์ชั่น: ตระหนักถึงการจับคู่ปกติเพื่อแสดงเนื้อหาที่สอดคล้องกันเหตุการณ์แป้นพิมพ์และเหตุการณ์เมาส์
เลย์เอาต์ง่าย ๆ :
<div id = "เข้าสู่ระบบ"> <h2> การเลียนแบบ Weibo ล็อกอิน </h2> <div> <อินพุตประเภท = "ข้อความ" placeholder = 'อีเมล/บัญชีสมาชิก/หมายเลขโทรศัพท์มือถือ' Autocomplete = 'ปิด' class = 'name' id = 'nameInput' maxlength = '18 '> </div><ul id = 'แนะนำ'> <li> โปรดเลือกประเภทอีเมล: </li> <li eMail = ""> </li> <lie email = "@sina.com">@sina.com </li> <lie email = "@163.com">@163.com </li> email = "@sina.cn">@sina.cn </li> <li email = "@139.com">@139.com </li></ul> </div>
รหัส CSS:
ร่างกาย, ul, li, h2 {margin: 0; padding: 0; color: #ccc;} ul {list-style-type: none;}#ล็อกอิน {ความกว้าง: 250px; พื้นหลัง: #FFF; ชายแดน: 1PX SOLID #CCC; TEXT-ALIGN: ศูนย์กลาง; H2 {พื้นหลัง:#fa7d3c; color: #fff; line-height: 40px; } .detail {}. รายละเอียดอินพุต {width: 220px; ความสูง: 30px; margin: 10px auto; border: 1px solid #ccc; padding-left: 5px;} #แนะนำ {width: 225px; ความสูง: auto; ไม่มี;}#แนะนำ li {width: 225px; ความสูง: 25px; text-allign: left; Cursor: pointer;}#แนะนำ li.note {color:#989090;}#แนะนำ li.active {พื้นหลัง: #EEE;}รหัส JS:
window.onload = function () {var s1 = ใหม่แนะนำ (); s1.init ();}; ฟังก์ชั่นแนะนำ () {this.oinput = document.getElementById ('nameInput'); this.oul = document.getElementById ('แนะนำ'); this.ali = this.oul.getElementsByTagname ('li');} แนะนำ. prototype = {init: function () {this.tochange (); this.toblur (); }, Tochange: function () {// ie: onPropertyChange // มาตรฐาน: oninput /*วิธีตัดสินเบราว์เซอร์ที่สั้นที่สุด: var isie =!-[1,]* /var ie =!-[1,]; // บันทึกการชี้นี้ปัญหาการชี้นี้ var this = this; if (เช่น) {this.oinput.onPropertyChange = function () {ถ้า (this.oinput.value == '') {this.tips (); //? } this.showul (); this.tips (); this.sel (1); // เลือกรายการแรก}; } else {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; // การจับคู่ปกติ var re = new regexp ('@'+value.substring (value.indexof ('@')+1)+''); // 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 ('อีเมล'); if (i == 1) {this.ali [i] .innerhtml = ค่า; } else {if (re.test (oemail)) {// การจับคู่จะปรากฏขึ้นมิฉะนั้นซ่อนสิ่งนี้ ali [i] .style.display = 'block'; } else {this.ali [i] .style.display = 'ไม่มี'; }}}} else {// ก่อน @ ถูกป้อนสำหรับ (var i = 1; i <this.ali.length; i ++) {var oemail = this.ali [i] .getAttribute ('อีเมล'); if (! oemail) {this.ali [i] .innerhtml = ค่า; } else {this.ali [i] .innerhtml = value+oemail; }}}}}, sel: function (inow) {// หยุดชั่วคราวดัชนีปัจจุบัน var this = this; // ทุกครั้งที่คุณเปลี่ยนประเภทการรีเซ็ตมันจะไม่ถูกทำซ้ำสำหรับ (var i = 1; i <this.ali.length; i ++) {this.ali [i] .className = 'รายการ'; } if (this.oinput.value == '') {this.ali [inow] .className = 'รายการ'; } else {this.ali [inow] .className = 'active'; } สำหรับ (var i = 1; i <this.ali.length; i ++) {this.ali [i] .index = i; this.ali [i] .onmouseover = function () {สำหรับ (var i = 1; i <this.ali.length; i ++) {this.ali [i] .classname = 'item'; } this.className = 'active'; INOW = this.index; // ดัชนีปัจจุบัน}; // เมาส์คลิกเหตุการณ์: this.ali [i] .onmousedown = function () {this.oinput.value = this.innerhtml; }} // เหตุการณ์แป้นพิมพ์: this.oinput.onkeydown = function (e) {var e = e || window.event; if (e.keCyde == 38) {// on if (inow == 1) {inow = this.ali.length -1; } else {inow--; } สำหรับ (var i = 1; i <this.ali.length; i ++) {this.ali [i] .className = 'รายการ'; } this.ali [inow] .className = 'active'; } อื่นถ้า (e.keycode == 40) {// ถ้า (inow == this.ali.length-1) {inow = 1; } else {inow ++; } สำหรับ (var i = 1; i <this.ali.length; i ++) {this.ali [i] .className = 'รายการ'; } this.ali [inow] .className = 'active'; } อื่นถ้า (e.keycode == 13) {// ป้อน this.oinput.value = this.ali [inow] .innerhtml; this.oinput.blur (); // ทริกเกอร์เหตุการณ์เบลอหลังจากเข้าและซ่อนเลเยอร์ ul}}}}เราจำเป็นต้องจัดการกับหลายสาขาและรายละเอียดเล็ก ๆ น้อย ๆ นอกจากนี้เรายังรู้สึกว่าสิ่งนี้มักพบในปัญหาเชิงวัตถุ ผ่านกรณีนี้เรามีความเข้าใจที่ดีเกี่ยวกับเรื่องนี้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น