Wednesday, August 11, 2021

Shadow button the code full!: now...🕒

This full code, I colored it later if not make small blogs about it's subsectios where I explain stuff. I dont much care about colorings. 

And https://praybook2.blogspot.com/2021/08/css-box-shadow-button-shadow-has-no.html this is the shadow button I mean.

<script id="primitives">

  

  

  var Test_timer;//=setInterval(myTimer, 1000);


 var shadowtest__StyleContainer=[] ;


  var shadowtest__numberRunner=-1;

  var shadowtest__thechosen=0;

  var shadowtest__freshfromContainer=false;


  var shadowtest__moveleft=10;


  var shadowtest__moveleft_speed=0;


  var shadowtest__movedown=10;

  var shadowtest__spray=10;

  var shadowtest__size=10;

  var shadowtest__color_R=120;

  var shadowtest__color_G=20;

  var shadowtest__color_B=50;

  var shadowtest__color_O=1;

  


   var shadowtest__color="rgba"+"("+shadowtest__color_R+","+ shadowtest__color_G+","+ shadowtest__color_B+","+ shadowtest__color_O+")" ;

  // var box_shadow=" 0 4px 87px 190px rgba(0, 0, 0, 0.2)"; 0px   0px  0px  0px  rgba(0,0,0,1)

   var box_shadow="box-shadow: "+shadowtest__moveleft+"px   "+shadowtest__movedown+"px  "+shadowtest__spray+"px  "+ shadowtest__size+"px  "+ shadowtest__color+";";

  var  altering=true;

</script>


<script>

  //////////////////////////////////////////////////////////////////////////////

</script>


<script id="opjects">

     var ading={red:1,green:1,blue:1,opacity:-0.01};

   var ColorsAndOpacity={

    red:215,green:215,blue:215,opacity:1,

first:true


    };


  var  RgbaColor={string:"rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green +","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")"};


  var  CollectionOfValues={

     left:20,down:20,spray:20,size:20

    }

 // CollectionOfValues.spray=1

  var speeds={ left:5,down:5,spray:5,size:5};

    var fullStyle={

    PutThisInCSS:" "+CollectionOfValues.left+"px   "+CollectionOfValues.down+"px  "+CollectionOfValues.spray+"px  "+ CollectionOfValues.size+"px  "+ RgbaColor.string+"",

string:"rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green +","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")",

    left:CollectionOfValues.left,down:CollectionOfValues.down,spray:CollectionOfValues.spray,size:CollectionOfValues.size,

     red:ColorsAndOpacity.red,green:ColorsAndOpacity.green,blue:ColorsAndOpacity.blue,opacity:ColorsAndOpacity.opacity

      ,first:true

    };

</script>


<script>

  //////////////////////////////////////////////////////////////////////////////

</script>

<script id="functions">


  

  function usefromcontainer(){

    //console.log(fullStyle.PutThisInCSS);

  fullStyle.PutThisInCSS=shadowtest__StyleContainer[shadowtest__thechosen].PutThisInCSS;// pitää     päivitää niitä väli vaiheita

    ColorsAndOpacity.red=shadowtest__StyleContainer[shadowtest__thechosen].red;

    ColorsAndOpacity.blue=shadowtest__StyleContainer[shadowtest__thechosen].blue;

    ColorsAndOpacity.green=shadowtest__StyleContainer[shadowtest__thechosen].green;

    ColorsAndOpacity.opacity=shadowtest__StyleContainer[shadowtest__thechosen].opacity;

     ColorsAndOpacity.first=shadowtest__StyleContainer[shadowtest__thechosen].first;

    

    

    CollectionOfValues.left=shadowtest__StyleContainer[shadowtest__thechosen].left;

    CollectionOfValues.down=shadowtest__StyleContainer[shadowtest__thechosen].down;

  CollectionOfValues.spray=shadowtest__StyleContainer[shadowtest__thechosen].spray;

    CollectionOfValues.size=shadowtest__StyleContainer[shadowtest__thechosen].size;

   RgbaColor.string=shadowtest__StyleContainer[shadowtest__thechosen].string;

  fullStyle= JSON.parse(JSON.stringify(shadowtest__StyleContainer[shadowtest__thechosen]));

    //fullStyle.PutThisInCSS=

    

   


 

  

  }

  

      function Changespeeddirect(){

    speeds["left"]=speeds["left"]*(-1);

    


    }



    function AlterStrings(){


      if(altering){


      changestring2("-","shadowtest__moveleft__direction_span");


      altering=false;

      }else{


      changestring2("+","shadowtest__moveleft__direction_span");


      altering=true;

      }

    }



      function moveClection(Ob,K){

    updatingStylePosition(Ob,K);

    hierspeeds(K);

    writeStyle();

    }



      function updatingStylePosition(object,key){

    //console.log( );

      object[key]=object[key]+speeds[key];

    //console.log(object[key]);

   // console.log(speeds[key]);


    }

    function hierspeeds( key){

   //  speeds[key]++;// tässä virhe

    speeds[key]=speeds[key]+speeds[key];

    }


    function writeStyle(){

 

      if(shadowtest__freshfromContainer){

      usefromcontainer();

        shadowtest__freshfromContainer=false;

      }

      

      UpdateStyleColor();

      UpdatefullStyle(); 

       const clonefullStyle= JSON.parse(JSON.stringify(fullStyle));


      

       shadowtest__StyleContainer[shadowtest__thechosen]=  clonefullStyle; 

      var stringi="";

      var stringi2="";

      

      

    for(let i = 0; i <= (shadowtest__numberRunner); i++){

      //    for(i; i > 0; i--){  

           

       if(i==0){

       //stringi=stringi+shadowtest__StyleContainer[i];

         

         if(shadowtest__thechosen==i){

         stringi="👉"+shadowtest__StyleContainer[i].PutThisInCSS+"👈"+ stringi;

         }else{

         

         stringi= shadowtest__StyleContainer[i].PutThisInCSS+ stringi;

         }

          stringi2=shadowtest__StyleContainer[i].PutThisInCSS+ stringi2;

        // stringi=shadowtest__StyleContainer[i].PutThisInCSS+ stringi;

         

   //SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ stringi+";}");

         

   //SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ stringi+";}","shadowtest__ShowThestyle_span",0,"span");

       }else{

       //stringi=stringi+","+shadowtest__StyleContainer[i];

         if(shadowtest__thechosen==i){

          stringi= "👉"+shadowtest__StyleContainer[i].PutThisInCSS+"👈"+ ","+stringi;

         }else{

         

          stringi= shadowtest__StyleContainer[i].PutThisInCSS+ ","+stringi;

         

         }

         stringi2= shadowtest__StyleContainer[i].PutThisInCSS+ ","+stringi2;

       

        // }

        // console.log(shadowtest__StyleContainer[i].PutThisInCSS+ "  "+222222222222222+" " +i);

   

       //  SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ stringi+";}");

      

      //   SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ stringi+";}","shadowtest__ShowThestyle_span",0,"span");   

         

       }

    }

      

      SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ stringi2+";}");

         

   SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ stringi+";}","shadowtest__ShowThestyle_span",0,"span"); 


    }



      function ColorthingysR(classnames,buttoncolor){

    var class_name = document.getElementsByClassName(classnames)[0];

    var ColorButton=document.getElementsByClassName(buttoncolor)[0];

    shadowtest__color_R++;

      //milloinkohan kierähtää ympäri

    if( shadowtest__color_R==216){

      shadowtest__color_R=0;

      }


      shadowtest__color="rgba"+"("+shadowtest__color_R+","+ shadowtest__color_G+","+ shadowtest__color_B+","+ shadowtest__color_O+")" ;


        ColorButton.style.backgroundColor = shadowtest__color;

     // console.log(shadowtest__color);

    }


     function Colorthingys(classnames,buttonToColorClassName){

    var class_name = document.getElementsByClassName(classnames)[0];

    var ColorButton=document.getElementsByClassName(buttonToColorClassName)[0];

    shadowtest__color_R++;

       

    if( shadowtest__color_R==216){

      shadowtest__color_R=0;

      }


      shadowtest__color="rgba"+"("+shadowtest__color_R+","+ shadowtest__color_G+","+ shadowtest__color_B+","+ shadowtest__color_O+")" ;


        ColorButton.style.backgroundColor = shadowtest__color;

     // console.log(shadowtest__color);

    }






     function SingAndDanceAddelements(StringTheStyle){


     var styleT = document.createElement("style");

  styleT.setAttribute("id","TheStyle");

  styleT.appendChild(document.createTextNode(StringTheStyle));


     var Laying_styleT=document.getElementById("TheStyle");

  var parentstyle = Laying_styleT.parentNode;


  // Laying_styleT=document.getElementById("style_tulevat");

  //parentstyle = Laying_styleT.parentNode;

  parentstyle.replaceChild(styleT,Laying_styleT);



   }

 // SingAndDanceAddelements3(,"shadowtest__ShowThestyle_span",0,"span");

 function SingAndDanceAddelements3(StringTheStyle,className,classorder,element){


     var styleT = document.createElement(element);//siis teen style id kopion 2 kopioita ja sitten pyöritän niitä

  styleT.setAttribute("class",className);

  styleT.appendChild(document.createTextNode(StringTheStyle));

//console.log(className);

 // var Laying_styleT= getElementsByClassName(className)[classorder];

 // var Laying_styleT= getElementsByClassName(className) ;

   var Laying_styleT= document.getElementsByClassName(className)[classorder] ;

  // var Laying_styleT=document.getElementById("TheStyle");

  var parentstyle = Laying_styleT.parentNode;


  // Laying_styleT=document.getElementById("style_tulevat");

  //parentstyle = Laying_styleT.parentNode;

  parentstyle.replaceChild(styleT,Laying_styleT);



   }


      function ButtonEventmaker(object){

     // object.EventFunctionPairarray;

     // object.ButtonClass

    var length= object.events.length;

      for (let i = 0; i < length; i+=2) {

   

      ButtonControl( object.class,object.events[i],  object.events[i+1]);

      }


    }


    function TakeColor(ClassName){

  //  console.log("!");

    var ColorButton=  document.getElementsByClassName(ClassName)[0];

  //   console.log(ColorButton);

     // ColorButton.style.backgroundColor

      // ColorButton.style.backgroundColor = shadowtest__color;

      ColorButton.style.backgroundColor = RgbaColor.string;

     // console.log("hiu e");

     // RgbaColor.string

     // uudelleen piirto

      writeStyle();

    }


 

 

  function SingAndDanceAddelements2(StringTheinner, element,atributelist,classname,classnumber){


     var styleT = document.createElement(element);

       var length= atributelist.length;

      for (let i = 0; i < length; i+=2) {

      //object.EventFunctionPairarray[i];

      //object.EventFunctionPairarray[i+1];

      //  console.log(object.events[i]);

     //   console.log(object.events[i+1]);

     //   console.log(object.class )

    //  ButtonControl( object.class,object.events[i],  object.events[i+1]);

     styleT.setAttribute(atributelist[i],atributelist[i+1]);

      }




     styleT.appendChild(document.createTextNode(StringTheinner));

    // getElementsByClassName


     //var Laying_styleT=document.getElementById("TheStyle");

     var Laying_styleT=document.getElementsByClassName(classname)[classnumber];

  var parentstyle = Laying_styleT.parentNode;


  // Laying_styleT=document.getElementById("style_tulevat");

  //parentstyle = Laying_styleT.parentNode;

  parentstyle.replaceChild(styleT,Laying_styleT);



   }


     function MakeNewBoxShadow(){


     if(shadowtest__numberRunner==-1){

     //tringStyle=stringStyle+fullStyle.PutThisInCSS;

       

         SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ fullStyle.PutThisInCSS+";}");

       //tähän kirjoitan yhden sellaisen

        SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ fullStyle.PutThisInCSS+";}","shadowtest__ShowThestyle_span",0,"span");

       

       document.getElementById("hideandrise").style.display = "block";

       document.getElementById("hideandrise").style.animation = "visible 4s 1";

       document.getElementById("hideandrise").style.opacity = "1.0";

       //plauu

       

       //.style.animation = "mynewmove 4s 2"


     }else{

//console.log(shadowtest__StyleContainer[shadowtest__numberRunner].left );

      // console.log(shadowtest__numberRunner);

    // console.log( shadowtest__StyleContainer[shadowtest__numberRunner]);

       //0px   0px  0px  0px  rgba(0,0,0,1) box-shadow:

      // SingAndDanceAddelements(" .shadowtest__shower{"+box_shadow+"}");



      //console.log(shadowtest__numberRunner);

    var stringStyle2="";

    var stringStyle="";

     for(let i = 0; i <= (shadowtest__numberRunner); i++){

       if(i==0){ 

       //stringStyle=stringStyle+shadowtest__StyleContainer[i];

          stringStyle=shadowtest__StyleContainer[i].PutThisInCSS+stringStyle;

        // if(shadowtest__thechosen==i){

        //  stringStyle2="👉"+shadowtest__StyleContainer[i].PutThisInCSS+"👈"+stringStyle2;

        // }else{

         stringStyle2=shadowtest__StyleContainer[i].PutThisInCSS+stringStyle2;

        // }

       }else{

       //stringStyle=stringStyle+","+shadowtest__StyleContainer[i];

          stringStyle=shadowtest__StyleContainer[i].PutThisInCSS+","+stringStyle;

         // if(shadowtest__thechosen==i){

         //  stringStyle2="👉"+shadowtest__StyleContainer[i].PutThisInCSS+","+"👈"+stringStyle2;

         // }else{

         stringStyle2=shadowtest__StyleContainer[i].PutThisInCSS+","+stringStyle2;

         // }

       //  console.log(shadowtest__StyleContainer[i].PutThisInCSS+ "  "+222222222222222);

        /* 

   SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ stringStyle+";}");

     SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ stringStyle+";}","shadowtest__ShowThestyle_span",0,"span");

       */

       }

      

     } 

      // fullStyle.first=true;

        stringStyle=fullStyle.PutThisInCSS+","+stringStyle;  

        stringStyle2="👉"+fullStyle.PutThisInCSS+"👈"+","+stringStyle2;

       

        SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ stringStyle+";}");

     SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ stringStyle2+";}","shadowtest__ShowThestyle_span",0,"span");

//writeStyle();"👉""👈"


      }


    // console.log(" .shadowtest__shower{"+box_shadow+"}");

  //   SingAndDanceAddelements(" .shadowtest__shower{ box-shadow: 10px   20px  20px  10px  rgba(145,93,93,1);}");

     shadowtest__numberRunner++;

      // console.log(fullStyle.first +" first first first")

       fullStyle.first=true;

      shadowtest__StyleContainer.push(JSON.parse(JSON.stringify(fullStyle))); 

      fullStyle.first=false;

//shadowtest__thechosen=shadowtest__numberRunner;

       shadowtest__thechosen=shadowtest__numberRunner;


   }



      function AddShadowstoAStyle(){

    

      // box_shadow miten tään styleksi

    }

  //  ButtonLoopOver([]);


  function ButtonLoopOver(array){

    const LENGTH=array.length;

   // console.log("liii i hiuss "+LENGTH);

    for(let i = 0; i < LENGTH; i++){

    //console.log(i);

       ButtonEventmaker(array[i]);

    }


  }


  function ButtonControl(Classofthebutton, event, appening){

    try{

  var class_name = document.getElementsByClassName(Classofthebutton)[0];

    class_name.addEventListener(event, appening);

    }catch(error){}


  }

  function movethe(){


  }




      function UpdateStyleColor(){

  /*  shadowtest__color="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green+","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")" ; */

     

       // ColorsAndOpacity.red

        

      RgbaColor.string="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green+","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")" ;


      //console.log(RgbaColor.string);


    }

      function UpdateStyleColor2(color){

  /*  shadowtest__color="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green+","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")" ; */

      

       // ColorsAndOpacity.red

        //first

        

        //  rgb(205, 35, 37)  red

                    // rgb(34, 211, 37) green

                    //rgb(23, 23, 183)  blue

                        

        

        if(ColorsAndOpacity.first){

       

          ColorsAndOpacity.first=false;

          if(color=="red"){

            ColorsAndOpacity.red=205;

            ColorsAndOpacity.green=35;

            ColorsAndOpacity.blue=37;

            }

          if(color=="green"){

             ColorsAndOpacity.red=35;

            ColorsAndOpacity.green=211;

            ColorsAndOpacity.blue=37;

          }

          if(color=="blue"){

          ColorsAndOpacity.red=23;

            ColorsAndOpacity.green=23;

            ColorsAndOpacity.blue=183;

          

          }

          if(color=="opacity"){

          ColorsAndOpacity.first=true;

          

          

          }

        

        }

        

      RgbaColor.string="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green+","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")" ;


      //console.log(RgbaColor.string);


    }


    function notoimiikst(x,key){

    x[key]++

      //console.log(x[key]);


    }


   function UpdatefullStyle(){

   fullStyle.PutThisInCSS=" "+CollectionOfValues.left+"px   "+CollectionOfValues.down+"px  "+CollectionOfValues.spray+"px  "+ CollectionOfValues.size+"px  "+ RgbaColor.string+"";


 fullStyle.string="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green +","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")";

   

    fullStyle.left=CollectionOfValues.left;

     

     fullStyle.down=CollectionOfValues.down;

     fullStyle.spray=CollectionOfValues.spray; 

     fullStyle.size=CollectionOfValues.size;

     

     fullStyle.red=ColorsAndOpacity.red;

     fullStyle.green=ColorsAndOpacity.green;

     fullStyle.blue=ColorsAndOpacity.blue;

     fullStyle.opacity=ColorsAndOpacity.opacity;

     

     fullStyle.first=ColorsAndOpacity.first;

     

   }


      function changestring(newstring,element,classname){


    SingAndDanceAddelements2(newstring,element,["class",classname],classname,0);

    }

     function changestring2(newstring,classname){


    SingAndDanceAddelements2(newstring,"span",["class",classname],classname,0);

    }



  function ColorChanguniver(buttoncolor,ref,key){

   // var class_name = document.getElementsByClassName(classnames)[0];

    var ColorButton=document.getElementsByClassName(buttoncolor)[0];

    ref[key]=ref[key]+ading[key];

      

    if( ref[key]==216){


        ading[key]=-1;


      }

        if( ref[key]==-1){

        ref[key]=0;

        ading[key]=1;

        }

      

    /*  shadowtest__color="rgba"+"("+ColorsAndOpacity.redNum+","+ ColorsAndOpacity.greenNum+","+ ColorsAndOpacity.blueNum+","+ ColorsAndOpacity.opacity+")" ;*/


       // UpdateStyleColor();

    UpdateStyleColor2(key);

       // UpdatefullStyle();

     // rbg.string=rbg.string;


        //ColorButton.style.backgroundColor =  rbg.string;

        ColorButton.style.backgroundColor =   RgbaColor.string;

     // console.log( RgbaColor.string);

    }

    function opasity(buttoncolor,ref,key){

      var ColorButton=document.getElementsByClassName(buttoncolor)[0];

      ref[key]=ref[key]+ading[key];

      if( ref[key]>=1){

      ref[key]=1;

        ading[key]=-0.01;


      }

        if( ref[key]<=0){

        ref[key]=0;

        ading[key]=0.01;

        }


      //shadowtest__color="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green+","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")" ;

       //ColorButton.style.backgroundColor =   shadowtest__color;

      //console.log(  shadowtest__color);

      writeStyle();

    }




    function ShadowMoveLeft(){

   shadowtest__moveleft=shadowtest__moveleft+ shadowtest__moveleft_speed;

   //shadowtest__moveleft_speed++;

     ///if(){} no stops

   //  console.log("move "+ shadowtest__moveleft);

   }

  function ShadowSpeed(){

   //shadowtest__moveleft++;

   shadowtest__moveleft_speed++;

     ///if(){} no stops

   //  console.log("speed "+shadowtest__moveleft_speed);

   }

  function test(){

   ShadowSpeed();


  }

  function test2(){

  // ShadowMoveLeft();

  Test_timer=setInterval(myTimer, 1000);

  }

  function myTimer(){

  ShadowMoveLeft();


  }

   function test3(){

   clearInterval(Test_timer);

   }

</script>


<script>

  //////////////////////////////////////////////////////////////////////////////

</script>


<script id="construct">


    class moveC{


      

      #alterinhere;

        #timerholder;

      #speedOrder;

    constructor(object,key,drawfunctio){

          

         // this.exlude=ecludeThese;// string aray

              

          

          this.speeds=[5,10,20,30,40,60,70,80,90,100];

          this.negaspeeds=[-1,-10,-20,-30,-40,-60,-70,-80,-90,-100];    

              

          this.Out=true;

            this.thekey=key;

            this.#speedOrder=-1;

            this.noexluded=true;

            this.#timerholder;

            this.#alterinhere=true;

            this.draw=drawfunctio;

            this.negaspeedson=false;

// this.Outfrominer=true;

    //      this.status=[this.Out,this.noexluded,this.Outfrominer]; 

        

          //this.Waitout=await

            /* this.classTest={

          hui:"ki",tui:2,Poo:"em"



          }; */


          }

      

      

           AlterStrings(tHis,toThis,className){


      if( this.#alterinhere){


      changestring2(toThis,className);


       this.#alterinhere=false;

      }else{


      changestring2(tHis,className);


       this.#alterinhere=true;

      }

    }

      

      console(){

      console.log("proto rype");

      }

      #realstop(){

         

          //pysäyttää vain jos [true, false]

          if(this.Out){// according that this can stop and then begin the timer

//try{

             clearInterval(this.#timerholder);

          //  ()=>{clearInterval(this.#timerholder);};

            //}catch(e){}

         //  console.log(this.Out+ "  hh ui ");

          }

// console.log(this.Out+ "  hiii hiii ");



          }

      changeplustominus(){

        

        if(this.#speedOrder==-1){this.#speedOrder=0;}

      if( this.negaspeedson){

        

        

      speeds[this.thekey]=this.speeds[this.#speedOrder];  

      this.negaspeedson=false;

      }else{

      

      speeds[this.thekey]=this.negaspeeds[this.#speedOrder];  

      this.negaspeedson=true;

      }

        //käänetääs -+

        

      

      }

      

      speedup(){

        this.#speedOrder++;

        

        if(!this.negaspeedson){

      speeds[this.thekey]=this.speeds[this.#speedOrder];

        }else{

      speeds[this.thekey]=this.negaspeeds[this.#speedOrder];   

        }

        

        

        if(this.#speedOrder==9){

        this.#speedOrder=-1;

         // console.log(speeds[this.thekey]);

        }

      

      }

      

      #timer(r){

      clearInterval(this.#timerholder);

     this.#timerholder= setInterval(()=>{  this.#realstop();this.draw();this.fixer();}, r);

      }

  

      enter(){


this.#timer(1000);

           this.Out=false;

           //this.status[0]=this.Out;

           // console.log(this.Out + " enter");

          //  console.log(this.status);

          }

      fixer(){

      

      

      }

      leave(){

 if(this.noexluded){

         this.Out=true;

 }else{

 this.Out=false;

 this.noexluded=true;

   clearInterval(this.#timerholder);

 }

        //    this.noexluded=true;

        //    this.status[1]=this.noexluded;

         //  this.status[0]=this.Out;

         //   this.status[1]=this.noexluded;


       // console.log(this.Out + " leave"  );

          }

      //This time I can't use endless new because I it is internal flag no external 

      exlude(){


            //new Promise(()=>{});

           // console.log("witch");

          this.Out=false;

           // this.status[1]=this.noexluded;

    //console.log(this.Out+ " ");


          }

      exludeEnded(){

          

         // this.Outfrominer=false;


       //   this.noexluded=true;

         // Outfrominer

         //  this.Out=false;

          this.noexluded=false;

       //    this.status[0]=this.Out;

         //  this.status[1]=this.noexluded;

         //  this.status[2]=this.Outfrominer;

          // console.log(this.Out+" exlEnded");

          }

      #check(){

      new Promise(()=>{


     // console.log(this.noOut);

       return this.noOut;

      });


      }


      //speeds=[10,20,]

    }

    //console.log(moveC);


        class OnMouseOver3{

    constructor( functionContinuing,interval) {


  // this.SaveClass=Nameclass; //I may not need a event in here. 

   this.Savefunction=functionContinuing;

   this.Saveinterval=interval;

   this.SaveTimer=  setInterval(this.Savefunction, this.Saveinterval);


    }

       //set setInterval(this.Savefunction, this.Saveinterval);

    // this.Leave=stop();

      stop (){

    // console.log("end end eeeeeeee");

     clearInterval(this.SaveTimer);

     }

    }


   class OnMouseOverChangeColor{

    constructor(Nameclass,interval,classname,classnameTarget,Colornum,referenssi) {



   this.SaveClass=Nameclass; //En taida tarvita täällä eventtii

   //this.Savefunction=functionContinuing;

   this.Saveinterval=interval;

   this.class_name=classname;

   this.ClassNameTarget=classnameTarget;

   this.colornum=Colornum;

   //this.SaveTimer=  setInterval(this.Savefunction, this.Saveinterval);


      //  #ovettestinner(){


         // this.#testinner(2);

        //  }


    }



         Test(){setInterval( this.#testinner, 1000);}


         // Test(){setInterval( function(){this.#testinner} , 1000);}



     Exit(){

     //console.log("end end eeeeeeee");

     clearInterval(this.SaveTimer);

     }

          /*

          #ovettestinner(){


          this.#testinner(2);

          }

          */



          #testinner(){

          //console.log("tiu tiu "+Nameclass);




          }

   //var re=22;

         #ColorC(classnames,buttonToColorClassName, noy){

   // console.log(noy);

   // function (classnames,buttonToColorClassName){

    var class_name = document.getElementsByClassName(classnames)[0];

    var ColorButton=document.getElementsByClassName(buttonToColorClassName)[0];

    //shadowtest__color_R++;//  

         this.colornum++

       

    // if( shadowtest__color_R==216){

      if( this.colornum==216){


      //shadowtest__color_R=0;

       this.colornum=0;

      }

        shadowtest__color="rgba"+"("+this.colornum+","+ shadowtest__color_G+","+ shadowtest__color_B+","+ shadowtest__color_O+")" ;


        ColorButton.style.backgroundColor = shadowtest__color;

     // console.log(shadowtest__color);

    // console.log(      RgbaColor);


          // return this.colornum;

            

    }

     



        }

</script>

<script>

  //////////////////////////////////////////////////////////////////////////////

</script>


<style id="TheStyle"></style>

<style id="TheStyle_Static_Old">

  @keyframes visible {

    0% {opacity: 0.0;}

    100% {opacity: 1.0;}

  }

</style>

<script>



















 



  /*


    */

  


  

  

  var Holder_OnmouseOver_R;

  var Holder_OnmouseOver_G;

  var Holder_OnmouseOver_B;

  var Holder_OnmouseOver_O;


speeds.down=5;

  

  var moveDown= new moveC(speeds,"down",()=>{console.log("ehm"); CollectionOfValues.down=CollectionOfValues.down+speeds.down; writeStyle();});

  var sizeChange=new moveC(speeds,"size",()=>{CollectionOfValues.size=CollectionOfValues.size+speeds.size; writeStyle();});

  var leftMove=new moveC(speeds,"left",()=>{CollectionOfValues.left=CollectionOfValues.left+speeds.left; writeStyle();});

  //var left

   

  moveC.prototype.console=function (){

 // console.log("triiii riii rteiiii");

  }

  moveC.prototype.fixer = function () {

 // this.console();

      if(CollectionOfValues.spray<0){

      CollectionOfValues.spray=1;

        this.changeplustominus();

        this.AlterStrings("+","-","shadowtest__spray__direction_span");

        this.console();

      }

    if(CollectionOfValues.spray<0){

     CollectionOfValues.spray=200;

    }

      

}

 

  /*

  moveC.prototype.#timer=function(r){

      clearInterval(this.#timerholder);

     this.#timerholder= setInterval(()=>{  this.#realstop();this.draw();}, r);

      }

  

   //mouse overiksi

  */

 // console()

  //this.AlterStrings("+","-","shadowtest__spray__direction_span");

  var sprayer=new moveC(speeds,"spray",()=>{CollectionOfValues.spray=CollectionOfValues.spray+speeds.spray; writeStyle();});

  

  //moveDown.timer(1000);//

   // console.log(moveC);

    //console.log(moveDown);

    //console.log(moveDown.classTest.hui);



   const BUTTON_DATA =[{

  class:"t",

  events:["click", function(){shadowtest__moveleft_speed++;console.log("speed "+shadowtest__moveleft_speed);},"mouseenter",test2,"mouseout",test3]

  },

  {

  class:"tx",

  events:["click", function(){shadowtest__moveleft_speed++;console.log("speed "+shadowtest__moveleft_speed);},"mouseenter",test2,"mouseout",test3]




  } ,

  {

  class:"shadowtest__shower",

  events:["click",  MakeNewBoxShadow]




  },

   {

     class:"shadowtest__colorchoose",

     events:["click",()=>{TakeColor("shadowtest__colorchoose"); }]



  },{

  class:"shadowtest__colorchoose__R",

  //events:["click",()=>ColorthingysR("shadowtest__colorchoose__R","shadowtest__colorchoose")]

  events:["mouseenter",()=>{Holder_OnmouseOver_R= new OnMouseOver3(function li(){  ColorChanguniver( "shadowtest__colorchoose",ColorsAndOpacity,"red");   },36)} ,"mouseout",()=>{Holder_OnmouseOver_R.stop();}]


  },{

  class:"shadowtest__colorchoose__G",

  //events:["click",()=>ColorthingysR("shadowtest__colorchoose__R","shadowtest__colorchoose")]

  events:["mouseenter",()=>{Holder_OnmouseOver_G= new OnMouseOver3(function li(){  ColorChanguniver( "shadowtest__colorchoose",ColorsAndOpacity,"green");   },36)} ,"mouseout",()=>{Holder_OnmouseOver_G.stop();}]


  },{

  class:"shadowtest__colorchoose__B",

  //events:["click",()=>ColorthingysR("shadowtest__colorchoose__R","shadowtest__colorchoose")]

  events:["mouseenter",()=>{Holder_OnmouseOver_B= new OnMouseOver3(function li(){  ColorChanguniver( "shadowtest__colorchoose",ColorsAndOpacity,"blue");   },36)} ,"mouseout",()=>{Holder_OnmouseOver_B.stop(); }]


  },{

  class:"shadowtest__colorchoose__O",

  //events:["click",()=>ColorthingysR("shadowtest__colorchoose__R","shadowtest__colorchoose")]

  events:["mouseenter",()=>{Holder_OnmouseOver_O= new OnMouseOver3(function li(){  opasity( "shadowtest__colorchoose",ColorsAndOpacity,"opacity");   },66)} ,"mouseout",()=>{Holder_OnmouseOver_O.stop(); }]


  },{

  class:"shadowtest__spray_span",

  events:["click",()=>{ console.log( document.getElementsByClassName("shadowtest__spray_span")[0].style.backgroundColor="inherit" ); UpdatefullStyle();  }]


  },

                       

                       //

                  /*       {


   class:"shadowtest__moveleft",

   events:["click",()=>{leftMove.speedup();},"mouseenter",()=>{leftMove.enter();},"mouseout",()=>{ leftMove.leave();}]

   //siis teen liikeelle saman tyylisen contruction kuin väreille mutta styyli muuttuu



   },{


   class:"shadowtest__moveleft_span",

   events:["mouseenter",()=>{leftMove.exlude();},"mouseout",()=>{leftMove.exludeEnded();}]

   },

                       

                 */ 

               {


   class:"shadowtest__moveleft",

   events:["click",()=>{leftMove.speedup();},"mouseover",()=>{leftMove.enter();},"mouseout",()=>{ leftMove.leave();}]

   //siis teen liikeelle saman tyylisen contruction kuin väreille mutta styyli muuttuu



   },

                       {

   class:"shadowtest__moveleft__direction",

   events:["click",()=>{leftMove.changeplustominus(); leftMove.AlterStrings("+","-","shadowtest__moveleft__direction_span");}]

   },

                       

                       ///

  {


   class:"shadowtest__movedown",

   events:["click",()=>{moveDown.speedup();},"mouseenter",()=>{moveDown.enter();},"mouseout",()=>{ moveDown.leave();}]

   //siis teen liikeelle saman tyylisen contruction kuin väreille mutta styyli muuttuu



   },{


   class:"shadowtest__movedown_span",

   events:["mouseenter",()=>{moveDown.exlude();},"mouseout",()=>{moveDown.exludeEnded();}]

   },{

   class:"shadowtest__movedown__direction",

   events:["click",()=>{moveDown.changeplustominus(); moveDown.AlterStrings("+","-","shadowtest__movedown__direction_span");}]

   },{

   class:"shadowtest__size",

   events:["click",()=>{ sizeChange.speedup();},"mouseenter",()=>{sizeChange.enter();},"mouseout",()=>{ sizeChange.leave();}]

   

   

   },{


   class:"shadowtest__size_span",

   events:["mouseenter",()=>{sizeChange.exlude();},"mouseout",()=>{sizeChange.exludeEnded();}]

   },{


   class:"shadowtest__size__direction",

   events:["click",()=>{sizeChange.changeplustominus(); sizeChange.AlterStrings("+","-","shadowtest__size__direction_span");}]

   }

                       ///

     ,{

   class:"shadowtest__spray",

   events:["click",()=>{ sprayer.speedup(); },"mouseenter",()=>{sprayer.enter();},"mouseout",()=>{ sprayer.leave();}]

   

   

   },{


   class:"shadowtest__spray_span",

   events:["mouseenter",()=>{sprayer.exlude();sprayer.fixer();},"mouseout",()=>{sprayer.exludeEnded();}]

   },{


   class:"shadowtest__spray__direction",

   events:["click",()=>{sprayer.changeplustominus(); sprayer.AlterStrings("+","-","shadowtest__spray__direction_span");}]

   

     

   

   },{

   class:"shadowtest__ChooseShadow",

   events:["click",()=>{ shadowtest__thechosen++; shadowtest__freshfromContainer=true; if(shadowtest__numberRunner<shadowtest__thechosen){

   shadowtest__thechosen=0;

    //console.log("d");

     //shadowtest__freshfromContainer=false;

   }

                        

                        

                        

                       // console.log(shadowtest__freshfromContainer);

                       // console.log(shadowtest__numberRunner);

                       // console.log(shadowtest__thechosen);

                        writeStyle();

                    var ColorButton=  document.getElementsByClassName("shadowtest__colorchoose")[0];

     ColorButton.style.backgroundColor = shadowtest__StyleContainer[shadowtest__thechosen].string;

                    //  rgb(205, 35, 37)  punainen

                    // rgb(34, 211, 37) green

                    //rgb(23, 23, 183) blue sit if mitä painaa ensin

                        

                        

                        

                        

                       }]

   

   }

//jos kerkeää ennen timerin lumista palata tekee toisen timerin

//changeplustominus()

  ];

</script>

<h1 style="background-color: white; box-sizing: border-box; color: #1b1b1b; font-family: zillaslab, palatino, &quot;Palatino Linotype&quot;, serif; font-size: 3.052rem; letter-spacing: 0.035rem; line-height: 1.2; margin: 0px; word-break: break-word;">Recently I noticed something interesting in the box-shadow CSS property. Here press the "Make a new shadow"-button to test it out.</h1>

<div class="shadowtest__ShowThestyle" style="background-color: cyan;"><span class="shadowtest__ShowThestyle_span"></span></div>


<!--<button

  class="t"

  ;

  id="test1"

  n_onmouseover="test2()"

  n_onclick="test()"

  n_onmouseenter="test2()"

  n_monmouseout="test3()"

>

  test

</button>-->

<!--<button class="tx" ; id="test12">test2</button>-->

<button class="shadowtest__shower">

  <span class="shadowtest__shower_span">Make a new shadow</span></button><br /><br />


<div id="hideandrise" style="display: none; opacity: 0;">

  <button class="shadowtest__moveleft">

    <span class="shadowtest__moveleft_span">left</span></button><button class="shadowtest__moveleft__direction">

    <span class="shadowtest__moveleft__direction_span">+</span>

  </button>

  <button class="shadowtest__movedown">

    <span class="shadowtest__movedown_span">down</span></button><button class="shadowtest__movedown__direction">

    <span class="shadowtest__movedown__direction_span">+</span>

  </button>

  <button class="shadowtest__spray">

    <span class="shadowtest__spray_span">spray up</span>

  </button>

<button class="shadowtest__spray__direction">

    <span class="shadowtest__spray__direction_span">+</span>

  </button>

  

  

  <button class="shadowtest__size">

    <span class="shadowtest__size_span">size</span></button><button class="shadowtest__size__direction">

    <span class="shadowtest__size__direction_span">+</span>

  </button>

  <button class="shadowtest__colorchoose">

    choose color

    <span class="shadowtest__colorchoose__R" style="background-color: red;">R</span><span class="shadowtest__colorchoose__G" style="background-color: green;">G</span><span class="shadowtest__colorchoose__B" style="background-color: blue;">B</span><span class="shadowtest__colorchoose__O">O</span>

  </button>

  <button class="shadowtest__ChooseShadow">

    <span class="shadowtest__ChooseShadow_span">Choose shadow</span>

  </button>

</div>

<script>


  // TakeColor("shadowtest__colorchoose");

   ButtonLoopOver(BUTTON_DATA);

</script>

at No comments:
Labels:
Subscribe to: Posts (Atom)

3D BLog has return

Go  to Check    https://thereal3dblog.com/

  • Brown noise
    Press here to hear the Brown noise. Press again and noice go away. Not bad ;) You know Brown noise the Brownian noise the Brownian moti...
  • Pink noise test 1
    Press here to hear the test pink noise 1. Press again and bad noice go away. Its not yet sound like in the wiki. sound like error and fire ...