A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 逆风TO 黑马粉丝团   /  2020-3-26 09:54  /  1006 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

1.定时器
[JavaScript] 纯文本查看 复制代码
			setInterval(function(){
			},t)
		每隔t ms执行一次。***要注意,循环执行的***

2.清除定时器
上面说了,定时器是循环执行的,有些情况下,我们不想它循环执行,所以就必须来清除定时器。
清除定时器可以用延时器来完成。
[JavaScript] 纯文本查看 复制代码
clearInterval(定时器名称);

举一个简单的例子
[JavaScript] 纯文本查看 复制代码
let sum = setInterval(function(){
	console.log(x);
},100);

let x=9;
steTimeout(function(){
	clearInterval(sum);
},300)

上面代码在打印出3次9后就会停止打印
1.png
3、关于定时器的一个小小案例(让一个小圆绕着大圆做圆周运动)
[JavaScript] 纯文本查看 复制代码
		代码部分

[JavaScript] 纯文本查看 复制代码
<style>
    body{
        margin: 0;
    }
    .round{
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 400px;
        height: 400px;
        border:1px solid red;
        border-radius: 50%;
        margin:100px auto 0;
    }
    .point{
        width: 10px;
        height: 10px;
        border:1px solid blue;
        border-radius: 50%;
        background-color: blue;
    }
</style>
<body>
    <div class="round"> 
        <div class="point"></div>
    </div>
    <script>
        let oPoint=document.querySelector(".point");
        let STEP=Math.PI/60;
        let cow=0;

        setInterval(function(){
            oPoint.style.transform="translate("+200*Math.sin(cow)+"px,"+200*Math.cos(cow)+"px)";
            cow+=STEP;
        },1000/60)
    </script>

结果部分
2.png
由于我在这插入了一张静态的图片,可能看不出小圆绕着大圆做圆周运动。但它确实是在做圆周运动。


转自CSDN

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马