简单JS之旋转--记录一下平常会用到的简单功能，封装成函数方便以后使用

四川灰太狼

于 2021-06-05 21:10:38 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.csdn.net/m0_48889470/article/details/117605314

本文记录了一个简单的JavaScript函数，用于实现对象的旋转。通过调用run方法并传入旋转对象、旋转方向和速度参数，可以实现顺时针或逆时针旋转，速度可定制。同时介绍了如何使用clearInterval来停止旋转。提供了实际应用效果的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//旋转
function rotate(obj,direction,speed){//对象，方向，速度，
			var rotateVal=0
			var dir=direction!==undefined?direction:true
			var spe=speed||0.1
			this.run=()=>{
				this.timer = setInterval(function() {
					rotateVal += 1;
					obj.style.transform = 'rotate('+(dir?"+":"-") + rotateVal+ 'deg)';
					if(rotateVal>360)
						rotateVal=0
				}, spe*100)
			}
			
		}

使用：通过调用run方法开始旋转，使用timer可以清除定时器，停止旋转

html:

调用：在传入参数的时候，有3个参数，分别是要旋转的对象，旋转方向，旋转速度，其中旋转对象是必须的，旋转方向如果传入true那么就顺时针旋转，false就逆时针旋转，默认为顺时针旋转，旋转速度默认的是100毫秒旋转一度，根据传入的参数更改速度，使用 xx.ru)开始旋转，使用clearInterval(xx.timer)停止旋转