JavaScript is a literal translation script language, a dynamic type, a weak type, a prototype based language, and a built-in support type. Its interpreter, known as the JavaScript engine, is widely used as a scripting language for clients, and is used in HTML (an application under standard Universal Markup Language) to add dynamic functionality to HTML Web pages.
This article for everyone to organize 5 of practical JavaScript code to facilitate the development of everyone.
1. Determine whether the date is valid
The date function in JavaScript is too simple to meet the needs of parsing and judging different date formats in real projects. jquery also has some third-party libraries to make date-related processing easier, but sometimes you might want a very simple function instead of introducing a large third-party library. At this point, you can use the following date to verify the 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 provide D 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 (de
LIMITER);
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 < && 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 November does not have 31 days
Isvaliddate (' dd-mm-yyyy ', ' 31/11/2012 ')
2. Gets the maximum width or height of a group of elements
The following function is useful for developers who need to perform dynamic typesetting.
var getmaxheight = function ($elms) {
var maxheight = 0;
$elms. Each (the function () {
//In some cases your 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 a lot of jquery's third-party libraries that can implement highlighted text, but I prefer to use this small piece of JavaScript code to implement this feature, it is very short, and can be adapted to my needs to be flexible, and can define the highlighted style. The following two functions can help you create your own text highlighting plug-ins.
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 + ' class= ' highlight ">$&</' + tag + ' > ');
}
}
return text;
You will also need to cancel the highlighted function:
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 PHR ASEs to highlight
' strong '//custom tag)
;
4. Text Dynamic effect
Sometimes you want to give your text a bit more action, so that each word moves. You can use the jquery plug-in code below 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 class= "letter" >$&</span> "));
$this. Find (' Span.letter '). Each (function (i, EL) {
settimeout (function () {$ (EL). addclass (Klass);}, delay * i);
});
});
};
How to use:
$ (' P '). Animatetext (' foo ');
5. Hide elements Individually
The following jquery plugin can hide a set of elements individually based on the step size (interval) you set. Used in the reload of list elements, you can achieve good results.
$.fn.fadeall = function (OPS) {
var o = $.extend ({
delay:500,//delay between elements speed:500
,//Animat Ion 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});
These are just a few of the practical JavaScript code snippets that would help you learn about JavaScript programming.