JS学习（八）-定时器

最新推荐文章于 2023-06-17 08:09:35 发布

在下平兄

最新推荐文章于 2023-06-17 08:09:35 发布

阅读量125

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_44494778/article/details/100055478

版权

定时器在javascript中的作用

按照一定时间调用函数
1、制作动画
2、异步操作
3、函数缓冲与节流

定时器类型及语法

/*
    定时器：
    setTimeout  只执行一次的定时器 
    clearTimeout 关闭只执行一次的定时器
    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);		// 函数名 时间ms
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
   
    alert('ok!');
}

练习

1、定时器制作移动动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var iLeft = 0;
        var iSpeed = 10;
        
        window.onload = function () {
   
            var oDiv = document.getElementById("div1");
            var timer = setInterval(moving, 30);
            
            function moving() {
   
                iLeft += iSpeed;
                oDiv.style.left = iLeft + "px";
                if (iLeft>1720){
   
                    iSpeed = -10;
                }
                if (iLeft<0) {
   
                    iSpeed = 10;
                }
            }
        }
    </script>

    <style>
        div{
   
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

2、定时器制作无缝滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
   
            margin: 0;
            padding: 0;

最低0.47元/天解锁文章

在下平兄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习（八）-定时器

定时器在javascript中的作用按照一定时间调用函数1、制作动画2、异步操作3、函数缓冲与节流定时器类型及语法/* 定时器： setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器*/var time1...
复制链接

扫一扫

专栏目录