Just discovered a background change triggered by the time, but unable to replicate it

I find it odd that everything works perfectly fine with document.body.style.background, yet I can't seem to change the style of this particular div.

Here is the code snippet:

var container = document.getElementById("container");

var updateTime = function() {
    var currentTime = new Date,
        currentHours = currentTime.getHours().toString(),
        currentMinutes = currentTime.getMinutes().toString(),
        currentSeconds = currentTime.getSeconds().toString();


    if (currentHours < 10) {
        currentHours = "0" + currentHours;
    }
    if (currentMinutes < 10) {
        currentMinutes = "0" + currentMinutes;
    }
    if (currentSeconds < 10) {
        currentSeconds = "0" + currentSeconds;
    }

    container.style.background = "#" + currentHours + currentMinutes + currentSeconds;

}

setInterval(updateTime, 1000);
javascripthtmlcss

Answer №1

Although the code is functioning correctly, it might be helpful to specify "backgroundColor" when making adjustments to the background object.

The issue you may encounter is that updating the HEX color of the background every second could result in subtle changes that are hard to detect due to the similarity of colors. To aid in identifying these color variations, consider using browser extensions like ColorZillas Chrome Extension.

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp

The red shades are updated hourly by a single digit, the green shades update every minute with only one-digit changes, and the blue undergoes more noticeable alterations. Despite this, subtle differences may not be readily apparent unless comparing screenshots taken at different intervals.

This process uses only a small portion of the color spectrum since the values never exceed 60 for HEX or either 12 or 24 for hours.

To create more significant color changes each second, consider incorporating mathematical calculations on seconds and converting them to RGB or HEX. By doing so, multiple shades can be altered simultaneously.

For instance:

var percentOfMin = seconds/60;
var blue = Math.round(255 * percentOfMin);

And so forth.

style.backgroundColor = "rgb(" + red + "," + green + "," + blue + ")";

This approach ensures that every passing second evenly affects the entire blue spectrum, minutes influence the green tones, and hours impact the red hues.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Latest Version of Joomla includes Jquery 3.4.3 Files

In my Joomla 3.4.3 setup, while debugging in Firefox using Inspect Element, I noticed a message in the console pointing to http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1.8.21/jquery-ui.min.js. Next to this item, it displays: [HTTP/1.1 404 Not Found ...

javascriptjqueryajaxjquery-uijoomla

Unable to attach trigger click event to SVG path element

Unable to simulate a click on an SVG path element, even though other actions like remove() are functional. The following code snippet is not functioning as expected: $("#parentelement").on("click", "someelement", function() { $('g path[data-co ...

javascriptjquerysvg

Guide: Utilizing JSON API data to generate marker labels on a leaflet map

Users are presented with points to click on. When a point is clicked, a menu displays text information. I have successfully placed the points, but when attempting to retrieve specific data from the database upon clicking a point, it does not show the marke ...

javascriptarraysdatabaseexpressleaflet

Struggling to successfully pass data between pages using JSON

I'm currently working on HTML code for a view cart page where I display an item name. My goal is to be able to transfer this data, along with others later on, to a different HTML page that will automatically generate a list of multiple items with pric ...

javascriptjson

How can I use JavaScript regex to extract the first term to the left of a specific symbol?

Having a string in this format str = "Is toffee=sweet?" I need to retrieve the first term on the left side of =, which in this case is toffee. To accomplish this, I use the following code snippet: str.split("=")[0].split(" ").splice(-1,1)[0] This retu ...

javascriptregex

The type 'number' cannot be assigned to the type 'Element'

Currently, I am developing a custom hook called useArray in React with TypeScript. This hook handles array methods such as push, update, remove, etc. It works perfectly fine in JavaScript, but encounters errors in TypeScript. Below is the snippet of code f ...

javascriptreactjstypescriptreact-custom-hooks

Prevent the resizing of my website on iOS devices using HTML and CSS

I'm encountering an issue with a website I developed that seems to be resizable on certain iOS devices, including the new iPhone X. I haven't been able to replicate this behavior on other standard websites. Perhaps there's a simple CSS solut ...

javascripthtmlcssreactjs

What are the steps to implement a horizontal scroll feature on a website when the scroll width is set to 0?

My goal is to enable users to scroll in the web view similar to how they can drag to scroll on mobile devices Check out my sandbox here for reference I have created a sample sandbox with the following code: <!DOCTYPE html> <html lang="en&qu ...

htmlcss

Error 403 occurs after submitting the form

Recently, I encountered a 403 error when attempting to submit the form on this page. Interestingly, when I directly accessed the new page by typing the URL into my browser, it loaded without any issues. The PHP code in the initial page looks like this: & ...

javascriptphphtmlforms

Personalize Autocomplete CSS based on the TextField input in React Material UI when a value is present

In my current project, I am utilizing React Material Autocomplete fields, which includes a nested TextField. I have successfully implemented standard styles for when the field is empty and only the label is visible, as well as different styles for hover ef ...

cssreactjsmaterial-ui

Enhancing the appearance of input range sliders using before and after elements for custom styling

I'm looking to create something similar to the image linked below https://i.sstatic.net/Czef9.png Note:: The above image features a V-shaped icon, which is what I'm aiming for. Currently, I am utilizing input[type="range"]. The foll ...

javascripthtmlcss

The conditional statement of either/or

I need to create a button that changes based on whether checkboxes are checked. If none are checked, I want to show a disabled button. If one or more are checked, I want to display a different button. JavaScript $("#checkAll").change(function ( ...

javascripthtmljqueryif-statement

Updating the selected value in TomSelect based on an ajax response

I am facing an issue setting a value on TomSelect using ajax response. Normally, I would use the following code on a general dropdown: $('#homebasepeg').val(data.hmb_id).change(); However, when I try to apply this on TomSelect, it doesn't s ...

javascriptphpjsonajaxtom-select

Creating a Vue.js v-for loop to dynamically display a series of DIVs in segments

Here is the code I am currently working with: <div class="container-fluid" id="networdapp" style="display:none;"> <div class="row" > <div v-for="(result,i) in results" :key="i" class="col-sm-6" > <div class=" ...

javascripthtmlcssvue.jsvuejs2

What could be the reason for npm start failing to work following npm init?

Starting a new project using NPM : npm init Installed the socket.io-client package. package.json: { "name": "client", "version": "1.0.0", "description": "", "main": "script.js&qu ...

javascriptnode.jsnpmimport

Transform the usual button into a jQuery button that requires a press and hold action

Within my code, there are two buttons in play. One button triggers the burger menu, while the second button adjusts the size of a div. I am looking to transform only the second button into a hold button that activates after a 3-second delay. code: $doc ...

javascripthtmljquery

The onClick action kicks in as soon as the page finishes loading

One particular line of code in the Button Tag has caught my attention. let content = this.props.searchResult.map((ele, i) => { let card_id = ele.user.username + "_card"; return( <div className="col s12 m6 l4" key={i} id={card_id}> ...

javascriptreactjs

Generate real-time dynamic line charts using data pulled directly from a MySQL database

I am in search of guidance on developing a real-time line chart that can dynamically update based on data fetched from MySQL. I need an example or reference on how to achieve this functionality without having to refresh the webpage every time new data is ...

javascripthtmlmysql

Error: Docker-compose is unable to locate the specified module

Struggling to convert my docker-compose.yml file from using mongodb to mysql. Each time I add a new dependency, it shows it cannot be found... Cannot find module 'sequelize' Even after running docker-compose build, the issue persists. I suspect ...

javascriptnode.jsdatabasedockernpm

I'm puzzled as to why a scroll bar materializes

I recently encountered an interesting issue while working on my responsive web design project. Upon resizing the browser to a width of 615px or less, a horizontal scroll bar unexpectedly appeared. It's puzzling as to which element is causing this prob ...

cssscrollbarresponsive-designhorizontal-scrolling