Speak people ... (do not mind if I say any nonsense during the text, I'm a layman in this regard). I have since developing a page using javascript settings to make an interaction. My challenges were:
1st Make a page that changes color with each update.
2º Make theme-color meta and background the same colors with each page update.
I was able to accomplish the first two challenges with the following configuration, inside the head: follow code
<script>
//mudar theme-color
function getRandomRGBValue() {
return Math.min(Math.floor(Math.random() * 255 + 1), 255);
}
function getRandomColor() {
var r = getRandomRGBValue(),
g = getRandomRGBValue(),
b = getRandomRGBValue();
return "#" + (((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1));
}
//recebe a cor que foi gerado no getRandomColor para utilizar a mesma cor, tanto no <meta theme-color> quando na função que muda a cor do body.
var CorBackTheme=getRandomColor();
//função executada para mudar o content do theme-color
function changeThemeColor() {
var metaThemeColor = document.querySelector("meta[name=theme-color]");
metaThemeColor.setAttribute("content", CorBackTheme);
setTimeout(function() {
changeThemeColor();
}, 2000);
}
changeThemeColor();
//body collor
function carrega() {
document.body.style.background=CorBackTheme;
setTimeout(function(){
/* carrega();
}, 2000);*/
}
function atualiza(){
setTimeout(function(){
/* getRandomColor();
}, 2000);*/
}
</script>If you enter my site ( cubomagi.co ) by the Android system from version 5.0 on the Chrome browser, both the meta theme-color and the background will be the same color for every page update you make.
However, my third challenge came, which I can not do is:
3º Make colors change every 2 seconds.
The problem that happens is: when the getRandomColor () function generates a color, the global variable CorBackTheme gets the color of that function, so I use this variable in the changeThemeColor () function and the load () function, which are the functions responsible for changing the color of the theme-color goal and backgroud with each page refresh. If you notice, inside the two functions (chageThemeColor and loads), I called the setTimeout () feature, which is responsible for changing the color in a certain time, but left in the form of comment because it is not working. However, it even "performs" the action of changing the color every 2 seconds, only it changes to the same color as the global variable CorBackTheme receives only once. In my lay knowledge of programming logic, the idea would be to restart the getRandomColor () process so that the ColorBackTheme variable can receive a new color and then update the colors of the changeThemecolor () function and load () through the setTimeout () / p>The question is: how? (laughs)
In the: changeThemeColor () function, if you get the global ColorBackTheme variable and put the getRandomColor () function in its place, then the setTimeout () feature works, but the meta and background colors are not synchronized, because for each function (changeThemeColor and loads) the getRandomColor () function generates a different color.
I'm making the document available to you through a link on google drive .
Thanks for any response and apologize for any error in describing the problem.
att Carlos Rebelo