Strona główna Odkrywaj Pomoc
Zaloguj się
illiaKozyr
/
Homework
Obserwuj 1
Polub 0
Forkuj 0
Pliki Problemy 8 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

<Крутилки> done

Illia Kozyr 2 lat temu
rodzic
4cc1cd2994
commit
922a27ae7c
4 zmienionych plików z 111 dodań i 0 usunięć
Widok podzielony Pokaż statystyki zmian
  1. BIN
      Крутилки/img/1@3x.png
  2. 91 0
      Крутилки/index.js
  3. BIN
      Крутилки/media/klychko.mp3
  4. 20 0
      Крутилки/spinner.html

BIN
Крутилки/img/1@3x.png
Wyświetl plik


+ 91 - 0
Крутилки/index.js
Wyświetl plik 

@@ -0,0 +1,91 @@
 
+function Control(
 
+    el,
 
+    {
 
+        value = 10,
 
+        min = 0,
 
+        max = 100,
 
+        minAngle = -90,
 
+        maxAngle = 90,
 
+        wheelSpeed = 0.1,
 
+        step = 1,
 
+    } = {}
 
+) {
 
+    const img = document.createElement("img");
 
+    img.src = "img/1@3x.png";
 
+    el.append(img);
 
+
 
+    const ratio = (maxAngle - minAngle) / (max - min); //цена единицы value в градусах
 
+    const getAngle = () => (value - min) * ratio + minAngle; //подсчитали отступ в единицах, пересчитали в градусы и прибавили к стартовому углу
 
+
 
+    this.setValue = (newValue) => {
 
+        if (newValue < min) {
 
+            newValue = min;
 
+        }
 
+
 
+        if (newValue > max) {
 
+            newValue = max;
 
+        }
 
+
 
+        value = newValue;
 
+
 
+        if (typeof this.onchange === "function") {
 
+            this.onchange(value);
 
+        }
 
+
 
+        img.style.transform = `rotate(${getAngle()}deg)`;
 
+    };
 
+
 
+    this.getValue = () => value;
 
+
 
+    img.onmousewheel = (e) => {
 
+        const { deltaY } = e;
 
+        e.preventDefault();
 
+        this.setValue(value + deltaY * wheelSpeed);
 
+    };
 
+
 
+    img.onclick = (e) => {
 
+        const { layerX } = e;
 
+        console.log(e, layerX);
 
+        if (layerX > img.width / 2) this.setValue(value + step);
 
+        else this.setValue(value - step);
 
+    };
 
+
 
+    this.setValue(value);
 
+}
 
+
 
+function setRGB() {
 
+    let a = red.getValue();
 
+    let b = green.getValue();
 
+    let c = blue.getValue();
 
+
 
+    let rgbDone = (div.style.background = `rgb(${a}, ${b}, ${c})`);
 
+    return console.log(rgbDone);
 
+}
 
+
 
+const red = new Control(container1, { min: 0, max: 255 });
 
+red.onchange = setRGB;
 
+const green = new Control(container1, { min: 0, max: 255 });
 
+green.onchange = setRGB;
 
+const blue = new Control(container1, { min: 0, max: 255 });
 
+blue.onchange = setRGB;
 
+
 
+const volumeControl = new Control(container1, { value: 50 });
 
+volumeControl.onchange = (value) => {
 
+    audio.volume = value / 100;
 
+    console.log("ON CHANGE", value);
 
+};
 
+
 
+const audio = document.createElement("audio");
 
+audio.setAttribute("controls", "");
 
+audio.src = "/media/klychko.mp3";
 
+document.body.append(audio);
 
+
 
+const div = document.createElement("div");
 
+div.style.width = "300px";
 
+div.style.height = "300px";
 
+document.body.append(div);
 
+
 
+////сделать три крутилки для RGB
 
+////и обновлять цвет блока/фона блока при вращении любой из трех
 
+
 
+//setTimeout(() => volumeControl.setValue(80), 2000)

BIN
Крутилки/media/klychko.mp3
Wyświetl plik


+ 20 - 0
Крутилки/spinner.html
Wyświetl plik 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html>
 
+    <head>
 
+        <meta charset="utf-8" />
 
+        <meta name="viewport" content="width=device-width" />
 
+        <title>Другой тайтл ПРИВЕТ 17й</title>
 
+        <style>
 
+            
+            body{
 
+                padding: 400px
 
+            }
 
+            
+        </style>
 
+    </head>
 
+    <body>
 
+        <audio src="../Крутилки/media/klychko.mp3"></audio>
 
+        <div id='container1'></div>
 
+        <script src='index.js'></script>
 
+    </body>
 
+</html>