JavaScript is a literal scripting language, which is a dynamic, weak, prototype-based language with built-in support types. Its interpreter is called the JavaScript engine. It is part of the browser and is widely used in the client scripting language. It was first used on HTML (an application under the standard universal markup language) web pages to add dynamic functions to HTML web pages.
This article has compiled 5 practical JavaScript code for everyone to facilitate development.
1. Determine whether the date is valid
The date function included in JavaScript is still too simple, and it is difficult to meet the needs of parsing and judging different date formats in real projects. JQuery also has third-party libraries to make date-related processing simple, but sometimes you may just need a very simple function without introducing a huge third-party library. At this time, you can use the following date verification code, which allows you to customize the date format and verify the validity of the date.
function isValidDate(value, userFormat) { // Set default format if format is not provided userFormat = userFormat || 'mm/dd/yyyy'; // Find custom delimiter by excluding // month, day and year characters var delimiter = /[^mdy]/.exec(userFormat)[0]; // Create an array with month, day and year // so we know the format order by index var theFormat = userFormat.split(delimiter); // Create array from user date var theDate = value.split(delimiter); function isDate(date, format) { var m, d, y, i = 0, len = format.length, f; for (i; i < len; i++) { f = format[i]; if (/m/.test(f)) m = date[i]; if (/d/.test(f)) d = date[i]; if (/y/.test(f)) y = date[i]; } return ( m > 0 && m < 13 && y && y.length === 4 && d > 0 && // Check if it's a valid day of the month d <= (new Date(y, m, 0)).getDate() ); } return isDate(theDate, theFormat);}How to use:
The following call returns false because there are no 31 days in November
isValidDate('dd-mm-yyyy', '31/11/2012')
2. Get the maximum width or height of a set of elements
The following function is very useful for developers who need to perform dynamic layout.
var getMaxHeight = function ($elms) { var maxHeight = 0; $elms.each(function () { // In some cases you may want to use outerHeight() instead var height = $(this).height(); if (height > maxHeight) { maxHeight = height; } }); return maxHeight;};How to use:
$(elements).height( getMaxHeight($(elements)) );
3. Highlight text
There are many third-party libraries of JQuery that can implement the function of highlighting text, but I prefer to use the following small piece of JavaScript code to implement this function. It is very short and can be flexibly modified according to my needs, and you can define the highlighting style yourself. The following two functions can help you create your own text highlighting plugin.
function highlight(text, words, tag) { // Default tag if no tag is provided tag = tag || 'span'; var i, len = words.length, re; for (i = 0; i < len; i++) { // Global regex to highlight all matches re = new RegExp(words[i], 'g'); if (re.test(text)) { text = text.replace(re, '<'+ tag +'>$&</'+ tag +'>'); } } return text;}You will also need to un-highlighted functions:
function unhighlight(text, tag) { // Default tag if no tag is provided tag = tag || 'span'; var re = new RegExp('(<'+ tag +'.+?>|<//'+ tag +'>)', 'g'); return text.replace(re, '');}How to use:
$('p').html( highlight( $('p').html(), // the text ['foo', 'bar', 'baz', 'hello world'], // list of words or phrases to highlight 'strong' // custom tag));4. Text Motion Effect
Sometimes you want to add motion to a paragraph of your text so that every word can move. You can use the following jQuery plug-in code to achieve this effect. Of course you need to combine a CSS3 transition style to achieve better results.
$.fn.animateText = function(delay, klass) { var text = this.text(); var letters = text.split(''); return this.each(function(){ var $this = $(this); $this.html(text.replace(/./g, '<span>$&</span>')); $this.find('span.letter').each(function(i, el){ setTimeout(function(){ $(el).addClass(klass); }, delay * i); }); }); });How to use:
$('p').animateText(15, 'foo');
5. Hide elements one by one
The following jQuery plug-in can hide a group of elements one by one according to the step length (interval time) you set. Used in reloading list elements can achieve good results.
$.fn.fadeAll = function (ops) { var o = $.extend({ delay: 500, // delay between elements speed: 500, // animation speed ease: 'swing' // other require easing plugin }, ops); var $el = this; for (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;}How to use:
$(elements).fadeAll({ delay: 300, speed: 300 });
The above is just a small part of those practical JavaScript code snippets, and I hope it will be helpful for everyone to learn JavaScript programming.