How to change the color of pieces of a concatenated String in JavaScript?

Question

I want to create a string in JavaScript that gives the current time, but I want the hours, minutes, and seconds to be visibly divided by a colon. The pieces should be a different color than the numbers created with JavaScript.

Following the base I want to work with.

JS

var currentTime = document.getElementById('time');

function setTime() {
  var date = new Date();
  var s = date.getSeconds();
  var m = date.getMinutes();
  var h = date.getHours();

  if (s < 10) {
    s = '0' + s;
  }
  if (m < 10) {
    m = '0' + m;
  }
  if (h < 10) {
    h = '0' + h;
  }

  currentTime.textContent = h + ':' + m + ':' + s;
}

setInterval(setTime, 100);

HTML

<h1 id="time"></h1>

CSS

#time {
    margin-top: 7rem;
    margin-bottom: 1rem;
    font-size: 3.2rem;
    color: #60D291;
}

Parking Master · Accepted Answer · 2021-12-05 03:09:51Z

1

You can try this :

var currentTime = document.getElementById("time");
var span = document.getElementsByTagName("span");
function setTime() {
  var date = new Date();
  var s = date.getSeconds();
  var m = date.getMinutes();
  var h = date.getHours();
  if (s < 10)
    s = "0" + s;
  if (m < 10)
    m = "0" + m;
  if (h < 10)
    h = "0" + h;

   span[0].textContent = h;
   span[1].textContent = " : " + m;
   span[2].textContent = " : "+s;

   span[0].style.color = "red";
   span[1].style.color = "green";
   span[2].style.color = "blue";
 }

 setInterval(setTime, 100);

#time {
  margin: 1rem;
  margin-top: 7rem;
  font-size: 3.2rem;
  color: #60D291;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      #time {
        margin: 1rem;
        margin-top: 7rem;
        font-size: 3.2rem;
        color: #60D291;
      }
    </style>
  </head>
  <body>
    <h1 id="time">
      <span></span><span></span><span></span>
    </h1>
  </body>
</html>

edited Dec 5, 2021 at 3:09

Parking Master

6571 gold badge10 silver badges26 bronze badges

answered Dec 4, 2021 at 18:16

Anonymous

5473 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HDM91 Over a year ago

it's better to use class or id in each of span for time part instead of span[n], you can use <span class="hour"> and separate css for each class or id

Maggie Cody · Accepted Answer · 2021-12-05 04:53:41Z

You could also separate each unit into spans so styling remains in CSS.

let hour = document.getElementById('hour');
let min = document.getElementById('min');
let sec = document.getElementById('sec');

function setTime() {
  const date = new Date();
  const s = date.getSeconds().toLocaleString('en-US', { minimumIntegerDigits: 2 });
  const m = date.getMinutes().toLocaleString('en-US', { minimumIntegerDigits: 2 });
  const h = date.getHours().toLocaleString('en-US', { minimumIntegerDigits: 2 });

  hour.textContent = h + ' :';
  min.textContent= m + ' :';
  sec.textContent = s;
}

setInterval(setTime, 100);

#time {
    margin: 1rem;
    font-size: 3.2rem;
}

#hour {
  color: red;
}

#min {
  color: green;
}

#sec {
  color: blue;
}

<h1 id="time">
  <span id="hour"></span>
  <span id="min"></span>
  <span id="sec"></span>
</h1>

Collectives™ on Stack Overflow

How to change the color of pieces of a concatenated String in JavaScript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related