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
Friday, December 24, 2021
Monday, December 6, 2021
Friday, December 3, 2021
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, "Palatino Linotype", 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>
Subscribe to:
Posts (Atom)
3D BLog has return
Go to Check https://thereal3dblog.com/
-
I try various things, only those who have try a lot, know the context. This now here is the advanced stuff. Why use the ticks in firs...
-
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...