html线条绕圆旋转,js围绕圆旋转

其实利用以前学过的三角函数的知识就可以解这道题

html

css

html,body{

margin: 0;

padding: 0;

width: 100%;

height: 100%;

}

.box-wrap{

display: flex;

justify-content: space-around;

align-items: center;

width: 100%;

height: 100%;

}

.box{

width: 100px;

height: 100px;

background-color: #009a61;

border-radius: 50%;

text-align: center;

line-height: 100px;

color: #fff;

cursor: pointer;

}

.round{

border-radius: 50%;

position: absolute;

background-color: #009a61;

}

js

var app = {

init: function () {

this.move();

},

cEle: function (tagName, iClass) {

var tag = document.createElement(tagName);

tag.className = iClass ? iClass : '';

return tag;

},

css: function (ele, styles) {

for(var attr in styles){

ele['style'][attr] = styles[attr];

}

},

round: function (ele, x, y, r) {

var deg = 0;

var timer = null;

var _this = this;

var w = ele.offsetWidth;

var h = ele.offsetHeight;

var a,b;

clearInterval(timer);

timer = setInterval(function () {

deg += 2;

a = Math.sin(deg * Math.PI/180) * r;

b = Math.cos(deg * Math.PI/180) * r;

_this.css(ele, {

left: (x - w/2) + b + 'px',

top: (y - h/2) + a + 'px'

})

}, 30);

},

move: function () {

var aBox = document.querySelectorAll('.box');

var _this = this;

var body = document.body;

var left,top,r,ele,w;

[].slice.call(aBox).forEach(function (e) {

e.addEventListener('click', function () {

ele = _this.cEle('div', 'round');

w = Math.floor(Math.random() * 50 + 10);

left = this.offsetLeft + this.offsetWidth/2;

top = this.offsetTop + this.offsetHeight/2;

r = this.offsetWidth + Math.floor(Math.random() * 50);

_this.css(ele, {

width: w + 'px',

height: w + 'px'

})

body.appendChild(ele);

_this.round(ele, left, top, r);

}, false)

})

}

}

app.init();