JavaScript implementation Div's Toggle effect example Analysis _javascript skill

This example describes the toggle effect of JavaScript implementation Div. Share to everyone for your reference. The specific analysis is as follows:

<script type= "Text/javascript" language= "JavaScript" > function $ (obj) {return document.getElementById (obj); function Togglediv () {this. Toggleid= ' Silder '; The object ID to be scaled this. Parentid= ' container '; The parent ID this.minheight=1 of the scaled object; Minimum height this.maxheight=200; Maximum height this.speed=1; Telescopic speed this.offset=0.15; Offset This.load=function () {if (this. Toggleid). style.display== ' None '//If it is hidden, open {starttoggle (' open ', this. Toggleid,this.
   Parentid,this.minheight,this.maxheight,this.speed,this.offset); else//If it is open, hide {starttoggle (' close '), this. Toggleid,this.
   Parentid,this.minheight,this.maxheight,this.speed,this.offset); }} function Starttoggle (method,toggleid,parentid,minheight,maxheight,speed,offset) {if typeof (method)!= ' Stri Ng ' | |
  Method.tolowercase () = = = ') {method= ' open ';
   } if (method.tolowercase () = = ' Open ') {var addspeed=speed+offset; var openfun=function () {var originheight=$ (Toggleid). offsetheight==0?1:$ (Toggleid). offsetheight;
    var newheight=originheight+addspeed;
    Addspeed=addspeed+offset;
     if (parseint (newheight) <parseint (MaxHeight)) {$ (Toggleid). style.height=newheight+ ' px ';
    $ (Toggleid). style.display= ' block ';
     else if (parseint (newheight) >=parseint (MaxHeight)) {$ (Toggleid). style.height=maxheight+ ' px ';
     $ (Toggleid). style.display= ' block ';
     $ (parentid). innerhtml= ' contraction ';
    Window.clearinterval (AddTimer);
  } var addtimer=window.setinterval (openfun,100);
   else if (method.tolowercase () = = ' close ') {var addspeed=speed+offset;
    var reducefunction=function () {var originheight=$ (Toggleid). offsetheight;
    var newheight=originheight-addspeed;
    Addspeed=addspeed+offset;
     if (parseint (newheight) >parseint (MinHeight)) {$ (Toggleid). style.height=newheight+ ' px ';
    $ (Toggleid). style.display= ' block ';
     } else {$ (toggleid). style.display= ' None '; $ (toggleid). Style.height= ' 1px ';
     $ (parentid). innerhtml= ' unfold ';
    Window.clearinterval (Reducetimer);
  } var reducetimer=window.setinterval (reducefunction,100);
  } function Dotoggle (obj1,obj2) {var tog=new togglediv (); Tog.
  Toggleid=obj1; Tog.
  Parentid=obj2;
  tog.minheight=5;
  tog.maxheight=110;
  tog.speed=10;
  tog.offset=3;
  Tog.load (); } </script>

Examples of usage are as follows:

<div style= "border:1px dashed blue;width:200px;" >
  
 
 

Some of the stuff in the code is superfluous or repetitive. Would like to streamline a single, but a thought, the idea of the line.

Here are some of the lessons from this exercise:

1. The offsetheight value of the Read object will be different when style.display= ' none ' and style.visibility= ' hidden '.
Style.display= ' None ' read out, will be 0, and style.visibility= ' hidden ' when reading the object loading offsetheight, such as 108.

2, the value of style.height is not integral or number type, do not forget it is a unit oh: "108px" instead of "108", and offsetheight value is 108.

3, settimeout and SetInterval

There are two ways to use them, taking settimeout as an example:

Method One: settimeout (Function,interval,args) parameter one is the function name or the anonymous function, the parameter 2 is the time interval, the parameter 3 to n is the parameter of the function called, the following example:

settimeout (function () {alert (' 1 ');},1000) settimeout (getstr,1000, ' Mcjeremy ')

Method Two: settimeout (object,function,interval) parameter one is the object called, Parameter 2 is the method in the object, and Parameter 3 is the time interval.

There's an interesting stuff:

function A ()
{
 settimeout (function () {alert (' 1 ');},0);
 Alert (' 2 ');
}

Guess what the output turns out to be?

Answer: 21, not 12 oh. This is because the JS function executes as well as other programming languages with stacks. Alert (' 1 '), because there is settimeout, so the last execution ... I don't know if I understand this right.

Finish the work!

I hope this article will help you with your JavaScript programming.