js中的定时器和面向对象

最新推荐文章于 2022-09-28 19:41:35 发布

JaceLai_

最新推荐文章于 2022-09-28 19:41:35 发布

阅读量1k

点赞数 1

分类专栏： web前端笔记文章标签：面向对象

本文链接：https://blog.csdn.net/Wlcf258/article/details/54379108

版权

web前端笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. 定时器的使用

  1. 定时器：用以指定在一段特定的时间后执行某段程序。

       1.1.倒计定时器：timename=setTimeout("function();",delaytime);  // 只执行一次

       1.2.循环定时器：timename=setInterval("function();",delaytime);  // 无线循环倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。

       1.3. clearInterval(对象)： 清除已设置的setInterval对象



       2. （1.） offset这个单词本身是--偏移，补偿，位移的意思。 o f f s e t W i d t h和offsetHight （检测盒子自身宽高+padding+border）这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。
           offset宽/高 = 盒子自身的宽/高 + padding +border；
           offsetWidth = width+padding+border；
           offsetHeight = Height+padding+border；

2.(2) offsetLeft和offsetTop（检测距离父盒子有定位的左/上面的距离）返回距离上级盒子（带有定位）左边s的位置如果父级都没有定位则以body为准offsetLeft 从父亲的padding 开始算,父亲的border 不算。在父盒子有定位的情况下，offsetLeft ==style.left(去掉px)。

无缝滚动实例：

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" 
         content="text/html; charset=UTF-8" />
        <title></title>
        <style>
            * {margin: 0;padding: 0;}           
            #div1 {width: 472px;height: 71px;margin: 100px auto;
                    position: relative;background: red;overflow:                     hidden;}           
            #div1 ul {
                position: absolute;
                left: 0;
                top: 0;         
            }           
            #div1 ul li {
                float: left;
                width: 108px;
                height: 71px;               
                list-style: none;
            }           
        </style>
        <script>
            window.onload = function() {
                var oDiv = document.getElementById('div1');
                //  var oUl = oDiv.getElementsByTagName('ul')[0]; //  如果通过标签名获取元素，就要在标签后面增加[0]
                var oUl = document.getElementById('ul');   //   如果通过标Id获取元素和标签,就不用在后面增加[0];             
                var aLi = oUl.getElementsByTagName('li');               
                var oBtn1= document.getElementById('btn1');
                var oBtn2= document.getElementById('btn2');
                oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; //  复制多一份图片
            //  console.log(oUl0.innerHTML)
                oUl.style.width = aLi[0].offsetWidth *aLi.length + 'px'; // aLi[0].offsetWidth *aLi.length  这是图片的宽度乘以图片个数                    
                    //console.log(oUl.style.width )   
                   var speed=-2;  //  定义一个数，正负号代表方向，数值代表转速的快慢                  
                function move() {   //  创建函数
                  oBtn1.onclick=function(){   //  往左边滚动
                        speed=-2;
                  }                
                  oBtn2.onclick=function(){   //  往右边滚动
                        speed=2;
                  }             
                    if(oUl.offsetLeft < -oUl.offsetWidth / 2) {   // 判断当经过超过图片长度1/2后，就重新滚动                      
                     oUl.style.left ='0px';  // 当他向左滚动完后重新清零再次滚动
                    }
                    else if(oUl.offsetLeft > 0) {   // 判断当经过大于0 ，向右滚动，这时候的长度全部图片的宽度，(-)表示在左超出的一半                        
                     oUl.style.left = -oUl.offsetWidth / 2+ 'px';                   
                    }                
                     oUl.style.left = oUl.offsetLeft +speed+ 'px';
                //          console.log(oUl.style.left);
                }                           
                setInterval(move, 30); //  开启定时器， move表示自定义的函数名，后面是时间值
                    }
        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="左" />
        <input type="button" id="btn2" value="右" />
        <div id="div1">
            <ul id="ul">
                <li><img src="img/1_r2_c2.jpg" /></li>
                <li><img src="img/1_r2_c3.jpg" /></li>
                <li><img src="img/pic.jpg" /></li>
                <li><img src="img/1_r2_c3.jpg" /></li>
            </ul>
        </div>
    </body>
</html>

3.什么是DOM？

      文档对象模型。赋予js操作节点的能力。当网页被加载时，浏览器会创建页面的文档对象模型（Document ObjectModel）。      
      3.1.  节点分为两种：文本节点和元素节点
             获取子节点：childNodes nodeType 和 children

获取子节点例子：

<script type="text/javascript">
            window.onload=function(){
                var oUl=document.getElementById('ul');
                var aLi=oUl.getElementsByTagName('li');// 通过id名获取标签 
                for(var i=0;aLi.length;i++){  // 设置循环
                    console.log(oUl.children.length);  //检验ul里面里的标签个数
                }                               
            }
        </script>
    </head>
    <body>
        <ul id="ul">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>

       3.2. 获取父节点：parentNode 
       例：点击删除，隐藏li

获取子节点例子：

 <script type="text/javascript">
            window.onload = function() {
                var oList = document.getElementById('list');
                var aLi = oList.getElementsByTagName('li');
                var aA = oList.getElementsByTagName('a');
                //  chlidren  父节点，子节点
                //console.log(oList.children.lengtht);  
                //nodeType==3 -> 文本节点
                //nodeType==1 -> 元素节点
                for(var i = 0; i < aLi.length; i++) {
                    aA[i].onclick = function() {
                        this.parentNode.style.display = 'none'; //this.parentNode 指当前标签里面的父节点
                    }
                }
            }
        </script>
    </head>
    <body>
        <ul id="list">
            <li>社会<a href="javascript:;">删除</a></li>            
        </ul>
    </body>

   3.3.首尾子节点，有兼容性问题
           firstElementChild //一般拿来判断兼容的问题
           firstChild  // 首节点  只在IE下面兼容
           firstElementChild  // 在非IE下面兼容    
           lastChild 、  // 尾节点
           lastElementChild

    3.4.兄弟节点 ，有兼容性问题
            nextSibling、//  本身节点的下一个节点   只在IE下面兼容
            nextElementSibling
            previousSibling、
            reviousElementSibling  // 本身节点的上一个节点

     3.4. DOM方式操作元素属性：
            获取：getAttribute(名称)
            设置：setAttribute(名称, 值)
            删除：removeAttribute(名称)

    3.5. DOM的增删改查：
     例子：

<body>
        <ul id="ul">
            <li id="apple">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </body>
    <script type="text/javascript">
        var oUl=document.getElementById('ul');      
        var oAp=document.getElementById('apple');   
        var oXi=document.createElement('li');// 创建节点
        oXi.innerHTML='4';  //插入内容
        oUl.appendChild(oXi);  //插入节点       
        var oYt=document.createElement('li');  // 创建节点
        oYt.innerHTML='0';  //插入内容
        oUl.insertBefore(oYt,oAp)  //在第一个节点前面插入节点       
    </script>

4.面向对象：

         4. 1.什么是面向对象：对象是一个整体，对外提供一些操作。
            2. 什么是面向对象：使用对象时，只关注对象提供的功能，不关注其内部细节比如JQuery 面向对象是一种通用思想，并非只有编程中能用，任何事情都可以用。

  4.2、js中的面向对象
                       面向对象编程(OOP)的特点
                       抽象：抓住核心问题
                       封装：不考虑内部实现，只考虑功能使用
                       继承：从已有对象上，继承出新的对象
                       多重继承
                       多态    
                       对象的组成：
                       方法——函数：过程、动态的
                       属性——变量：状态、静态的

     4.3、写一个面向对象程序
                     为对象添加方法和属性
                     this详解，事件处理中this的本质
                     windowthis——函数属于谁
                     不能在系统对象中随意附加方法、属性，否则会覆盖已有方法、属性 object对象


    4.4.工厂方式：用构造函数创建一个类。

   4.5.6、原型——prototype
                      什么是原型：原型是class，修改他可以影响一类元素
                      在已有对象中加入自己的属性、方法
                      原型修改对已有对象的影响为Array添加sum方法
                      给对象添加方法，类似于行间样式
                      给原型添加方法，类似于class
                      原型的小缺陷
                      无法限制覆盖