Encapsulate some commonly used JS tool functions-Not timed update (I hope everyone actively message, Feedback bug ^_^)

Source: Internet
Author: User
Tags idate setcookie tagname

/* Gorgeous--------------------------------------------------------------------------------------------------------------------- -------------Split Line */
Get element style
Gets the computed style of the computer
A single style cannot be judged.
Compatibility issues with the acquisition of compound styles
You can use properties such as BackgroundColor
Do not have spaces
Do not get the style set for: incompatible
function GetStyle (obj,attr) {
if (Obj.currentstyle) {//Standard browser
return obj.currentstyle[attr]; Gets the computed style of the computer
}else{
return getComputedStyle (obj) [attr]//ie6,7,8
// }
// }
GetStyle ()
The three-eyes shorthand
function GetStyle (obj, attr) {
Return obj.currentstyle?obj.currentstyle[attr]: getComputedStyle (obj) [attr];
}
/* Gorgeous--------------------------------------------------------------------------------------------------------------------- -------------Split Line */
Absolute position function--ignoring a lot like border
First clear the margin value of bodyd
function GetPos (obj) {
var pos = {left:0, top:0};
while (obj) {
Pos.left + = Obj.offsetleft;
Pos.top + = Obj.offsettop;
obj = obj.offsetparent;
}
return POS;
}
/* Gorgeous--------------------------------------------------------------------------------------------------------------------- -------------Split Line */
function SetStyle (obj, JSON)
{
var attr= "";

For (attr in JSON)
{
OBJ.STYLE[ATTR]=JSON[ATTR];
}
}
/* Gorgeous--------------------------------------------------------------------------------------------------------------------- -------------Split Line */
function Getbyclass (oparent, Sclass)
{
var aele=document.getelementsbytagname (' * ');
var re=new RegExp (' \\b ' +sclass+ ' \\b ', ' I ');
var i=0;
var aresult=[];

for (i=0;i<aele.length;i++)
{
if (Re.test (aele[i].classname))
{
Aresult.push (Aele[i]);
}
}

return aresult;
}
/* Gorgeous--------------------------------------------------------------------------------------------------------------------- -------------Split Line */
Uniform motion Frame-can be accurately positioned
function Domove (obj, attr, dir, Target, ENDFN) {

dir = parseint (GetStyle (obj, attr)) < target? Dir:-dir;//direction judgment

Clearinterval (Obj.timer);//Timer off before opening

Obj.timer = setinterval (function () {

var speed = parseint (GetStyle (obj, attr)) + dir;//Step

if (Speed > Target && dir > 0 | | Speed < target && dir < 0) {//Make it stop exactly
Speed = target;
}

OBJ.STYLE[ATTR] = speed + ' px ';

if (speed = = target) {
Clearinterval (Obj.timer);
ENDFN && ENDFN (); There's no execution, no execution.
}
}, 30);
}
/* Gorgeous--------------------------------------------------------------------------------------------------------------------- -------------Split Line */
jitter function
function shake (obj, attr, ENDFN) {
if (Obj.onoff) return;
Obj.onoff = true;
var pos = parseint (GetStyle (obj, attr));
var arr = []; 20,-20, 18,-18 ..... 0
var num = 0;
var timer = null;
for (var i=20; i>0; i-=2) {
Arr.push (i,-i);
}
Arr.push (0);
Clearinterval (Obj.shaketimer);
Obj.shaketimer = setinterval (function () {
OBJ.STYLE[ATTR] = pos + arr[num] + ' px ';
num++;
if (num = = arr.length) {
Clearinterval (Obj.shaketimer);
ENDFN && ENDFN ();
Obj.onoff = false;
}
}, 50);
}
/* Gorgeous--------------------------------------------------------------------------------------------------------------------- -------------Split Line */
Get time
var obody = document.body; Digital clock
SetInterval (fntime, 1000);
Fntime (); appear immediately
function Fntime () {
var myTime = new Date ();
The following are the number that are obtained
var iyear = Mytime.getfullyear ();
var imonth = Mytime.getmonth () +1;
var iDate = Mytime.getdate ();
var iweek = Mytime.getday ();
var ihours = mytime.gethours ();
var imin = Mytime.getminutes ();
var iSec = Mytime.getseconds ();
var str = ';

if (Iweek = = = 0) Iweek = ' Sunday ';
if (Iweek = = = 1) iweek = ' Monday ';
if (Iweek = = = 2) Iweek = ' Tuesday ';
if (Iweek = = = 3) Iweek = ' Wednesday ';
if (Iweek = = = 4) Iweek = ' Thursday ';
if (Iweek = = = 5) Iweek = ' Friday ';
if (Iweek = = = 6) Iweek = ' Saturday ';

str = iyear+ ' +imonth+ ' month ' +idate+ ' Day ' +iweek+ ' + totwo (ihours) + ': ' + totwo (imin) + ': ' + totwo (ISEC);

obody.innerhtml = str;
}
};
function Totwo (n) {
Return n<10? " 0 "+n:" "+n;
}
function Totwo (n) {
if (n<10) {
Return "0" +N;
}else{
Return "" +N;
// }
// }
/* Gorgeous--------------------------------------------------------------------------------------------------------------------- -------------Split Line */
Countdown
The current point in time (changing)
Future point in time (unchanged)
/*var Inow = new Date ()//var iNew = new Date (2013, 10, 27, 21,56,0); Two types of
var iNew = new Date (' November 27,2013 22:3:0 ');
var t = Math.floor ((inew-inow)/1000); milliseconds-seconds
var str = Math.floor (t/86400) + ' Day ' +math.floor (t%86400/3600) + ' when ' +math.floor (T%86400%3600/60) + ' +t%60+ ' seconds ';
alert (str);
*/
var ainp = document.getelementsbytagname (' input ');
var inow = null;
var iNew = null;
var t = 0;
var str = ';
var timer = null;

Ainp[2].onclick = function () {
INew = new Date (ainp[0].value);
Clearinterval (timer);

Timer = setinterval (function () {

Inow = new Date ();
t = Math.floor ((inew-inow)/1000);

if (t >= 0) {//Countdown to stop

str = Math.floor (t/86400) + ' Day ' +math.floor (t%86400/3600) + ' time ' +math.floor (t%86400%3600/60) + ' +t%60+ ' seconds ';

Ainp[1].value = str;

} else {

Clearinterval (timer);
}

}, 1000);
};
Distance: <input class= "T1" type= "text" value= "November 27,2016 22:3:0"/><br/>
Left: <input class= "T1" type= "text"/>
<input type= "button" value= "Start counting Down"/>
/* Gorgeous--------------------------------------------------------------------------------------------------------------------- -------------Split Line */
Gets the absolute distance of the element to the page
function GetPos (obj) {
var pos = {left:0, top:0};
while (obj) {
Pos.left + = Obj.offsetleft;
Pos.top + = Obj.offsettop;
obj = obj.offsetparent;
}
return POS;
}
/* Gorgeous--------------------------------------------------------------------------------------------------------------------- -------------Split Line */
Gets the classname of the element
function Getelementsbyclassname (parent,tagname,classname) {
var aels=parent.getelementsbytagname (tagName);
var arr=[];
for (var i = 0; i < aels.length; i++) {
if (aels[i].classname== "box") {s
Arr.push (Aels[i])
// }
var aclassname=aels[i].classname.split ("")
for (var j = 0; J < Aclassname.length; J + +) {
if (aclassname[j]==classname) {
Arr.push (Aels[i]);
Break
}
}
}
return arr;
}
/* Gorgeous--------------------------------------------------------------------------------------------------------------------- -------------Split Line */
Add Class
function AddClass (obj,classname) {
If you don't have a class case
if (obj.classname== "") {
Obj.classname=classname;
} else {
If there was a case of class
var arrclassname=obj.classname.split ("");
var _index=arrindexof (arrclassname,classname);
if (_index==-1) {
If the added class does not exist in the original class
obj.classname+= "" +classname;
}
If the class that you want to add exists in the original class
}
}
Get array element position
function Arrindexof (arr,v) {
for (var i = 0; i < arr.length; i++) {
if (arr[i]==v) {
return i;
}
}
return-1;
}
Delete Class
Removeclass (Odiv2, "box")
function Removeclass (obj,classname) {
If the original class
if (obj.classname!= "") {
var arrclassname=obj.classname.split ("")
var _index=arrindexof (arrclassname,classname);
If there is a class that we want to remove
if (_index!=-1) {
Arrclassname.splice (_index,1);
Obj.classname=arrclassname.join ("")
}
}
If the original class is not
}
}
/* Gorgeous--------------------------------------------------------------------------------------------------------------------- -------------Split Line */
Bind multiple different functions to the same event of an object
The second form of binding an event function to an element
Event name
function bind (obj, Evname, fn) {
if (Obj.addeventlistener) {
Obj.addeventlistener (Evname, FN, false);
} else {
Obj.attachevent (' on ' + evname, function () {//ie
Fn.call (obj);
});
}
}
/* Gorgeous--------------------------------------------------------------------------------------------------------------------- -------------Split Line */
Drag-and-drop package
function drag (obj) {

Obj.onmousedown = function (EV) {
var ev = EV | | Event

var disx = Ev.clientx-this.offsetleft;
var disy = ev.clienty-this.offsettop;

if (obj.setcapture) {//This time obj listens for subsequent events
Obj.setcapture ();
}

Document.onmousemove = function (EV) {
var ev = EV | | Event

Obj.style.left = ev.clientx-disx + ' px ';
Obj.style.top = Ev.clienty-disy + ' px ';
}

Document.onmouseup = function () {
Document.onmousemove = Document.onmouseup = null;
Release global capture ReleaseCapture ();
if (obj.releasecapture) {
Obj.releasecapture ();
}
}

return false;

}

}
/* Gorgeous--------------------------------------------------------------------------------------------------------------------- -------------Split Line */
Drag-and-drop of restricted range
function Drag1 (obj) {

Obj.onmousedown = function (EV) {
var ev = EV | | Event

var disx = Ev.clientx-this.offsetleft; The left/top value from the obj boundary when the mouse presses obj
var disy = ev.clienty-this.offsettop;

if (obj.setcapture) {
Obj.setcapture ();
}

Document.onmousemove = function (EV) {
var ev = EV | | Event

var L = Ev.clientx-disx; Left/top value of obj at any time during movement
var T = Ev.clienty-disy;
Limit Scope First
if (L < 0) {//modify L value to achieve magnetic adsorption
L = 0;
} else if (L > Document.documentelement.clientwidth-obj.offsetwidth) {//width of visible area-width of current obj
L = Document.documentelement.clientwidth-obj.offsetwidth;
}

if (T < 0) {
T = 0;
} else if (T > Document.documentelement.clientheight-obj.offsetheight) {
T = Document.documentelement.clientheight-obj.offsetheight;
}

Obj.style.left = L + ' px ';
Obj.style.top = T + ' px ';

}

Document.onmouseup = function () {
Document.onmousemove = Document.onmouseup = null;
if (obj.releasecapture) {
Obj.releasecapture ();
}
}

return false; To prevent the default behavior

}

}
/* Gorgeous--------------------------------------------------------------------------------------------------------------------- -------------Split Line */
Cookie manipulation
function Setcookie (key, value, T) {
var odate = new Date ();
Odate.setdate (Odate.getdate () + t);
Document.cookie = key + ' = ' + value + '; expires= ' + odate.togmtstring ();
}

function GetCookie (key) {
var arr1 = Document.cookie.split ('; ‘);
for (var i=0; i<arr1.length; i++) {
var arr2 = arr1[i].split (' = ');
if (arr2[0] = = key) {
Return decodeURI (arr2[1]);
}
}
}

function Removecookie (key) {
Setcookie (Key, ',-1);
}
/* Gorgeous--------------------------------------------------------------------------------------------------------------------- -------------Split Line */
Perfect motion Frame
function Startmove (obj, JSON, FN)
{
Clearinterval (Obj.timer);
Obj.timer=setinterval (function () {
var bstop=true;//this is the end of the campaign--all the values have arrived.
for (Var attr in JSON)
{
1. Take the current value
var icur=0;

if (attr== ' opacity ')
{
Icur=parseint (parsefloat (GetStyle (obj, attr) *100);
}
Else
{
Icur=parseint (GetStyle (obj, attr));
}

2. Calculation speed
var ispeed= (json[attr]-icur)/8;
Ispeed=ispeed>0? Math.ceil (ispeed): Math.floor (Ispeed);

3. Detection Stop
if (Icur!=json[attr])
{
Bstop=false;
}

if (attr== ' opacity ')
{
Obj.style.filter= ' alpha (opacity: ' + (icur+ispeed) + ') ';
obj.style.opacity= (icur+ispeed)/100;
}
Else
{
obj.style[attr]=icur+ispeed+ ' px ';
}
}

if (bstop)
{
Clearinterval (Obj.timer);

if (FN)
{
FN ();
}
}
}, 30)
}

Encapsulate some commonly used JS tool functions-not timed updates (I hope everyone actively message, feedback bug ^_^)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.