Browse Source

HWКрутилка done

AntonPyvovarov 1 year ago
parent
commit
0dd8eaa9f4

+ 12 - 0
HW10/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HW10</title>
+</head>
+<body>
+    <script src="main.js"></script>
+</body>
+</html>

+ 0 - 0
HW10/main.js


+ 75 - 17
HW9/main.js

@@ -15,33 +15,91 @@
 
 // makeSaver
 {
+    function makeSaver(fn) {
+        let saver = fn();
+        return function () {
+            return saver;
+        }
+    }
+
+    var saver = makeSaver(Math.random) //создает функцию-хранилище результата переданной в качестве параметра функции (Math.random 
+    // в примере). На этом этапе Math.random НЕ вызывается
+    var value1 = saver()              //saver вызывает переданную в makeSaver функцию, запоминает результат и возвращает его
+    var value2 = saver()              //saver в дальнейшем просто хранит результат функции, и более НЕ вызывает переданную 
+    //в makeSaver функцию;
+    value1 === value2                 // всегда true
+
+    var saver2 = makeSaver(() => console.log('saved function called') || [null, undefined, false, '', 0, Math.random()][Math.ceil(Math.random() * 6)])
+    var value3 = saver2()
+    var value4 = saver2()
+
+    value3 === value4 // тоже должно быть true
+
+    let namePrompt = prompt.bind(window, 'Как тебя зовут?')
+    let nameSaver = makeSaver(namePrompt)
+    alert(`Привет! Prompt еще не было!`)
+    alert(`Привет ${nameSaver()}. Только что запустился prompt, первый и последний раз`)
+    alert(`Слушай, ${nameSaver()}, го пить пиво. Ведь prompt был только один раз`)
 
 }
 
 // Final Countdown
 
 {
-    let seconds = 5;
-    function timer() {
-        console.log(seconds);
-        const timeout = setTimeout(() => {
-            timer();
-        }, 1000);
-        if (seconds > 0) {
-            return (function () {
-                return seconds--;
-            })();
-        }
-        clearTimeout(timeout);
-        if (seconds === 0) {
-            console.log("поехали!");
-        }
+    timer(+prompt("Введите количество секунд для отсчета", "5"));
+
+    function timer(t) {
+        let a = t;
+        (function tictac() {
+            for (a; a >= 0; a--) {
+                result = (a > 0) ? a : "поехали!";
+                setTimeout(console.log, 1000 * (t - a), result);
+            }
+        })();
     }
-    timer();
 
 }
 
-// myBind 
+// myBind  
 {
 
+    function myBind(fn, thisArg, bindedParams) {
+        return function (...params) {
+            let combinedParams = [];
+            for (let key in bindedParams) {
+                if (bindedParams[key] === undefined) {
+                    combinedParams.push(params.shift());
+                } else {
+                    combinedParams.push(bindedParams[key]);
+                }
+            }
+            if (params.length > 0) {
+                for (let value of params) {
+                    combinedParams.push(value);
+                }
+            }
+            return fn.call(thisArg, ...combinedParams);
+        }
+    }
+
+    var pow5 = myBind(Math.pow, Math, [undefined, 5]) // первый параметр - функция для биндинга значений по умолчанию, 
+    // второй - this для этой функции, третий - массив, в котором undefined означает
+    // параметры, которые должны передаваться при вызове,
+    // а другие значения являются значениями по умолчанию:
+    var cube = myBind(Math.pow, Math, [undefined, 3]) // cube возводит число в куб
+
+    pow5(2) // => 32, вызывает Math.pow(2,5), соотнесите с [undefined, 5]
+    cube(3) // => 27
+
+
+    var chessMin = myBind(Math.min, Math, [undefined, 4, undefined, 5, undefined, 8, undefined, 9])
+    chessMin(-1, -5, 3, 15) // вызывает Math.min(-1, 4, -5, 5, 3, 8, 15, 9), результат -5
+
+
+
+    var zeroPrompt = myBind(prompt, window, [undefined, "0"]) // аналогично, только теперь задается "0" как текст по умолчанию в prompt, 
+    // а текст приглашения пользователя задается при вызове zeroPrompt
+    var someNumber = zeroPrompt("Введите число")              // вызывает prompt("Введите число","0")
+
+    myBind((...params) => params.join(''), null, [undefined, 'b', undefined, undefined, 'e', 'f'])('a', 'c', 'd') === 'abcdef'
 }

BIN
Крутилка/1@3x.png


+ 22 - 0
Крутилка/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Крутилка</title>
+    <style>
+        body {
+            padding: 200px;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='colorbox'></div>
+    <script src="main.js"></script>
+</body>
+
+</html>

+ 96 - 0
Крутилка/main.js

@@ -0,0 +1,96 @@
+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 = "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);
+};
+
+let a, b, c;
+
+function setRGB() {
+    a = red.getValue();
+    b = green.getValue();
+    c = blue.getValue();
+
+    let rgbDone = (div.style.background = `rgb(${a}, ${b}, ${c})`);
+    return console.log(rgbDone);
+};
+
+const red = new Control(colorbox, { min: 0, max: 255 });
+red.onchange = setRGB;
+
+const green = new Control(colorbox, { min: 0, max: 255 });
+green.onchange = setRGB;
+
+const blue = new Control(colorbox, { min: 0, max: 255 });
+blue.onchange = setRGB;
+
+const volumeControl = new Control(colorbox, { value: 50 });
+volumeControl.onchange = (value) => {
+    audio.volume = value / 100;
+    console.log("ON CHANGE", value);
+};
+
+const audio = document.createElement("audio");
+audio.setAttribute("controls", "");
+audio.src = "Рингтон Доброго Вечора Ми З України - Probass X Hardi - mp36ka_net.mp3"; // путь к файлу могу не правильно указать, путаюсь
+audio.style.marginLeft = "200px";
+document.body.append(audio);
+
+const div = document.createElement("div");
+div.style.width = "725px";
+div.style.height = "800px";
+div.style.position = "relative";
+div.style.bottom = "800px"
+div.style.zIndex = "-1"
+
+document.body.append(div);

BIN
Крутилка/Рингтон Доброго Вечора Ми З України - Probass X Hardi - mp36ka_net.mp3