|
@@ -1,168 +1,13 @@
|
|
|
<!DOCTYPE html>
|
|
<!DOCTYPE html>
|
|
|
-<!-- <html lang="ru">
|
|
|
|
|
- <head>
|
|
|
|
|
- <meta charset="UTF-8" />
|
|
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
- <title>JS-classwork-array</title>
|
|
|
|
|
- </head>
|
|
|
|
|
- <body>
|
|
|
|
|
- <button id='button1'>button1</button>
|
|
|
|
|
- <button id='button2'>button2</button> -->
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-<html>
|
|
|
|
|
-
|
|
|
|
|
|
|
+<html lang="ru">
|
|
|
<head>
|
|
<head>
|
|
|
- <meta charset="utf-8" />
|
|
|
|
|
- <meta name="viewport" content="width=device-width" />
|
|
|
|
|
- <link rel="stylesheet" href="style.css">
|
|
|
|
|
- <title>Другой тайтл ПРИВЕТ 17й</title>
|
|
|
|
|
- <style>
|
|
|
|
|
- #container1 {
|
|
|
|
|
- padding: 400px;
|
|
|
|
|
- }
|
|
|
|
|
- </style>
|
|
|
|
|
|
|
+<meta charset="UTF-8" />
|
|
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
+ <title>JS-classwork-array</title>
|
|
|
</head>
|
|
</head>
|
|
|
-
|
|
|
|
|
<body>
|
|
<body>
|
|
|
-
|
|
|
|
|
-<div id='colorMixer' style='width:50px; height:50px; border-radius:50%; border: 3px solid grey'></div>
|
|
|
|
|
-<div id='buttonContainer' class='buttonContainer'></div>>
|
|
|
|
|
-<div id='container1'></div>
|
|
|
|
|
- <!-- <script src="/js/task-sum-array.js" type="module"></script>
|
|
|
|
|
- <script src="/js/table.js" type="module"></script> -->
|
|
|
|
|
- <!-- <script src="/js/myFilter.js" type="module"></script> -->
|
|
|
|
|
- <!-- <script> -->
|
|
|
|
|
- <!-- // let counter = 0;
|
|
|
|
|
- // function clickCounter (element) {
|
|
|
|
|
- // let counter = 0;
|
|
|
|
|
- // element.onclick = function () {
|
|
|
|
|
- // let counter = 0;
|
|
|
|
|
- // return element.innerText=counter++;
|
|
|
|
|
- // }
|
|
|
|
|
- // }
|
|
|
|
|
- // clickCounter (button1);
|
|
|
|
|
- // clickCounter(button2);
|
|
|
|
|
- // </script> -->
|
|
|
|
|
- <script>
|
|
|
|
|
-
|
|
|
|
|
- function Control(el, { value = 0,
|
|
|
|
|
- min = 0,
|
|
|
|
|
- max = 100,
|
|
|
|
|
- minAngle = 0,
|
|
|
|
|
- maxAngle = 360,
|
|
|
|
|
- wheelSpeed = 0.05,
|
|
|
|
|
- step = 1 } = {}) {
|
|
|
|
|
-
|
|
|
|
|
- const img = document.createElement('img')
|
|
|
|
|
- img.src = '1@3x.png'
|
|
|
|
|
- el.append(img);
|
|
|
|
|
- img.className = "colorButton";
|
|
|
|
|
-
|
|
|
|
|
- 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
|
|
|
|
|
- //console.log(deltaY)
|
|
|
|
|
- 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
|
|
|
|
|
-
|
|
|
|
|
- //console.log(x, y, width, height)
|
|
|
|
|
-
|
|
|
|
|
- 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
|
|
|
|
|
- //console.log(prevAngle - currentAngle, deltaValue)
|
|
|
|
|
- this.setValue(value + deltaValue)
|
|
|
|
|
- prevAngle = currentAngle
|
|
|
|
|
- event.preventDefault()
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- img.onmouseup = (event) => {
|
|
|
|
|
- prevAngle = null
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- this.setValue(value)
|
|
|
|
|
- this.getValue = () => value
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- const volumeControl = new Control(container1, {
|
|
|
|
|
- value: 75,
|
|
|
|
|
- min: 0,
|
|
|
|
|
- max: 100,
|
|
|
|
|
- minAngle: -90, maxAngle: 90
|
|
|
|
|
- })
|
|
|
|
|
- volumeControl.onchange = value => console.log('ON CHANGE', value) //на каждый setValue
|
|
|
|
|
- console.log(volumeControl.getValue())
|
|
|
|
|
- //пришейте к нему тэг audio для громкости
|
|
|
|
|
-
|
|
|
|
|
- function setRGB() {
|
|
|
|
|
-
|
|
|
|
|
- colorMixer.style.backgroundColor=`rgb(${red.getValue()},${green.getValue()},${blue.getValue()})`;
|
|
|
|
|
-
|
|
|
|
|
- //какой то блок, которому меняем цвет через rgba и цвета крутилок
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
-const red = new Control(buttonContainer, {min: 0, max: 255})
|
|
|
|
|
-red.onchange = setRGB
|
|
|
|
|
-const green = new Control(buttonContainer, {min: 0, max: 255})
|
|
|
|
|
-green.onchange = setRGB
|
|
|
|
|
-const blue = new Control(buttonContainer, {min: 0, max: 255})
|
|
|
|
|
-blue.onchange = setRGB
|
|
|
|
|
-
|
|
|
|
|
-////сделать три крутилки для RGB
|
|
|
|
|
-////и обновлять цвет блока/фона блока при вращении любой из трех
|
|
|
|
|
-
|
|
|
|
|
-//setTimeout(() => volumeControl.setValue(80), 2000)
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- </script>
|
|
|
|
|
- </body>
|
|
|
|
|
|
|
+ <script src="/js/task-sum-array.js" type="module"></script>
|
|
|
|
|
+ <script src="/js/table.js" type="module"></script>
|
|
|
|
|
+</body>
|
|
|
</html>
|
|
</html>
|
|
|
|
|
|
