javascript之定时器的使用

一:什么是定时器

(一)无限循环定时器

<script>
    window.onload = function(){
       function test(){
           alert("test")
       }
        // 无限循环的执行函数test,间隔时间为2秒    
       setInterval(test,2000);
    }
</script>

(二)不循环执行定时器

<script>
    window.onload = function(){
       function test(){
           alert("test")
       }
        // 2秒后,执行test函数,只执行一次   
        setTimeout(test,2000);
    }
</script>

(三)开关定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定时器</title>

<script>
    window.onload = function(){
        var oBtn1 = document.getElementById("btn1");
        var oBtn2 = document.getElementById("btn2");
        // 控制匿名函数
        var timer = null;
        oBtn1.onclick = function(){

            timer = setInterval(function(){
                alert("haha");
            },3000)
        }
        oBtn2.onclick = function(){
            clearInterval(timer);
        }
    }
</script>

</head>
<body>
    <input type="button" id="btn1" value="开启">
    <input type="button" id="btn2" value="关闭">
</body>
</html>

 

数码时钟

# 自己思路的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数字时钟</title>
<style>
body{
font-size: 150px;
background:gray;
}
img{
width: 100px;
height: 100px;
}
</style>

<script>
window.onload = function(){
var oData = new Date();
var h = oData.getHours().toString();
var m = oData.getMinutes().toString();
var s = oData.getSeconds().toString();
var oImg = document.getElementsByTagName("img")
function set(){
oImg[0].src = "pic/数字" + h[0] + ".png"
oImg[1].src = "pic/数字" + h[1] + ".png"

if(h.length==1){

oImg[0].src = "pic/数字0" + ".png"
oImg[1].src = "pic/数字" + h[0] + ".png"
}else{
}
oImg[0].src = "pic/数字" + h[0] + ".png"
oImg[1].src = "pic/数字" + h[1] + ".png"

if(m.length==1){

oImg[2].src = "pic/数字0" + ".png"
oImg[3].src = "pic/数字" + m[0] + ".png"
}else{
 
oImg[2].src = "pic/数字" + m[0] + ".png"
oImg[3].src = "pic/数字" + m[1] + ".png"
}

 
if(s.length==1){
oImg[4].src = "pic/数字0"+".png"
oImg[5].src = "pic/数字" + s[0]+".png"
}else{
oImg[4].src = "pic/数字" + s[0] + ".png"
oImg[5].src = "pic/数字" + s[1] + ".png"
}
}
set();
}
setInterval(window.onload,1000);
</script>

</head>
<body>
<img src="" alt="">
<img src="" alt="">
:
<img src="" alt="">
<img src="" alt="">
:
<img src="" alt="">
<img src="" alt="">

</body>
</html>


网上的做法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数字时钟</title>
<style>
body{
    font-size: 150px;
    background:gray;
}
img{
    width: 100px;
    height: 100px;
}
</style>

<script>

    function toDoule(n){
        if(n<10){
            return "0" + n    # 字符串和数字相加,会先将数字变成字符串,然后进行拼接
        }else{
            return "" + n
        }
    }
    window.onload = function(){
        var oImg = document.getElementsByTagName("img");
        function clock (){
            var oData = new Date();
            var toStr = toDoule(oData.getHours()) + toDoule(oData.getMinutes()) + toDoule(oData.getSeconds());
            for(var i=0; i<oImg.length;i++){
                oImg[i].src = "pic/数字" + toStr[i] + ".png"
            }
        }
        setInterval(clock,1000);
        // 这里调用,是为了一秒钟的延迟
        clock();
    }
</script>

</head>
<body>
    <img src="" alt="">
    <img src="" alt="">
    :
    <img src="" alt="">
    <img src="" alt="">
    :
    <img src="" alt="">
    <img src="" alt="">

</body>
</html>

 

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

其他关于 Data的知识点

<script>
    
        var oData = new Date();
        // 获取几号
        alert(oData.getDate());
        // 0代表周日,国外从周日开始算
        alert(oData.getDay());
        // 获取年份s
        alert(oData.getFullYear());
        // 月份从0开始
        alert(oData.getMonth()+1);
    </script>

 

延时消失的提示框案例

自己思路

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>延时提示框</title>

    <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>

</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

 

网上做法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>延时提示框</title>

    <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>

</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

 

无缝滚动案例

原理:修改left的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无缝滚动</title>

    <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>

</head>
<body>
    <div id="div1"></div>
</body>
</html>

缺点是:会一直往右移动,不会再回来

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>div中图片问题</title>

    <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; // 这里很亮点,直接拼接两份 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> </head> <body> <div id="div1"> <ul id="ul1"> <li><img src="pic/美女1.jpg" alt=""></li> <li><img src="pic/美女2.jpg" alt=""></li> <li><img src="pic/美女3.jpg" alt=""></li> <li><img src="pic/美女4.jpg" alt=""></li> <li><img src="pic/美女5.jpg" alt=""></li> <li><img src="pic/美女6.jpg" alt=""></li> <li><img src="pic/美女7.jpg" alt=""></li> </ul> </div> <a href="#"></a> <a href="#"></a> </body> </html>

 

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>div中图片问题</title>

    <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>

</head>
<body>
        <div id="div1">
                <ul id="ul1">
                    <li><img src="pic/美女1.jpg" alt=""></li>
                    <li><img src="pic/美女2.jpg" alt=""></li>
                    <li><img src="pic/美女3.jpg" alt=""></li>
                    <li><img src="pic/美女4.jpg" alt=""></li>
                    <li><img src="pic/美女5.jpg" alt=""></li>
                    <li><img src="pic/美女6.jpg" alt=""></li>
                    <li><img src="pic/美女7.jpg" alt=""></li>
                </ul>
        </div>
        <a href="#"></a>
        <a href="#"></a>
</body>
</html>

 

 

# TODO

posted @ 2019-12-21 20:04  张京墨  阅读(396)  评论(0编辑  收藏  举报