前端交互控制动画效果

最新推荐文章于 2024-06-13 21:22:53 发布

yamotl

最新推荐文章于 2024-06-13 21:22:53 发布

阅读量41

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/yamotl/article/details/134474314

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body{
            display: flex;
            height:100vh;
            justify-content: center;
            align-items: center;
        }
        .box{
            width:300px;
            height:300px;
            border-radius: 50%;
            background: linear-gradient(red,yellow,blue);
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <input type="range" id="range" min="0" max="360" value="0">
    <input type="button" value="start" id="start">
    <input type="button" value="stop" id="stop">
    <script>
        // 周期计时器 timer=setInterval(函数，间隔（毫秒）)   每隔一定的时间来执行函数
        // clearInterval(timer) 设置定时器
        //延迟定时器
        //1setInterval(function(){
        //         console.log(1)
                
        // },1000);
        //2     var fun=function(a){
        //         console.log(a)
        //     }
        //     setInterval("fun()",1000) 传参
        //3     var fun=function(){
        //         console.log(1)
        //     }
        //    setInterval(fun,1000)  不传参

        //     var count=0;
        // var fun = function(a){
        //     count++;
        //     if(count>10){
        //         clearInterval(timer);
        //     }
        //         console.log(a)
        // }
        // var timer=setInterval(function(){
        //     fun(10);
        // },1000)
        //延迟定时器 timer=setTimeout()  指定时间间隔执行一次函数
        //清除定时器 clearTimeout(timer)


        // var fun2 = function(a){
        //         console.log(a)
        // }
        // var timer=setTimeout(function(){
        //     fun2(10)
        // },1000)


        //递归实现延迟计时器模拟周期及计时器
        // var fun=function(a){
        //     console.log(a)
        //     setTimeout(function(){
        //         fun(1)
        //     },1000)
        // }
        // fun(1)


        // var count=0;
        // var fun=function(a){
        //     count++;
        //     console.log(a)
        //     if(count<11){
        //     setTimeout(function(){
        //         fun(10)
        //     },1000)
        //     }
        // }
        // fun(10)
        // document.getElementById("range")
        //手动触发
        // range.οnchange=function(){
        //     console.log(this.value)
        //     var box=document.querySelector(".box")
        //     box.style.background="linear-gradient("+this.value+"deg,red,yellow,blue)"
        // }

        // range.οninput=function(){
        //     console.log(this.value)
        //     var box=document.querySelector(".box")
        //     box.style.background="linear-gradient("+this.value+"deg,red,yellow,blue)"
        // }
        var box=document.querySelector(".box")
        var deg=0;
        var fun=function(){
            deg=deg+7
            box.style.background="linear-gradient("+deg+"deg,red,yellow,blue)"
        }
      
       var timer;
       var start= document.querySelector("#start")
        start.onclick=function(){
            if(timer){
                clearInterval(timer)
            } //之所以加这个是因为反复点start会变快，但是点stop停不下来，因为之前记录定时器的timer已经被新的timer覆盖了
            timer=setInterval(fun,1)
        }
        var stop= document.querySelector("#stop")
        stop.onclick=function(){
            clearInterval(timer)
        }
       
    </script>
</body>
</html>

yamotl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端交互控制动画效果

/之所以加这个是因为反复点start会变快，但是点stop停不下来，因为之前记录定时器的timer已经被新的timer覆盖了。// 周期计时器 timer=setInterval(函数，间隔（毫秒）) 每隔一定的时间来执行函数。//延迟定时器 timer=setTimeout() 指定时间间隔执行一次函数。// setInterval("fun()",1000) 传参。// clearInterval(timer) 设置定时器。//清除定时器 clearTimeout(timer)
复制链接

扫一扫