JavaScript 围绕一个圆心画六个圆

var sec = document.createElement('section')
sec.style.width = '300px';
sec.style.height = '300px';
sec.style.position = 'relative'
sec.style.left = '200px'
sec.style.top = '200px'
document.body.appendChild(sec)
var div1 = document.createElement('div')
var div2 = document.createElement('div')
var div3 = document.createElement('div')
var div4 = document.createElement('div')
var div5 = document.createElement('div')
var div6 = document.createElement('div')
var divs = [div1,div2,div3,div4,div5,div6]
for(var i = 0;i < divs.length;i++){
divs[i].style.width = '80px';
divs[i].style.height = '80px';
divs[i].style.backgroundColor = 'red'
divs[i].style.borderRadius = '50%'
divs[i].style.position = 'absolute'
var x = Math.sin((360 / 6) * (Math.PI / 180) * [i]) * 150
var y = Math.cos((360 / 6) * (Math.PI / 180) * [i]) * 150
divs[i].style.top = y + 'px'
divs[i].style.left = x + 'px'
divs[i].style.backgroundColor = 'hsl(' + Math.random() * 360 + ',100%,50%)'
sec.appendChild(divs[i])
}
// -------上面第一种方法，下面第二种------------
var r =100
var r1 = 50
var r2 =100
var initDeg = Math.PI / 4
var deg = Math.PI / 3
var offsetX = 250
var offsetY = 300
var R =150
for(var i = 0;i < 6;i++){
var div = document.createElement('div')
div.style.width = r1 + 'px'
div.style.height = r2 + 'px'
div.style.backgroundColor = 'hsl('+ i * 60 +',100%,50%)'
// hsl颜色值指定 HSL (色调，饱和度,明度)
// 色调就是在色轮上的程度值 0-360
// -0(360) 是红色 120是绿色 240蓝色
// 饱和度是一个百分比值 0%意味着灰色和100%的阴影
// 亮度也是一个百分点 0%是黑色 100%白色
div.style.borderRadius = '50%'
div.style.position = 'absolute'
div.style.top = offsetX + R * Math.cos(initDeg + i * deg) + 'px'
div.style.left = offsetY + R * Math.sin(initDeg + i * deg) + 'px'
document.body.appendChild(div)
}
var divs = document.querySelectorAll('div')
function rotate(){
initDeg -= 0.02
for(var i = 0;i < 6;i++){
var div = divs[i]
div.style.top = offsetX + R * Math.cos(initDeg + i * deg) + 'px'
div.style.left = offsetY + R * Math.sin(initDeg + i * deg) + 'px'
div.style.transform = 'rotate('+ 180 *(initDeg + deg * i)/Math.PI + 'deg)'
}
requestAnimationFrame(rotate)
}
requestAnimationFrame(rotate)
// setInterval(rotate,10)

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论