JavaScript定时器

发布时间：2020-08-01 03:01:29 作者：bigbeatwu
来源：网络阅读：184

1.往复运动动画

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>motion</title>
<script type="text/javascript">

window.onload = function(){
    var iLeft = 0;
    var iSpeed = 3;
    var oDiv = document.getElementById('Div1');
    /*clearInterval() 关闭*/
    var timer = setInterval(function(){           
        iLeft += iSpeed;
        oDiv.style.left = iLeft + 'px';

        if(iLeft>700){           /*右侧判断*/
            iSpeed = -3;
        }
        if(iLeft<0){             /*左侧判断*/
            iSpeed = 3;
        }
    },20)  /*setInterval(函数，完成时间)*/
}

</script>

.div1{
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin: 100px 0;
    position: absolute;

}
body{
    margin: 0;
}
</style>

</head>

<body>

<div class="div1" id="Div1"></div>

</body>
</html>

JavaScript定时器

2.无缝滚动

例子：小南子

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>小南子</title>
<script type="text/javascript">

window.onload = function(){
    var oDiv = document.getElementById('slide');   /*获取块元素*/
    var oBtn01 = document.getElementById('btn01');
    var oBtn02 = document.getElementById('btn02');

    var oUl = oDiv.getElementsByTagName('ul')[0];  /*获取的是元素集，取第一个*/
    var iRan = 0;         /*位移初始值*/
    var iSpeed = -2;
    var iNowspeed = 0;   /*临时存储*/
    oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;    /*oUl.innerHTML是全部li，两个相加，相当于图片拼接*/
    function moving(){                              /*移动函数*/
        iRan += iSpeed;                                 /*位移量*/
        if(iRan<-2060){                             /*五个li移出*/
            iRan = 0;                               /*回到初值，速度快，肉眼看不出*/
        }
        if(iRan>0){                                 /*当第一张图片往右，立即拉到第二段图片的第一张*/
            iRan = -2060;
        }
        oUl.style.left = iRan + 'px';               /*position的left*/
    }
    var timer = setInterval(moving,20);             /*定时器*/

    oBtn01.onclick = function(){                     /*点击控制方向*/
        iSpeed = -2;
    }
    oBtn02.onclick = function(){
        iSpeed = 2;
    }
    oDiv.onmouseover = function(){                  /*鼠标移进*/
        iNowspeed = iSpeed;
        iSpeed = 0;                                 /*停止*/
    }
    oDiv.onmouseout = function(){                   /*鼠标移出*/
        iSpeed = iNowspeed;                         /*恢复上次移动*/
    }

}
</script>

<style type="text/css">

*{                                                  /*把li的padding和margin消除*/
    margin: 0;
    padding: 0;
}
.list_con{
    width: 1236px;                                  /*3张图片可视*/
    height: 526px;                                  /*图片高度*/
    overflow: hidden;                               /*隐藏溢出*/
    border: 1px solid #000;                         /*边框*/
    margin: 10px auto 0;                            /*相对body*/
    position: relative;                             /*父级position，relative*/
    background-color: #F0F0F0;                      /*背景色*/
}
.list_con ul{
    width: 3296px;                                  /*8张图片宽度，太小会导致拼接出错*/
    height: 506px;
    list-style: none;                                /*除去li样式*/
    position: absolute;                             /*相对list_con*/
    left: 0;                                        /*初始位置*/
    top: 0;
}
.list_con ul li{
    float: left;                                    /*向左靠齐*/
    width: 392px;                                   /*一张图片宽度*/
    height: 506px; 
    margin: 10px;                                    /*图片间的距离*/
    /*position: absolute;*/
}
.btn_con{
    width: 1456px;                                   /*两个按钮的所在的范围*/
    height: 50px;
    margin: 230px auto 0;                            /*按钮位置*/
    position: absolute;                              
    float: left;
}
.btn_con .left,.right{
    width: 50px;                                    /*按钮大小*/
    height: 50px;
    background-color: gold;                         /*背景色*/
    position: absolute;                          
    /*left: 0px;
    top: 0px;*/
    font-size: 50px;                                /*<>的大小*/
    border-radius: 25px;                            /*圆角*/
    line-height: 50px;                              /*垂直居中*/
    font-family: 'Arial';                           /*字体*/
    text-align: center;                             /*水平居中*/
    cursor: pointer;   /*鼠标光标，移到按钮会变成小手，像接触链接一样*/
    opacity: 0.5;     /*透明度*/
}
.right{
    left: 1305px;     /*按钮位置*/
}
.left{
    left: 10px;
}
</style>

</head>

<body>

<div class="btn_con" id="btn">
        <div class="left" id="btn01"><</div>  
        <div class="right" id="btn02">></div>  
</div>
<div class="list_con" id="slide">
    <ul>
        <li><a href="#"><img src="images/小林子1.jpg" alt="nanzi"></a></li>
        <li><a href="#"><img src="images/小林子2.png" alt="nanzi"></a></li>
        <li><a href="#"><img src="images/小林子3.png" alt="nanzi"></a></li>
        <li><a href="#"><img src="images/小林子4.png" alt="nanzi"></a></li>
        <li><a href="#"><img src="images/小林子5.png" alt="nanzi"></a></li>
    </ul>
</div>

</body>
</html>

JavaScript定时器

3.变量作用域

变量作用域指的是变量的作用范围，JavaScript中的变量分为全局变量和局部变量。

（1）全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。

（2）局部变量：在函数内部定义的变量，只能在定义改变量的函数内部访问，外部无法访问

JavaScript定时器

相关阅读