Arseniy_Yurchenko
/
Home_work_5


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
							<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Другой тайтл ПРИВЕТ 17й</title>
    <style>
    </style>
</head>

<body>
    <div id='container1'>
        <audio controls id="myaudio">
            <source src="DC.mp3">
        </audio>
    </div>
    <div id='container2'>
        <div id="color" style="border-radius: 100px; width: 150px; height: 150px;"></div>
    </div>

    <script>
        function Control(el, { value = 0, min = 0, max = 100, minAngle = 0, maxAngle = 360, wheelSpeed = 0.1, step = 10 } = {}) {
            const img = document.createElement('img')
            img.src = '1@3x.png'
            img.setAttribute("style", "width: 150px; height: 150px; margin: 10px 10px 10px 0px;")

            el.append(img)

            const ratio = (maxAngle - minAngle) / (max - min)
            const getAngle = () => minAngle + (this.value - min) * ratio

            const setValue = newValue => {
                if (newValue > max)
                    newValue = max
                if (newValue < min)
                    newValue = min

                this.value = newValue
                img.style.transform = `rotate(${getAngle()}deg)`
                console.log(value)
            }

            setValue(value)
            this.setValue = setValue

            img.onmousewheel = e => {
                const { deltaY } = e
                e.preventDefault()
                setValue(this.value + deltaY * wheelSpeed)
                this.onchange()
            }

            img.onclick = e => {
                const { layerX } = e
                if (layerX < 100) {
                    setValue(this.value - step)
                } else {
                    setValue(this.value + step)
                }
                this.onchange()
            }
        }

        /////

        const volumeControl = new Control(container1, { value: 0, min: 0, max: 100, minAngle: -90, maxAngle: +90 })

        let text = document.createElement('span')
        volumeControl.onchange = () => {

            let audio = document.getElementById("myaudio")
            audio.volume = volumeControl.value * 0.01

            text.innerText = `volume = ${volumeControl.value}`
            container1.append(text)
        }

        const redControl = new Control(container2, { value: 0, min: 0, max: 255, minAngle: -90, maxAngle: +90 })
        const greenControl = new Control(container2, { value: 0, min: 0, max: 255, minAngle: -90, maxAngle: +90 })
        const blueControl = new Control(container2, { value: 0, min: 0, max: 255, minAngle: -90, maxAngle: +90 })

        let color = document.getElementById('color')

        redControl.onchange = () => { color.style.backgroundColor = `rgb(${redControl.value}, ${greenControl.value}, ${blueControl.value})` }
        greenControl.onchange = () => { color.style.backgroundColor = `rgb(${redControl.value}, ${greenControl.value}, ${blueControl.value})` }
        blueControl.onchange = () => { color.style.backgroundColor = `rgb(${redControl.value}, ${greenControl.value}, ${blueControl.value})` }

    </script>
</body>

</html>