|
|
@@ -0,0 +1,150 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title></title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="container">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div id="container1">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div id="container2">
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <style>
|
|
|
+ img{
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ function Controll(el,{value=50,min=0,max=100,minAngel=0,maxAngel=360,step=1,wheelSpeed=0.1}={}){
|
|
|
+
|
|
|
+ const img=document.createElement('img');
|
|
|
+ img.src='http://c1.asmer.fe.a-level.com.ua/1@3x.png';
|
|
|
+ el.append(img);
|
|
|
+
|
|
|
+ const ratio=(maxAngel-minAngel) / (max-min);
|
|
|
+ const getAngel=()=>(value-min)*ratio+minAngel;
|
|
|
+
|
|
|
+ this.setValue=newValue=>{
|
|
|
+ if(newValue>max){
|
|
|
+ newValue=max;
|
|
|
+ }
|
|
|
+ if(newValue<min){
|
|
|
+ newValue=min;
|
|
|
+ }
|
|
|
+ value=newValue;
|
|
|
+ img.style.transform=`rotate(${getAngel()}deg)`;
|
|
|
+
|
|
|
+ if(this.onchange && typeof this.onchange==='function'){
|
|
|
+ this.onchange(value);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img.onmousewheel=e=>{
|
|
|
+ const {deltaY} = e;
|
|
|
+ const newValue = value+deltaY*wheelSpeed;
|
|
|
+ this.setValue(newValue);
|
|
|
+ e.preventDefault();
|
|
|
+ }
|
|
|
+
|
|
|
+ img.onclick=e=>{
|
|
|
+ console.log(e,img.width);
|
|
|
+ const {layerX}=e;
|
|
|
+ const {width} = img;
|
|
|
+ if(layerX>width/2){
|
|
|
+ this.setValue(value+step);
|
|
|
+ }else{
|
|
|
+ this.setValue(value-step);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const toDeg = rad => ((rad*180)/Math.PI+360+90)%360;
|
|
|
+ let prevMouseAngel=null;
|
|
|
+
|
|
|
+ img.onmousedown=e=>{
|
|
|
+ const y=e.layerY-img.height/2;
|
|
|
+ const x=e.layerX-img.width/2;
|
|
|
+ prevMouseAngel=toDeg(Math.atan2(y,x));
|
|
|
+
|
|
|
+ console.log(x,y,getAngel());
|
|
|
+ e.preventDefault();
|
|
|
+ }
|
|
|
+
|
|
|
+ img.onmousemove= e =>{
|
|
|
+ if(prevMouseAngel===null) return;
|
|
|
+ const y=e.layerY-img.height/2;
|
|
|
+ const x=e.layerX-img.width/2;
|
|
|
+ let currentAngel=toDeg(Math.atan2(y,x));
|
|
|
+ let moveAngelDiff=(currentAngel-prevMouseAngel);
|
|
|
+ this.setValue(value+moveAngelDiff/ratio);
|
|
|
+ prevMouseAngel = currentAngel;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getValue=function(){
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+
|
|
|
+ img.onmouseout=img.onmouseup=()=>{
|
|
|
+ prevMouseAngel=null;
|
|
|
+ }
|
|
|
+ this.setValue(value);
|
|
|
+ }
|
|
|
+
|
|
|
+ /*let volumeControl=new Controll(container,{value:50,min:0,max:100,minAngel:-90,maxAngel:90});
|
|
|
+ volumeControl.onchange=value=>console.log(value);
|
|
|
+ console.log(volumeControl.getValue());*/
|
|
|
+
|
|
|
+ function setRGB(){
|
|
|
+ document.body.style.background=`rgb(${red.getValue()},${blue.getValue()},${green.getValue()})`;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ let audio=document.createElement('audio');
|
|
|
+ container2.appendChild(audio);
|
|
|
+ audio.src="Mania-Вьюга.ogg";
|
|
|
+ audio.style.display=true;
|
|
|
+
|
|
|
+ audio.volume=0.2;
|
|
|
+ audio.controls=true;
|
|
|
+ audio.autoplay=true;
|
|
|
+ let time=audio.duration;
|
|
|
+
|
|
|
+ audio.onended=function(){
|
|
|
+ audio.remove();
|
|
|
+ }
|
|
|
+
|
|
|
+ function setVolume(){
|
|
|
+ audio.volume=volumeControl.getValue();
|
|
|
+ }
|
|
|
+
|
|
|
+ function setSpeed(){
|
|
|
+ audio.playbackRate=speedControl.getValue();
|
|
|
+ }
|
|
|
+
|
|
|
+ const red=new Controll(container,{min:0,max:255});
|
|
|
+ red.onchange=setRGB;
|
|
|
+
|
|
|
+ const green=new Controll(container,{min:0,max:255});
|
|
|
+ green.onchange=setRGB;
|
|
|
+
|
|
|
+ const blue=new Controll(container,{min:0,max:255});
|
|
|
+ blue.onchange=setRGB;
|
|
|
+
|
|
|
+ const volumeControl=new Controll(container1,{min:0,max:1,wheelSpeed:0.001,step:0.05});
|
|
|
+ volumeControl.onchange=setVolume;
|
|
|
+ const speedControl=new Controll(container1,{min:0.5,max:2,wheelSpeed:0.001,step:0.05});
|
|
|
+ speedControl.onchange=setSpeed;
|
|
|
+
|
|
|
+ </script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
