Borders&Colors

by Vloxxity

HTML

<div id="test"/>

CSS

div{
    height:200px;
    width:200px;
    
    outline-width:5px ;
    outline-color:rgba(255, 0, 0, 1);
    outline-style:dotted;
    
	box-shadow: 5px 5px 5px 0px rgba(0, 255, 0, 1);
    
    border: 5px solid rgba(0, 0, 255, 1);
}

JavaScript

var test = document.getElementById('test');
var rot = 255;
var blau = 0;
var gruen = 0;

var stage = 1

function setColor () {
    if (stage == 1)
    {
        gruen = gruen + 1;
        test.style.backgroundColor= "rgb("+rot+","+gruen+","+blau+")";
        if (gruen == 255)
        {
            stage = stage + 1;
        }
    }
    if (stage == 2)
    {
        rot = rot - 1;
        test.style.backgroundColor= "rgb("+rot+","+gruen+","+blau+")";
        if (rot == 0)
        {
            stage = stage + 1;
        }
    }
    if (stage == 3)
    {
        blau = blau + 1;
        test.style.backgroundColor= "rgb("+rot+","+gruen+","+blau+")";
        if (blau == 255)
        {
            stage = stage + 1;
        }
    }
    if (stage == 4)
    {
        gruen = gruen - 1;
        test.style.backgroundColor= "rgb("+rot+","+gruen+","+blau+")";
        if (gruen == 0)
        {
            stage = stage + 1;
        }
    }
    if (stage == 5)
    {
        rot = rot + 1;
        test.style.backgroundColor= "rgb("+rot+","+gruen+","+blau+")";
        if (rot == 255)
        {
            stage = stage + 1;
        }
    }
    if (stage == 6)
    {
        blau = blau - 1;
        test.style.backgroundColor= "rgb("+rot+","+gruen+","+blau+")";
        if (blau == 0)
        {
            stage =  1;
        }
    }
}

setInterval(setColor, 100);