一：什么是定时器

（一）无限循环定时器

（二）不循环执行定时器

（三）开关定时器

数码时钟

# 自己思路的代码

:

:

网上的做法

:


:

潜在问题：ie7不支持  str[0] 这种写法取字符串的元素，因此要改成 str.chaAt(0) 解决兼容性问题

其他关于 Data的知识点

延时消失的提示框案例

自己思路

<style>  
    #div1{  
        width: 200px;  
        height: 200px;  
        background-color: red;  
    }  
    #div2{  
        width: 200px;  
        height: 200px;  
        background-color:greenyellow;  
        display: none;  
    }  
</style>  
<script>  
    window.onload = function(){  
        var oDiv1 = document.getElementById("div1")  
        var oDiv2 = document.getElementById("div2")  
        function tools(){  
            oDiv2.style.display = "none";  
        }  
        oDiv1.onmouseover = function(){  
            oDiv2.style.display = "block";  
        }  
        oDiv1.onmouseout = function(){  
            setTimeout(tools,2000);  
        }  
    }  
</script>

网上做法：

<style>

    #div1{  
        width: 200px;  
        height: 200px;  
        background-color: red;  
    }  
    #div2{  
        width: 200px;  
        height: 200px;  
        background-color:greenyellow;  
        display: none;  
    }  
</style>  
<script>  
    window.onload = function(){  
        var oDiv1 = document.getElementById("div1")  
        var oDiv2 = document.getElementById("div2")  
        // 用来存储定时器  
        var timer = null;  
        function tools(){  
            oDiv2.style.display = "none";  
        };  
        oDiv1.onmouseover = function(){  
            clearTimeout(timer);  
            oDiv2.style.display = "block";  
        };  
        oDiv1.onmouseout = function(){  
            // 如果要清除定时器，这里最好有一个变量接收定时器对象  
            timer = setTimeout(tools,2000);  
        };  
        oDiv2.onmouseover = function(){  
            // clearTimeout(tools)  
            // 这里要清除的是定时器的对象，而不是函数  
            clearTimeout(timer);  
        };  
        oDiv2.onmouseout = function(){  
            timer = setTimeout(tools,500);  
        }  
    }

</script>

无缝滚动案例

原理：修改left的值

<style>  
    #div1{  
        width: 200px;  
        height: 200px;  
        background-color: red;  
        position: absolute;  
        left: 0;  
        top: 20px;  
    }  
</style>  
<script>

    window.onload = function(){  
        var oDiv = document.getElementById("div1");  
        setInterval(function(){  
            // offsetLeft不仅仅不考虑left,还考虑margin  
            oDiv.style.left = oDiv.offsetLeft + 10 + "px";  
        },200)  
    }  
</script>

缺点是：会一直往右移动，不会再回来

一个方向循环滚动，鼠标悬停暂停滚动，移出继续滚动

缺点：只能往一个方向滚动

<style>  
#div1 {  
    border: 1px solid red;  
    width: 1400px;  
    height: 200px;  
    position: relative;  
    left: 50px;  

　　　　 overflow:hidden; # 超出部分隐藏
}
#div1 li{
float: left;
list-style: none;
width: 200px;
height: 200px;
}
#div1 ul{
margin: 0;
height: 200px;
padding: 0;
position: absolute;
left: 0;
top: 0;
}

<script>  
window.onload = function(){  
    var oDiv = document.getElementById("div1");  
    var oUl = document.getElementById("ul1");  
    var aLi = oUl.getElementsByTagName("li");  
    var timer = null;  
    // 这里很亮点，直接拼接两份  
    oUl.innerHTML = oUl.innerHTML + oUl.innerHTML  
    oUl.style.width = aLi\[0\].offsetWidth \* aLi.length + "px"

    timer = setInterval(function(){  
        oUl.style.left = oUl.offsetLeft  -2 + "px";  
        if(oUl.offsetLeft < -oUl.offsetWidth/2){  
            oUl.style.left = 0 + "px";  
        }  
    },30)  
    // 鼠标悬停上去，停止滚动  
    oDiv.onmousemove = function(){

        clearInterval(timer);

    }  
    // 鼠标移开，又开始滑动  
    oDiv.onmouseout = function(){

        timer = setInterval(function(){  
        oUl.style.left = oUl.offsetLeft  -2 + "px";  
        if(oUl.offsetLeft < -oUl.offsetWidth/2){  
            oUl.style.left = 0 + "px";  
        }  
    },30)  
    }  
}

</script>

左 右

无缝滚动，增加向左，向右按钮

<style>  
#div1 {  
    border: 1px solid red;  
    width: 1400px;  
    height: 200px;  
    position: relative;  
    left: 50px;  
    /\* 超出的隐藏 \*/  
    overflow: hidden;  
}  
#div1 li{  
    float: left;  
    list-style: none;  
    width: 200px;  
    height: 200px;  
}  
#div1 ul{  
    margin: 0;  
    height: 200px;  
    padding: 0;  
    position: absolute;  
    left: 0;  
    top: 0;  
}  
</style>

<script>  
window.onload = function(){  
    var oDiv = document.getElementById("div1");  
    var oUl = document.getElementById("ul1");  
    var aLi = oUl.getElementsByTagName("li");  
    var timer = null;  
    var speed = 3;  
    // 这里很亮点，直接拼接两份  
    oUl.innerHTML = oUl.innerHTML + oUl.innerHTML  
    oUl.style.width = aLi\[0\].offsetWidth \* aLi.length + "px"

    var oArr = document.getElementsByTagName("a")

    timer = setInterval(function(){  
        oUl.style.left = oUl.offsetLeft  + speed + "px";  
        if(oUl.offsetLeft < -oUl.offsetWidth/2){  
            oUl.style.left = 0 + "px";  
        }  
        if(oUl.offsetLeft > 0){  
            oUl.style.left = -oUl.offsetWidth/2 + "px";

        }  
    },30)  
    // 鼠标悬停上去，停止滚动  
    oDiv.onmousemove = function(){  
        clearInterval(timer);  
    }  
    // 鼠标移开，又开始滑动  
    oDiv.onmouseout = function(){

        timer = setInterval(function(){  
        oUl.style.left = oUl.offsetLeft  + speed + "px";  
        if(oUl.offsetLeft < -oUl.offsetWidth/2){  
            oUl.style.left = 0 + "px";  
        }  
        if(oUl.offsetLeft > 0){  
            oUl.style.left = -oUl.offsetWidth/2 + "px";  
        }  
    },30)  
    }

    oArr\[0\].onclick = function(){  
        speed = -3  
    }  
    oArr\[1\].onclick = function(){  
        speed = 3  
    }

}

</script>

左 右

# TODO