script.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. function Control(el, {
  2. value = 0,
  3. min = 0,
  4. max = 100,
  5. minAngle = 0,
  6. maxAngle = 360,
  7. wheelSpeed = 0.05,
  8. step = 0.1
  9. } = {}) {
  10. const img = document.createElement('img')
  11. img.src = '1@3x.png'
  12. el.append(img)
  13. const ratio = (maxAngle - minAngle) / (max - min)
  14. const getAngle = () => (value - min) * ratio + minAngle
  15. this.setValue = newValue => {
  16. if (newValue > max)
  17. newValue = max
  18. if (newValue < min)
  19. newValue = min
  20. if (typeof this.onchange === 'function' && newValue !== value)
  21. this.onchange(newValue)
  22. value = newValue
  23. img.style.transform = `rotate(${getAngle()}deg)`
  24. }
  25. img.onmousewheel = (event) => {
  26. const {
  27. deltaY
  28. } = event
  29. this.setValue(value + deltaY * wheelSpeed)
  30. event.preventDefault()
  31. }
  32. img.onclick = (event) => {
  33. const {
  34. layerX
  35. } = event
  36. if (layerX < img.width / 2)
  37. this.setValue(value - step)
  38. else
  39. this.setValue(value + step)
  40. event.preventDefault()
  41. }
  42. const event2Deg = event => {
  43. const {
  44. layerX,
  45. layerY
  46. } = event
  47. const {
  48. width,
  49. height
  50. } = img
  51. const x = layerX - width / 2
  52. const y = height / 2 - layerY
  53. return ((Math.atan2(y, x) / (2 * Math.PI)) * 360 + 360) % 360
  54. }
  55. let prevAngle = null
  56. img.onmousedown = (event) => {
  57. prevAngle = event2Deg(event)
  58. }
  59. img.onmousemove = (event) => {
  60. if (prevAngle === null) return
  61. const currentAngle = event2Deg(event)
  62. const deltaValue = (prevAngle - currentAngle) / ratio
  63. this.setValue(value + deltaValue)
  64. prevAngle = currentAngle
  65. event.preventDefault()
  66. }
  67. img.onmouseup = (event) => {
  68. prevAngle = null
  69. }
  70. this.setValue(value)
  71. this.getValue = () => value
  72. }
  73. const audio = document.querySelector('audio');
  74. const red = new Control(root, {
  75. min: 0,
  76. max: 255
  77. })
  78. const green = new Control(root, {
  79. min: 0,
  80. max: 255
  81. })
  82. const blue = new Control(root, {
  83. min: 0,
  84. max: 255
  85. })
  86. blue.onchange = setRGB;
  87. green.onchange = setRGB;
  88. red.onchange = setRGB;
  89. function setRGB() {
  90. document.body.style.backgroundColor = `rgb(${red.getValue()},${green.getValue()},${blue.getValue()})`
  91. }
  92. const volumeAdjust = new Control(volume, {
  93. min: 0,
  94. max: 1,
  95. wheelSpeed: 0.0005,
  96. step: 0.01
  97. })
  98. volumeAdjust.onchange = setVolume;
  99. console.log(audio.volume);
  100. function setVolume() {
  101. console.log(volumeAdjust.getValue(), audio.volume)
  102. audio.volume = `${volumeAdjust.getValue()}`
  103. }