index.js 2.9 KB

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