SOURCE

console 命令行工具 X clear

                    
>
console
class Turntable {
  constructor() {
    this.mount();
  }
  mount() {
    this.el = document.querySelector('.test');
    const pointer = document.querySelector('.pointer');
    this.centerPoint = {
      x: this.el.offsetLeft + (this.el.offsetWidth/2),
      y: this.el.offsetTop + (this.el.offsetHeight/2)
    };
    console.log('centerPoint', JSON.stringify(this.centerPoint));
    const t = new MouseOrTouch('.test');
    t.start((e)=>{
       pointer.setAttribute('style','animation:none;');
      this.radian(e, true);
    }).move((e)=>this.radian(e)).end(() => {
      pointer.setAttribute('style','');
    });
  }
  radian(list, transition) {
    const x0 = this.centerPoint.x;
    const y0 = this.centerPoint.y;
    const x1 = list[0].clientX;
    const y1 = list[0].clientY;
    console.log(x1+ '/' + y1);
    const r = Math.sqrt(Math.pow((x0-x1), 2)+Math.pow(y0-y1,2));
    console.log(Math.abs(y1-y0));
    const radian = Math.acos(Math.abs(y1-y0)/r);
    console.log('radian', radian);
    let angle = Math.floor(180/(Math.PI/radian));
    console.log('angle', angle);
    if(x1>x0&&y1<y0){
      console.log(1);
    } else if (x1>x0&&y1>y0) {
      angle = 180 - angle;
      console.log(2);
    } else if (x1<x0&&y1>y0) {
      angle = 180 + angle;
      console.log(3);
    } else if (x1<x0&&y1<y0) {
      angle = 360 - angle;
      console.log(4);
    }
    console.log('angle2', angle);
    this.angle = angle;
    this.pointer(transition);
  }
  pointer() {
    const pointer = document.querySelector('.pointer');
    pointer.style.transform = 'translate(-50%, -50%) rotate('+this.angle+'deg)';
  }
}

new Turntable();
<div class="test">
  <div class="pointer"></div>
</div>
.test {
  background:#ccc;
  width:300px;
  height:300px;
  border-radius:150px;
  position:relative;
}

.pointer {
  width: 50px;
  height: 50px;
  background:#4cb4e7;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) rotate(0deg);
  animation: pointer 5s infinite;
  // transition:all 1s;
}

@keyframes pointer {
  0% {
    transform:translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform:translate(-50%, -50%) rotate(180deg);
  }
  100% {
    transform:translate(-50%, -50%) rotate(360deg);
  }
}

本项目引用的自定义外部资源