JavaScript 围绕一个圆心画六个圆

黄良钵

分类: 程序开发 785 0

  1. var sec = document.createElement('section')
  2. sec.style.width = '300px';
  3. sec.style.height = '300px';
  4. sec.style.position = 'relative'
  5. sec.style.left = '200px'
  6. sec.style.top = '200px'
  7. document.body.appendChild(sec)
  8. var div1 = document.createElement('div')
  9. var div2 = document.createElement('div')
  10. var div3 = document.createElement('div')
  11. var div4 = document.createElement('div')
  12. var div5 = document.createElement('div')
  13. var div6 = document.createElement('div')
  14. var divs = [div1,div2,div3,div4,div5,div6]
  15. for(var i = 0;i < divs.length;i++){
  16.     divs[i].style.width = '80px';
  17.     divs[i].style.height = '80px';
  18.     divs[i].style.backgroundColor = 'red'
  19.     divs[i].style.borderRadius = '50%'
  20.     divs[i].style.position = 'absolute'
  21.     var x = Math.sin((360 / 6) * (Math.PI / 180) * [i]) * 150
  22.     var y = Math.cos((360 / 6) * (Math.PI / 180) * [i]) * 150
  23.     divs[i].style.top = y + 'px'
  24.     divs[i].style.left = x + 'px'
  25.     divs[i].style.backgroundColor = 'hsl(' + Math.random() * 360 + ',100%,50%)'
  26.     sec.appendChild(divs[i])
  27. }
  28. // -------上面第一种方法,下面第二种------------
  29. var r =100
  30. var r1 = 50
  31. var r2 =100
  32. var initDeg = Math.PI / 4
  33. var deg = Math.PI / 3
  34. var offsetX = 250
  35. var offsetY = 300
  36. var R =150
  37. for(var i = 0;i < 6;i++){
  38.     var div = document.createElement('div')
  39.     div.style.width = r1 + 'px'
  40.     div.style.height = r2 + 'px'
  41.     div.style.backgroundColor = 'hsl('+ i * 60 +',100%,50%)'
  42.     // hsl颜色值指定 HSL (色调,饱和度,明度)
  43.     // 色调 就是在色轮上的程度 值 0-360
  44.     // -0(360) 是红色 120是绿色 240蓝色
  45.     // 饱和度 是一个百分比值 0%意味着灰色和100%的阴影
  46.     // 亮度也是一个百分点 0%是黑色 100%白色
  47.     div.style.borderRadius = '50%'
  48.     div.style.position = 'absolute'
  49.     div.style.top = offsetX + R * Math.cos(initDeg + i * deg) + 'px'
  50.     div.style.left = offsetY + R * Math.sin(initDeg + i * deg) + 'px'
  51.     document.body.appendChild(div)
  52. }
  53. var divs = document.querySelectorAll('div')
  54. function rotate(){
  55.     initDeg -= 0.02
  56.     for(var i = 0;i < 6;i++){
  57.         var div = divs[i]
  58.         div.style.top = offsetX + R * Math.cos(initDeg + i * deg) + 'px'
  59.         div.style.left = offsetY + R * Math.sin(initDeg + i * deg) + 'px'
  60.         div.style.transform = 'rotate('+ 180 *(initDeg + deg * i)/Math.PI + 'deg)'
  61.     }
  62.     requestAnimationFrame(rotate)
  63. }
  64. requestAnimationFrame(rotate)
  65. // setInterval(rotate,10)
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “JavaScript 围绕一个圆心画六个圆”

Loading...