JSFiddle - React, Tailwind, and code Playground

by xianjian

HTML

<div class="container" title="在框内点击测试">
<div class="box" id="box1"></div>
</div>
<div class="container">
<button onclick="doAction(this)">START</button>
<div class="box" id="box2"></div>
</div>
<div id="test" style="clear:left">
</div>

CSS

body{font:14px 微软雅黑}
.container{
	float:left;
	position:relative;
	margin-right:8px;
	margin-bottom:8px;
	width:300px;
	height:100px;
	border:2px solid #2d89ef;
}
.box{
	position:absolute;
	left:60px;
	top:50px;
	width:20px;
	height:20px;
	font-size:0;
	background:#666;
	border-radius:50%;
}

JavaScript

function getStyle(obj,name){
  if(obj.currentStyle){
    return obj.currentStyle[name];
  } else {
    return document.defaultView.getComputedStyle(obj,null)[name];
  }
}


var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.onclick=function(e){
  e = e||window.event;
  if(e.stopPropagation){
    e.stopPropagation();
  }else{
    e.returnValue = false;
  }
};
var parent = box1.parentNode;
var parent2 = box2.parentNode;
parent.onclick=function(e){
  e = e || window.event;
  var x = e.offsetX || e.layerX;
  var y = e.offsetY || e.layerY;
  var left = parseInt(getStyle(box1,'left'));
  var top = parseInt(getStyle(box1,'top'));
  doAnimate(box1,{x:left,y:top},{x:x,y:y});
};

function doAnimate(o,p1,p2){
 clearInterval(o.timer);
 var dx = p2.x - p1.x;
 var dy = p2.y - p1.y;
 var distance = Math.sqrt(Math.pow(dx,2)+Math.pow(dy,2));
 var moves = distance/5;
 var xunits = dx/moves;
 var yunits = dy/moves;
 var left = p1.x;
 var top = p1.y; 
 o.timer = setInterval(function(){
      left += xunits;
	  top += yunits; 
	  o.style.left =  left+'px';
	  o.style.top =   top +'px';
	  moves--;
	  if(moves<=0) clearInterval(o.timer);
  },13);
}

function doAction(o){
  var speed =5;
  var ob = o.parentNode;
  var left = parseInt(getStyle(box2,'left'));
  var top = parseInt(getStyle(box2,'top'));
  var bw = parseInt(getStyle(box2,'width'));
  var bh = parseInt(getStyle(box2,'height'));
  var ww = parseInt(getStyle(ob,'width'));
  var hh = parseInt(getStyle(ob,'height'));
  var angle = Math.floor(Math.random()*181);
  clearInterval(box2.timer);
  function update(){
    radians = angle*Math.PI/180;
	  xunits = Math.cos(radians)*speed;
    yunits = Math.sin(radians)*speed;
  }
  box2.timer =setInterval(function(){
       if(left<0 ||left>ww-bw){
	      angle = 180 -angle;
	   }else if(top<0 || top >hh-bh){
	      angle = 360 -angle;
	   }
    update();
		left += xunits;
		top += yunits;
    box2.style.left =  left+'px';
	  box2.style.top =  ...