<!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>
前端 交互控制动画效果
最新推荐文章于 2024-06-13 21:22:53 发布