js기초day06

    
    
    



    
    






    //1.    
    var btn1 = document.getElementById('btn1');
    var btn2 = document.getElementById('btn2');

    //2.     
    var box = document.getElementById('box');

    //3.         
    btn1.onclick = function () {
        //1.     
        var odiv = document.createElement('div');
        //2.   box 
        box.appendChild(odiv);

        //    
        var r = parseInt(Math.random() * 256);
        var g = parseInt(Math.random() * 256);
        var b = parseInt(Math.random() * 256);

        //         0  255
        odiv.style.backgroundColor = 'rgb('+ r +', '+ g + ', '+ b +')';
        //     
        //   
        var count = 3;
        //  
        var row = 0;
        //  
        var col = 0;
        //3.  box     
        var divList = box.children;
        //4.  
        for(var i = 0; i< divList.length ; i++){
            //4.1         
            var div = divList[i];
            //4.2        
            row = parseInt(i / count);
            col = i % count;

            //4.3      x y
            //x =    * (   +     )
            var x = col * (100 + 10);
            //y =   * (   +     );
            var y = row * (100 + 10);

            //4.4   left top
            div.style.left = x + 'px';
            div.style.top = y + 'px';

        }
    }

    //4.         
    btn2.onclick = function () {
        //1.      div  
        var btnList = box.children;

        //2.           
        var lastIndex = btnList.length - 1;

        //           
        if(lastIndex < 0){
            alert('     ,     ')
            return;
        }
        //3.         
        var lastDiv= btnList[lastIndex];

        //4.         
        box.removeChild(lastDiv);
    }

    
    
    




       :    <button>  </button>
    <ul>
    </ul>
</div>

<script>
    var box = document.getElementById('box');
    //1.       
    var text = box.children[0];
    var btn = box.children[1];
    var oul = box.children[2];

    //2.         
    btn.onclick = function () {
        //1.  li
        var li =document.createElement('li');
        //2. li   ul 
//        oul.appendChild(li);
        oul.insertBefore(li , oul.children[0]);

        //3.      ,    li
        //console.log(text.value);
        li.innerHTML = text.value;
        //4.      
        text.value = '';
        //5.  a  
        var oa = document.createElement('a');
        oa.innerHTML = '  ';
        //6.   li 
        li.appendChild(oa);

        //7. a        
        oa.onclick = function () {
            //  a   li
            var li = oa.parentNode;
            //  a   li
            oul.removeChild(li); //        
        }
    }
    
</script>

</code></pre> 
 <h2> .    </h2> 
 <p>1       </p> 
 <pre><code>var myDate = new Date();
</code></pre> 
 <p>2 Date()           </p> 
 <pre><code>console.log(myDate);
</code></pre> 
 <p>3 myDate.getDate()   Date              (1 ~ 31)。</p> 
 <p>4 myDate.getDay()  Date             (0 ~ 6), 0     , 6     </p> 
 <p>5 myDate.getMonth()  Date        (0 ~ 11)。 0（  ） 11（   ）</p> 
 <p>6 myDate.getFullYear()  Date            。</p> 
 <p>7 myDate.getHours()   Date       (0 ~ 23)。</p> 
 <p>8 myDate.getMinutes()   Date       (0 ~ 59)。</p> 
 <p>9 myDate.getSeconds()   Date       (0 ~ 59)。</p> 
 <p>10 myDate.getMilliseconds()   Date      (0 ~ 999)。</p> 
 <p>11 myDate.getTime()   1970   1   1        。   </p> 
 <p>12 myDate.valueOf()   Date       。</p> 
 <h2> .    </h2> 
 <pre><code><div id="clock">
    <div id="hour"/>
    <div id="minute"/>
    <div id="second"/>
</div>

<script>
    //1.    
    var hour = document.getElementById('hour');
    var minute = document.getElementById('minute');
    var second = document.getElementById('second');

    //2.     
    function changeTime() {
        //2.1       
        var date = new Date();

        //2.2      
        var ms = date.getMilliseconds();//     
        //      
        var s = date.getSeconds() + ms/1000; //   
        var m = date.getMinutes();//    

        //       ,    
        var h = date.getHours() + m / 60; //    

        //console.log(h, m, s);

        //2.3    
        //          1  ，       = 360 / 12 * 5 -> 6
        second.style.transform = 'rotate('+ 6 * s+'deg)';

        //          1  ，       = 360 / 12 * 5 -> 6
        minute.style.transform = 'rotate('+ 6 * m +'deg)';

        //          1  ，       360 / 12 = 30
        hour.style.transform =  'rotate('+ 30 * h +'deg)'

    }

    var timer = setInterval(changeTime, 100);


</script>

</code></pre> 
 <h2> .js    </h2> 
 <ul> 
  <li>js   JavaScript           ：   、  、  、  ，  。</li> 
  <li>  JavaScript  ，             。</li> 
  <li> <code>  </code>      。     ，               (name : value)    。       ：</li> 
  <li>  : js                 {key: value},         </li> 
  <li>  : js          ,             </li> 
 </ul> 
 <h4>1.  js  </h4> 
 <pre><code>var person = {
        name:'  ',
        age:20,
        score:99
    }
</code></pre> 
 <h4>2.  js   </h4> 
 <p>a.  .   </p> 
 <pre><code>person.name; //       
</code></pre> 
 <p>b.  [   ]</p> 
 <pre><code>person['age']; //    20
</code></pre> 
 <h4>3. js    </h4> 
 <pre><code>person.name = '  '
person['age']= 33;
</code></pre> 
 <h4>4.json</h4> 
 <ul> 
  <li>json        ,         </li> 
  <li>js  :             ,          , {key:value}</li> 
  <li>JSON   JS          ，          JS      ，        。</li> 
  <li>json   ，[]       。 {}      </li> 
 </ul> 
 <h4>5.js json    </h4> 
 <ul> 
  <li>js      JSON    ，   JSON.stringify()   ：</li> 
 </ul> 
 <pre><code>var json = JSON.stringify({a: 'Hello', b: 'World'});
//    '{"a": "Hello", "b": "World"}'
</code></pre> 
 <ul> 
  <li>JSON    js  ，   JSON.parse()   ：</li> 
 </ul> 
 <pre><code>var obj = JSON.parse('{"a": "Hello", "b": "World"}');
//    {a: 'Hello', b: 'World'}
</code></pre> 
 <h2> .js  dom  </h2> 
 <p>  js     ，    </p> 
 <pre><code>
<div id="box"/>

<script>
    //  box
    var box = document.getElementById('box');

    //1.  , js  
    var data = {
        width:'100px',
        height:'100px',
        background:'red',
        border:'10px solid #ccc'
    };

    //2.               
//    box.style.width = data.width;
//    box.style.height = data.height;
//    box.style.background = data.background;
//    box.style.border = data.border;

    //
    //3.dom   
    //    box.style['width'] = data.width;
//    box.style['height'] = data.height;
//    box.style['background'] = data.background;
//    box.style['border'] = data.border;

    //4.js    
    //for...in   for  
    //  ：     ，  data       ，     key
    for(var key in data){
        //1.  key
        //console.log(key, typeof key);
        //2.    
        //console.log(data[key]);

        //   ： data.key         ，            ，            
        console.log(data.key); //key       
        //box.style.key = data.key; //    

        //3.  [] ,      
        box.style[key] = data[key];

    }

</code></pre> 
 <h2> .js      </h2> 
 <pre><code class="html"><div id="box"></div>
<script>
    //js    
    //        ul,        js  
    var data = {
        box:[
            {name:'  ',age:20, sex:' '},
            {name:'  ',age:30, sex:' '},
            {name:'  ',age:40, sex:' '}
        ]
    }

    //1.  box
    var box = document.getElementById('box');
    //2.   ，    
    var arr = data.box;
    console.log(arr);

    //3.    ，          ul
    for(var i = 0; i < arr.length; i++ ){
        //1.      
        var dic = arr[i];
        //2.  ul
        var oul = document.createElement('ul');
        //ul   box
        box.appendChild(oul);

        //3.  js  ，          li
        for(var key in dic){
            //3.1   li
            var li = document.createElement('li');
            oul.appendChild(li);

            //3.2   li  
            li.innerText = key + ':'+ dic[key];
        }
    }
</script>
</code></pre> 
 <h2> .        </h2> 
 <p>1.setAttribute()    </p> 
 <ul> 
  <li>setAttribute(name,value)</li> 
  <li>name:       ,      </li> 
  <li>value:    ,      </li> 
  <li>     </li> 
  <li>  :             ,         ,        </li> 
 </ul> 
 <pre><code>//  box
var box = document.getElementById('box');
var item = box.setAttribute('name', '  ');
box.setAttribute('name', '  ');
console.log(item);
</code></pre> 
 <p>2.getAttribute()         </p> 
 <ul> 
  <li>  :    </li> 
  <li>   :     </li> 
 </ul> 
 <pre><code>var item2 = box.getAttribute('name');
console.log(item2);
</code></pre> 
 <h2> .event  </h2> 
 <h4>1.      </h4> 
 <ul> 
  <li><p>           ，                   。</p></li> 
  <li><p>Event          ，            、       、     、       。</p></li> 
  <li><p>           ，             ！</p></li> 
  <li><p>clientX         ，         。</p></li> 
  <li><p>clientY         ，         。</p></li> 
 </ul> 
 <pre><code> //  ：           ，             
    //event  ，       ，        event  
   box.onclick = function (event) {
        //alert(111);
        //  box     
        //event.clientX           x  
        console.log(event.clientX);
        //event.clientY           y  
        console.log(event.clientY);
}
</code></pre> 
 <h4>2.           </h4> 
 <ul> 
  <li>event         ie9+   opera   </li> 
  <li>window.event    ie   ，   opera    ,     </li> 
 </ul> 
 <pre><code>document.onclick = function (event) {
 
//        console.log(event.clientX);
//        console.log(event.clientY);

//        console.log(window.event.clientX);
//        console.log(window.event.clientY);

        //    
        var eve = event || window.event;
        console.log(eve.clientX);
        console.log(eve.clientY);
    }

</code></pre> 
 <h2> .offset  </h2> 
 <ul> 
  <li><p>box.offsetWidth         。offsetWidth = width + border*2 + padding * 2</p></li> 
  <li><p>box.offsetHeight         。offsetHeight = height + border*2 + padding * 2</p></li> 
  <li><p>  ：   style.width         ，            ，      </p></li> 
  <li><p>box.offsetLeft               </p></li> 
  <li><p>box.offsetTop               </p></li> 
  <li><p>  ：            ,            ,    ,             </p></li> 
 </ul> 
 <h2>  .    </h2> 
 <pre><code><style>
        *{
            margin: 0;
            padding: 0;
        }
        #ospan{
            width: 96px;
            height: 80px;
            background: url("images/110.gif");

            position: absolute;
            left: 0;
            top: 0;
        }
        
    </style>
</code></pre> 
 <pre><code><span id="ospan"/>

<script>
    //1.  span
    var ospan = document.getElementById('ospan');

    //  ，     ，    
    var beginX = 0;
    var beginY = 0;

    //       
    var endX = 0;
    var endY = 0;

    //2.    
    document.onmousemove = function (event) {
        var eve = event || window.event;

        //     
//        var x = eve.clientX;
//        var y = eve.clientY;


        //  span left top
//        ospan.style.left = x + 'px';
//        ospan.style.top = y + 'px';

        //      
        endX = eve.clientX;
        endY = eve.clientY;
    }

    //   ，     
    setInterval(function () {
        //    
        beginX = beginX + (endX - beginX) / 10;
        beginY = beginY + (endY - beginY) / 10;

        //  span left top
        ospan.style.left = beginX + 'px';
        ospan.style.top = beginY + 'px';

    }, 40);
</code></pre> 
 <h2>  .    </h2> 
 <pre><code class="js">/*
     2    
           
     1.        , x , y     
     2.                   
                 ，     left top  

       left top      box      
    */
    //1.  box
    var box = document.getElementById('box');

    //2.    ，       
    box.onmousedown = function (event) {
        //  :         ,          
        var eve = event || window.event;
        //console.log(eve);

        //     ，                  =    x   -            
        var x = eve.clientX - box.offsetLeft;
        //     ，                  =    y   -            
        var y = eve.clientY - box.offsetTop;

        //      ，              ，     
        document.onmousemove = function (event) {
            var eve = event || window.event;

            //  :            
            //   left = x -      *0.5;
            //   top = y -      * 0.5;

            //       ，     box
//            box.style.left = eve.clientX -box.offsetWidth * 0.5  + 'px';
//            box.style.top = eve.clientY - box.offsetHeight *0.5  + 'px';
            //console.log(eve);

            box.style.left = eve.clientX - x  + 'px';
            box.style.top = eve.clientY - y  + 'px';
        }
    }

    //      
    box.onmouseup = function () {
        //  onmousemove   
        document.onmousemove = null;
    }
</code></pre> 
 <h2>  .    </h2> 
 <ul> 
  <li>window.onscroll               </li> 
  <li>      ，          。   </li> 
  <li>document.documentElement.scrollTop   ie7+ ,     ,   , opera,    safari</li> 
  <li>document.body.scrollTop   ie7  , safari,     ,   , opera</li> 
 </ul> 
 <pre><code class="js">//    
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollT);
</code></pre> 
 <h2>  .    </h2> 
 <pre><code class="js">//             
//1.  box
    var box = document.getElementById('box');
    //2.      
    var btnList = box.getElementsByTagName('button');

    //3.  ，           
    for(var i = 0; i < btnList.length; i++ ){
        btnList[i].style.backgroundColor = 'red';
    }
</code></pre> 
 <hr> 
 <pre><code class="js">//1.  box
     var box = document.getElementById('box');
     //2.      
     var btnList = box.getElementsByTagName('button');

    //       
    //  ：      
    function setColor(obj) {
        obj.style.backgroundColor = 'red';
    }


     //3.  ，           
    for(var i = 0; i < btnList.length; i++ ){
        setColor(btnList[i]);
     }
</code></pre> 
 <hr> 
 <pre><code class="js">//1.  box
     var box = document.getElementById('box');
     //2.      
     var btnList = box.getElementsByTagName('button');

    //       
    //  ：      
    function setColor(obj) {
        obj.style.backgroundColor = 'red';
    }


     //3.  ，           
    //    
    /*
      ：btnList        
      ：fn     
     */
    function each(btnList, fn) {
        for(var i = 0; i < btnList.length; i++ ){
            fn(btnList[i]);
        }
    }

    each(btnList, setColor);

</code></pre> 
 <hr> 
 <pre><code class="js">
//1.  box
     var box = document.getElementById('box');
     //2.      
     var btnList = box.getElementsByTagName('button');

    //       
     //3.  ，           

    //    
    /*
      ：btnList        
      ：fn     
     */
    function each(btnList, fn) {
        for(var i = 0; i < btnList.length; i++ ){
            fn(btnList[i], i);
        }

        //console.log(fn);
    }

    //each(btnList, setColor);

    //    fn  setColor      ,        
    //console.log(setColor);

    //-------------------------------------
    //                 
    //    ，           
    each(btnList, function (obj, index) {
        obj.style.backgroundColor = 'red';
        //each            
        console.log(obj);
        console.log(index);
    });
</code></pre> 
</article>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1401230076330168320"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!--    -         -->
                     
                </code></pre></article></div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!--    -  1       -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                             
                        </div>
                        <!--    -  2       -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                             
                        </div>
                        <!--    -  3       -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                             
                        </div>
                    </div>
                </div>
            </div>