Home Explore Help
Register Sign In
illiaKozyr
/
Homework
Watch 1
Star 0
Fork 0
Files Issues 8 Pull Requests 0 Wiki
Browse Source

HW<HW 10 Крутилка> done

Illia Kozyr 1 year ago
parent
083547d397
commit
52d7e3d654
2 changed files with 65 additions and 77 deletions
Split View Show Diff Stats
  1. 51 60
      Крутилки/index.js
  2. 14 17
      Крутилки/spinner.html

+ 51 - 60
Крутилки/index.js
View File 

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

+ 14 - 17
Крутилки/spinner.html
View File 

@@ -1,20 +1,17 @@
 
 <!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>
 
-        
-        <div id='container1'></div>
 
-        <script src='index.js'></script>
 
-    </body>
 
+	<head>
 
+		<meta charset="utf-8" />
 
+		<meta name="viewport" content="width=device-width" />
 
+		<title>Другой тайтл ПРИВЕТ 17й</title>
 
+		<style>
 
+			body {
 
+				padding: 400px;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+		<div id="container1"></div>
 
+		<script src="index.js"></script>
 
+	</body>
 
 </html>