js中定时器的使用

时间：2021-02-27 00:09:36

1.setInterval

<!DOCTYPE html>
<html>
<head>
    <title>json</title>
<script type="text/javascript">
    function show(){
        alert("a");
    }
    //每隔1s执行一次函数
    setInterval(show, 1000);
</script>
</head>
<body>
</body>
</html>

2.setTimeout

 

<!DOCTYPE html>
<html>
<head>
    <title>json</title>
<script type="text/javascript">
    function show(){
        alert("a");
    }
    //1s之后执行该函数且只执行一次
    setTimeout(show, 1000);
</script>
</head>
<body>
</body>
</html>

2.clearInterval

<!DOCTYPE html>
<html>
<head>
    <title>json</title>

</head>
<body>
    <button type="button" id="open">开启</button>
    <button type="button" id="close">关闭</button>
    <script type="text/javascript">
    function show(){
        alert("a");
    }
    var oBtn1 = document.getElementById('open');
    var oBtn2 = document.getElementById('close');
    var timer = null;
    oBtn1.onclick=function (){
        timer = setInterval(show, 1000);
    }
    oBtn2.onclick = function (){
        clearInterval(timer);
    }
</script>
</body>
</html>

 3.演示提示框的实现

<!DOCTYPE html>
<html>
<head>
    <title>json</title>
    <style type="text/css">
    #div1{
        width: 29px;
        height: 30px;
        background-color: red;
    }
    #div2{
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-left: 50px;
        display: none;
    }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <script type="text/javascript">
        var oDiv1 = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2');
        var timer = null;
        oDiv1.onmouseover = oDiv2.onmouseover =  function (){
            clearTimeout(timer);
            oDiv2.style.display = 'block';
        }
        oDiv1.onmouseout =  oDiv2.onmouseout =function (){
            timer = setTimeout(function(){
                oDiv2.style.display = 'none';
            }, 700);
        }
    </script>
</body>
</html>

4.无缝滚动

<!DOCTYPE html>
<html>
<head>
    <title>json</title>
    <style type="text/css">
    *{margin: 0;padding: 0}
    #div1{
        height: 108px;
        margin: 100px auto;
        /*相对定位的作用是为了让ul能够以包含它的div为参考标准*/
        position: relative;
        overflow: hidden; /*将多余的四张图片遮住*/
    }
    #div1 ul{
        position: absolute;
        left: 0px;
        top: 0px;
    }
    #div1 ul li{
        list-style: none;
        float: left;
        height: 108px;
        width: 178px;
    }
    </style>
</head>
<body>
    <div id="div1">
        <ul>
            <li><img src="img/1.jpg"  alt=""></li>
            <li><img src="img/2.jpg"  alt=""></li>
            <li><img src="img/3.jpg"  alt=""></li>
            <li><img src="img/4.jpg"  alt=""></li>
        </ul>
    </div>
    <script type="text/javascript">
    var oDiv = document.getElementById('div1');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    //让4张图片变成8张图片
    oUl.innerHTML += oUl.innerHTML;
    // 给ul设置宽度以防止其父标签宽度太小将图片压下来
    oUl.style.width = oUl.offsetWidth + 'px';
    //div的宽度设置为ul的一般这样能实现滚动效果
    oDiv.style.width = oUl.offsetWidth/2 + 'px';
    setInterval(function(){
        if(oUl.offsetLeft < - oUl.offsetWidth/2)
            oUl.style.left = '0px';
        oUl.style.left = oUl.offsetLeft - 5 +'px';
    }, 50);
    </script>
</body>
</html>

js中定时器的使用

 

 

标签：

相关文章