Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
serg1557733
/
HomeWorks
Xem 1
Star 0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu khéo về 0 Wiki
Browse Source

volume and color controls

serg155alternate 2 năm trước cách đây
mục cha
25751d5e1c
commit
3583d32320
8 tập tin đã thay đổi với 242 bổ sung và 9 xóa
Split View Hiển thị tình trạng sai khác
  1. 0 3
      Class works/cloders/script.js
  2. 3 3
      Class works/index.html
  3. BIN
      Class works/volume/1@3x.png
  4. 25 0
      Class works/volume/index.html
  5. 134 0
      Class works/volume/script.js
  6. 38 0
      Class works/volume/style.css
  7. 41 2
      HW10 Closures and scopes/script.js
  8. 1 1
      readme.md

+ 0 - 3
Class works/cloders/script.js
Xem Tập Tin 

@@ -1,11 +1,8 @@
 
 
 function clickCounter(elem){
 
     elem.onclick = clickCounter();
 
-    
     let counter = 0; 
     function clickCounter(){ 
-
 
-        
         return function() { 
         elem.innerHTML = `${counter}`; 
         console.log(counter)

+ 3 - 3
Class works/index.html
Xem Tập Tin 

@@ -8,9 +8,9 @@
 
     <link rel="stylesheet" href="style.css">
 
 </head>
 
 <body>
 
-
 
-    <table class="root">
 
-    </table>
 
+    
+    <div id="root">
 
+    </div>
 
     <script src="script.js"></script>
 
 </body>
 
 </html>

BIN
Class works/volume/1@3x.png
Xem Tập Tin


+ 25 - 0
Class works/volume/index.html
Xem Tập Tin 

@@ -0,0 +1,25 @@
 
+<!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>Volume and color adjastment</title>
 
+    <link rel="stylesheet" href="style.css">
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <div id="volume">
 
+            <audio controls>
 
+                <source src="./Nightingale.mp3" type="audio/mpeg">
 
+            </audio> 
+            
+        </div>
 
+        <div class="div"></div>
 
+         <h3>Rotate to change background color</h3>
 
+        <div id="root">
 
+        </div>
 
+    </div>
 
+    <script src="script.js"></script>
 
+</body>
 
+</html>

+ 134 - 0
Class works/volume/script.js
Xem Tập Tin 

@@ -0,0 +1,134 @@
 
+function Control(el, {
 
+    value = 0,
 
+    min = 0,
 
+    max = 100,
 
+    minAngle = 0,
 
+    maxAngle = 360,
 
+    wheelSpeed = 0.05,
 
+    step = 0.1
 
+} = {}) {
 
+
 
+    const img = document.createElement('img')
 
+    img.src = '1@3x.png'
 
+    el.append(img)
 
+
 
+    const ratio = (maxAngle - minAngle) / (max - min)
 
+    const getAngle = () => (value - min) * ratio + minAngle
 
+
 
+    this.setValue = newValue => {
 
+        if (newValue > max)
 
+            newValue = max
 
+        if (newValue < min)
 
+            newValue = min
 
+
 
+        if (typeof this.onchange === 'function' && newValue !== value)
 
+            this.onchange(newValue)
 
+
 
+        value = newValue
 
+
 
+        img.style.transform = `rotate(${getAngle()}deg)`
 
+    }
 
+
 
+    img.onmousewheel = (event) => {
 
+        const {
 
+            deltaY
 
+        } = event
 
+        this.setValue(value + deltaY * wheelSpeed)
 
+        event.preventDefault()
 
+    }
 
+
 
+    img.onclick = (event) => {
 
+        const {
 
+            layerX
 
+        } = event
 
+        if (layerX < img.width / 2)
 
+            this.setValue(value - step)
 
+        else
 
+            this.setValue(value + step)
 
+        event.preventDefault()
 
+    }
 
+
 
+    const event2Deg = event => {
 
+        const {
 
+            layerX,
 
+            layerY
 
+        } = event
 
+        const {
 
+            width,
 
+            height
 
+        } = img
 
+        const x = layerX - width / 2
 
+        const y = height / 2 - layerY
 
+
 
+        return ((Math.atan2(y, x) / (2 * Math.PI)) * 360 + 360) % 360
 
+    }
 
+
 
+    let prevAngle = null
 
+
 
+    img.onmousedown = (event) => {
 
+        prevAngle = event2Deg(event)
 
+    }
 
+
 
+    img.onmousemove = (event) => {
 
+        if (prevAngle === null) return 
+
 
+        const currentAngle = event2Deg(event)
 
+        const deltaValue = (prevAngle - currentAngle) / ratio
 
+        this.setValue(value + deltaValue)
 
+        prevAngle = currentAngle
 
+        event.preventDefault()
 
+    }
 
+
 
+    img.onmouseup = (event) => {
 
+        prevAngle = null
 
+    }
 
+
 
+
 
+    this.setValue(value)
 
+    this.getValue = () => value
 
+}
 
+
 
+const audio = document.querySelector('audio');
 
+
 
+const red = new Control(root, {
 
+    min: 0,
 
+    max: 255
 
+})
 
+
 
+const green = new Control(root, {
 
+    min: 0,
 
+    max: 255
 
+})
 
+
 
+const blue = new Control(root, {
 
+    min: 0,
 
+    max: 255
 
+})
 
+
 
+blue.onchange = setRGB;
 
+green.onchange = setRGB;
 
+red.onchange = setRGB;
 
+
 
+
 
+function setRGB() {
 
+    document.body.style.backgroundColor = `rgb(${red.getValue()},${green.getValue()},${blue.getValue()})`  
+}
 
+
 
+
 
+
 
+
 
+const volumeAdjust = new Control(volume, {
 
+    min: 0,
 
+    max: 1,
 
+    wheelSpeed: 0.0005,
 
+    step: 0.01
 
+    
+})
 
+
 
+volumeAdjust.onchange = setVolume;
 
+console.log(audio.volume);
 
+function setVolume() { 
+    console.log(volumeAdjust.getValue(), audio.volume)
 
+    audio.volume = `${volumeAdjust.getValue()}`
 
+}
 
+

+ 38 - 0
Class works/volume/style.css
Xem Tập Tin 

@@ -0,0 +1,38 @@
 
+*, html {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+.container {
 
+    position: relative;
 
+    max-width: 1140px;
 
+    margin: 0 auto;
 
+    padding: 50px;
 
+}
 
+
 
+audio {
 
+    display: inline-block;
 
+    margin: 0 auto;
 
+    margin-bottom: 20px;
 
+    
+}
 
+#root img {
 
+    width: 100px;
 
+    user-select: none;
 
+    height: 100px;
 
+    margin-left: 10px;
 
+}
 
+#volume img {
 
+    width: 80px;
 
+    height: 80px;
 
+    margin-left: 20px;
 
+}
 
+h3 {
 
+    margin-bottom: 20px;
 
+    height: 20px;
 
+    width: 300px;
 
+    background-color:rgb(252, 252, 252);
 
+    text-align: center;
 
+}
 
+p {
 
+    text-align: center;
 
+}

+ 41 - 2
HW10 Closures and scopes/script.js
Xem Tập Tin 

@@ -75,7 +75,7 @@ alert(`Слушай, ${nameSaver()}, го пить пиво. Ведь prompt б
 
    1 //пауза 1 секунда
 
    "поехали!" */
 
 
-
 
+/* 
 let counter = 5;
 
 function countdown() {
 
     console.log(counter);
 
@@ -90,4 +90,43 @@ function countdown() {
 
     } else clearInterval(int1);
 
 };   
 
-let int1 = setInterval(() => {countdown()}, 1000);
 
+let int1 = setInterval(() => {countdown()}, 1000); */
 
+
 
+//myBind
 
+
 
+/* let pow5 = myBind(Math.pow, Math, [undefined, 5]) // первый параметр - функция для биндинга значений по умолчанию, 
+                                                  // второй - this для этой функции, третий - массив, в котором undefined означает
 
+                                                  // параметры, которые должны передаваться при вызове,
 
+                                                  // а другие значения являются значениями по умолчанию:
 
+let cube = myBind(Math.pow, Math, [undefined, 3]) // cube возводит число в куб
 
+
 
+pow5(2) // => 32, вызывает Math.pow(2,5), соотнесите с [undefined, 5]
 
+cube(3) // => 27
 
+
 
+
 
+let 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
 
+
 
+
 
+
 
+let zeroPrompt = myBind(prompt, window, [undefined, "0"]) // аналогично, только теперь задается "0" как текст по умолчанию в prompt, 
+                                                          // а текст приглашения пользователя задается при вызове zeroPrompt
 
+let someNumber = zeroPrompt("Введите число")              // вызывает prompt("Введите число","0")
 
+
 
+myBind((...params) => params.join(''), null, [undefined, 'b', undefined, undefined, 'e', 'f'])('a','c','d') === 'abcdef' */
 
+
 
+
 
+function myBind(func, funcThis, arr){
 
+    let bindArray = arr;
 
+    let funcRes = func.bind(funcThis, ...bindArray);
 
+    function retFunc(...params){
 
+        console.log(bindArray);
 
+        return funcRes(...params);
 
+    }
 
+    return retFunc;
 
+}
 
+
 
+
 
+console.log(myBind(Math.pow, Math, [undefined, 5]));
 
+console.log(myBind((...params) => params.join(''), null, [undefined, 'b', undefined, undefined, 'e', 'f'])('a','c','d'));
 
+

+ 1 - 1
readme.md
Xem Tập Tin 

@@ -5,7 +5,7 @@ simple markup HW FE     http://markupfe.serg15577330.fe.a-level.com.ua/
 
 
 test task JS   [https://serg1557733.github.io/ ](http://)
 
 
-
 
+analog controls      http://controlers.serg15577330.fe.a-level.com.ua/
 
 
 Js functions and classes for creating cards, sliders and tabs http://food.serg15577330.fe.a-level.com.ua/