+ 3
in this example, I made a js function to make the div with id circle automatically change its color with random color
note: explanation in a comment inside code below
<!----The Code Start---->
<div id='circle'></div>
<style>
#circle {
width: 50px; height: 50px;
border-radius: 50%;
</style>
<script>
window.onload = function() {
// window.onload used to make javascript working after the html finished loaded
var a = document.getElementById("circle"); // referring a html element with id circle
function run() {
var r = Math.ceil(Math.random()*255); // make a random number from 1 to 255 as red
var g = Math.ceil(Math.random()*255); // make a random number from 1 to 255 as green
var b = Math.ceil(Math.random()*255); // make a random number from 1 to 255 as blue
a.style.background = "rgb("+r+","+g+","+b+")";
// a calling the variable a above
// style call a css code, without this your css you made in js never work
// background referring a css code â background.
// "rgb("+r+","+g+","+b+")" //this is a normal css code, but it call the red/green/blue values from random number made from the three variables
}
setInterval(run, 200); // call the function run() every 200ms
// it use the ms units, 200 mean 200ms and 1s == 1000
}
</script>
<!----The Code End---->
hth, cmiiw
+ 2
#square {
width: 100px;
height: 100px;
background: red;
}
#rectangle {
width: 200px;
height: 100px;
background: red;
}
#oval {
width: 200px;
height: 100px;
background: red;
border-radius: 100px / 50px;
}
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
these are some shapes hope it will help you
+ 1
sort of but changing colors requires a bit more code. Post your code and id be happy to help âș
0
you would need Javascript for that. When the condition that changes levels is met, call a function that changes the colors.