JavaScript เป็นภาษาสคริปต์ที่แท้จริงซึ่งเป็นภาษาแบบไดนามิกที่อ่อนแอและเป็นต้นแบบที่มีประเภทการสนับสนุนในตัว ล่ามเรียกว่าเครื่องยนต์ JavaScript มันเป็นส่วนหนึ่งของเบราว์เซอร์และใช้กันอย่างแพร่หลายในภาษาสคริปต์ของลูกค้า มันถูกใช้ครั้งแรกในหน้าเว็บ HTML (แอปพลิเคชันภายใต้ภาษามาร์กอัปสากลมาตรฐาน) หน้าเว็บเพื่อเพิ่มฟังก์ชั่นแบบไดนามิกในหน้าเว็บ HTML
บทความนี้ได้รวบรวม 5 รหัสจาวาสคริปต์ที่ใช้งานได้สำหรับทุกคนเพื่ออำนวยความสะดวกในการพัฒนา
1. ตรวจสอบว่าวันที่ถูกต้องหรือไม่
ฟังก์ชั่นวันที่ที่รวมอยู่ในจาวาสคริปต์ยังคงง่ายเกินไปและเป็นการยากที่จะตอบสนองความต้องการของการแยกวิเคราะห์และตัดสินรูปแบบวันที่ที่แตกต่างกันในโครงการจริง JQuery ยังมีห้องสมุดบุคคลที่สามเพื่อทำการประมวลผลที่เกี่ยวข้องกับวันที่ง่าย แต่บางครั้งคุณอาจต้องการฟังก์ชั่นที่ง่ายมากโดยไม่ต้องแนะนำห้องสมุดบุคคลที่สามขนาดใหญ่ ในเวลานี้คุณสามารถใช้รหัสการตรวจสอบวันที่ต่อไปนี้ซึ่งช่วยให้คุณสามารถปรับแต่งรูปแบบวันที่และตรวจสอบความถูกต้องของวันที่
ฟังก์ชั่น isValidDate (ค่า userFormat) {// ตั้งค่ารูปแบบเริ่มต้นหากรูปแบบไม่ได้ให้ userFormat = userFormat || 'mm/dd/yyyy'; // ค้นหาตัวคั่นที่กำหนดเองโดยไม่รวม // เดือนตัวอักษรวันและปีตัวคั่น var delimiter =/[มม. เหมือนกัน/. exec(userformat) [0]; // สร้างอาร์เรย์ที่มีเดือนวันและปี // ดังนั้นเราจึงทราบลำดับรูปแบบโดยดัชนี var theformat = userformat.split (คั่น); // สร้างอาร์เรย์จากวันที่ผู้ใช้ var thedate = value.split (ตัวคั่น); ฟังก์ชั่น iSdate (วันที่, รูปแบบ) {var m, d, y, i = 0, len = format.length, f; สำหรับ (i; i <len; i ++) {f = รูปแบบ [i]; if (/m/.test(f)) m = วันที่ [i]; if (/d/.test(f)) d = วันที่ [i]; ถ้า (/y/.test(f)) y = วันที่ [i]; } return (m> 0 && m <13 && y && y.length === 4 && d> 0 && // ตรวจสอบว่าเป็นวันที่ถูกต้องของเดือน d <= (วันที่ใหม่ (y, m, 0)). getDate ()); } return iSdate (thedate, theformat);}วิธีใช้:
การโทรต่อไปนี้ส่งคืนเท็จเพราะไม่มี 31 วันในเดือนพฤศจิกายน
isvaliddate ('DD-MM-YYYY', '31/11/2012 ')
2. รับความกว้างสูงสุดหรือความสูงของชุดองค์ประกอบ
ฟังก์ชั่นต่อไปนี้มีประโยชน์มากสำหรับนักพัฒนาที่ต้องการดำเนินการเลย์เอาต์แบบไดนามิก
var getMaxHeight = function ($ elms) {var maxheight = 0; $ elms.each (function () {// ในบางกรณีคุณอาจต้องการใช้ outerheight () แทนความสูง var = $ (นี่) .Height (); ถ้า (ความสูง> maxHeight) {maxHeight = ความสูง;}}); ส่งคืน maxheight;};วิธีใช้:
$ (องค์ประกอบ) .Height (getMaxHeight ($ (องค์ประกอบ)));
3. ไฮไลต์ข้อความ
มีไลบรารีของบุคคลที่สามจำนวนมากของ jQuery ที่สามารถใช้ฟังก์ชั่นของการไฮไลต์ข้อความ แต่ฉันชอบที่จะใช้รหัส JavaScript ชิ้นเล็ก ๆ ต่อไปนี้เพื่อใช้ฟังก์ชั่นนี้ มันสั้นมากและสามารถปรับเปลี่ยนได้อย่างยืดหยุ่นตามความต้องการของฉันและคุณสามารถกำหนดสไตล์การเน้นด้วยตัวเอง ฟังก์ชั่นสองฟังก์ชั่นต่อไปนี้สามารถช่วยคุณสร้างปลั๊กอินไฮไลต์ข้อความของคุณเอง
ฟังก์ชั่นไฮไลต์ (ข้อความ, คำ, แท็ก) {// แท็กเริ่มต้นหากไม่มีแท็กมีให้แท็ก = แท็ก || 'ช่วง'; var i, len = words.length, re; สำหรับ (i = 0; i <len; i ++) {// global regex เพื่อเน้นการจับคู่ทั้งหมด RE = ใหม่ regexp (คำ [i], 'g'); if (re.test (text)) {text = text.replace (re, '<' + tag + '> $ & </' + tag + '>'); }} ส่งคืนข้อความ;}คุณจะต้องใช้ฟังก์ชั่นที่ไม่มีแสงสว่าง:
ฟังก์ชั่น unhehlight (ข้อความ, แท็ก) {// แท็กเริ่มต้นหากไม่มีแท็กมีให้แท็ก = แท็ก || 'ช่วง'; var re = new regexp ('(<'+tag+'.+?> | <//'+tag+'>)', 'g'); return text.replace (re, '');}วิธีใช้:
$ ('p'). html (ไฮไลต์ ($ ('p'). html (), // ข้อความ ['foo', 'bar', 'baz', 'Hello World'], // รายการคำหรือวลีที่เน้น4. เอฟเฟกต์การเคลื่อนไหวของข้อความ
บางครั้งคุณต้องการเพิ่มการเคลื่อนไหวในย่อหน้าของข้อความของคุณเพื่อให้ทุกคำสามารถเคลื่อนไหวได้ คุณสามารถใช้รหัสปลั๊กอิน jQuery ต่อไปนี้เพื่อให้ได้เอฟเฟกต์นี้ แน่นอนว่าคุณต้องรวมรูปแบบการเปลี่ยนแปลง CSS3 เพื่อให้ได้ผลลัพธ์ที่ดีขึ้น
$ .fn.animatetext = ฟังก์ชั่น (ล่าช้า, klass) {var text = this.text (); ตัวอักษร var = text.split (''); return this.each (function () {var $ this = $ (this); $ this.html (text.replace (/./ g, '<span> $ & </span>')); $ this.find ('span.letter') แต่ละ (i, el) {settimeout -วิธีใช้:
$ ('p'). animatetext (15, 'foo');
5. ซ่อนองค์ประกอบทีละตัว
ปลั๊กอิน jQuery ต่อไปนี้สามารถซ่อนกลุ่มขององค์ประกอบทีละตัวตามความยาวขั้นตอน (เวลาช่วงเวลา) ที่คุณตั้งค่า ใช้ในการโหลดรายการรายการรายการใหม่สามารถบรรลุผลลัพธ์ที่ดี
$ .FN.FADEALL = FUNCTION (OPS) {var O = $ .EXTEND ({delay: 500, // การหน่วงเวลาระหว่างความเร็วองค์ประกอบ: 500, // ความสะดวกในการเคลื่อนไหวง่าย: 'สวิง' // อื่น ๆ ต้องผ่อนคลายปลั๊กอิน} var $ el = this; สำหรับ (var i = 0, d = 0, l = $ el.length; i <l; i ++, d+= o.delay) {$ el.eq (i) .delay (d) .fadein (O.Speed, O.Ease); } return $ el;}วิธีใช้:
$ (องค์ประกอบ) .fadeall ({ล่าช้า: 300, ความเร็ว: 300});
ข้างต้นเป็นเพียงส่วนเล็ก ๆ ของตัวอย่างโค้ดจาวาสคริปต์ที่ใช้งานได้เหล่านั้นและฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript