web前端之定时器的使用

最新推荐文章于 2025-03-25 23:44:26 发布

爸爸去哪了2之熊猫三胞胎

最新推荐文章于 2025-03-25 23:44:26 发布

阅读量934

点赞数 1

分类专栏： web前端 JavaScript 文章标签： web前端定时器移动相册

本文链接：https://blog.youkuaiyun.com/u014785563/article/details/54848286

版权

web前端同时被 2 个专栏收录

99 篇文章

订阅专栏

JavaScript

86 篇文章

订阅专栏

web前端之定时器的使用

定时器的简单介绍：

这里写图片描述

获取系统时间：

这里写图片描述

定时器的使用1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>定时器</title>
<script type="text/javascript">
function show(){
    alert("a");
}
setInterval(show,1000);
</script>
</head>
<body>
</body>
</html>

定时器的使用2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>定时器的开启和关闭</title>
<script type="text/javascript">
window.onload=function(){
    var oBtn1=document.getElementById("btn1");
    var oBtn2=document.getElementById("btn2");
    oBtn1.onclick=function(){
        timer=setInterval(function(){
            alert('a');
        },1000);
    };
    oBtn2.onclick=function(){
        clearInterval(timer);
    };
};
</script>
</head>
<body>
<input id="btn1" type="button" name="开启" value="开启">
<input id="btn2" type="button" name="关闭" value="关闭">    
</body>
</html>

开启定时器有一个对应的参数，我们使用这个对应的参数，来开启和关闭对应的定时器

定时器的运动基础：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>运动基础</title>
<style type="text/css">
#div1{
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
    left: 0;
    top: 50px;
}
</style>
<script type="text/javascript">
setInterval(function(){
    var oDiv=document.getElementById("div1");
    oDiv.style.left=oDiv.offsetLeft+10+'px';
},30);
</script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

js中有一个offsetLeft/offsetTop/offsetWidth/offsetHight可以综合考虑影响这个模块位置的属性

移动相册：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>图片滚动</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
#div1{
    width: 716px;
    height: 119px;
    margin: 100px auto;
    position: relative;
    background: red;
}
#div1 ul{
    position: absolute;
    left: 0px;
    top: 0px;
}
#div1 ul li{
    float: left;
    width: 179px;
    height: 119px;
    list-style: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
    var oDiv=document.getElementById("div1");
    var oUl=oDiv.getElementsByTagName("ul")[0];
    setInterval(function(){
        oUl.style.left=oUl.offsetLeft-2+"px";
    },30);
};
</script>
</head>
<body>
    <div id="div1">
        <ul>
            <li><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
            <li><img src="images/4.jpg"></li>
        </ul>
    </div>
</body>
</html>

移动相册完整版：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>图片滚动</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
#div1{
    width: 716px;
    height: 119px;
    margin: 100px auto;
    position: relative;
    background: red;
    overflow: hidden;
}
#div1 ul{
    position: absolute;
    left: 0px;
    top: 0px;
}
#div1 ul li{
    float: left;
    width: 179px;
    height: 119px;
    list-style: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
    var oDiv=document.getElementById("div1");
    var oUl=oDiv.getElementsByTagName("ul")[0];
    var aLi=oUl.getElementsByTagName("li");
    var speed=2;
    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

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

    var timer=setInterval(move,30);

    oDiv.onmouseover=function(){
        clearInterval(timer);
    };
    oDiv.onmouseout=function(){
        timer=setInterval(move,30);
    };
    document.getElementsByTagName('a')[0].onclick=function(){
        speed=-2;
    };
    document.getElementsByTagName('a')[1].onclick=function(){
        speed=2;
    };
};
</script>
</head>
<body>
    <a href="javascript:;">向左走</a>
    <a href="javascript:;">向右走</a>
    <div id="div1">
        <ul>
            <li><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
            <li><img src="images/4.jpg"></li>
        </ul>
    </div>
</body>
</html>