I create it like this:

var WatchLabel = document.createElement("label"); WatchLabel.id = "watchlabel"; HederDiv.appendChild(WatchLabel); WatchLabel.innerHTML = (new Date()).format("hh:MM:ss"); WatchLabel.style = "position: absolute;" + "right: 20px;" + "top: 10%;" + "width: 200px;" + "background: linear-gradient(white, black);" + "-webkit-background-clip: text;" + "color: transparent;" + "font-weight: bolder;" + "font-size: 40px;" + "text-align: center;" + "display: none;" ;

Run like this:

 setTimeout ('document.getElementById("watchlabel").style.display = "inline"', 1400); setInterval('document.getElementById("watchlabel").innerHTML = (new Date()).format("hh:MM:ss");', 1000);

The problem is that on windows xp, pentium4 3.4 GHz, Ram 1 GB, chrome version 50+, such clocks hang, seconds go after one. Tell me what you can do?

  • Well, make a snippet. - Qwertiy ♦

1 answer 1

  1. No need to pass strings to setTimeout and setInterval. Transfer functions.
  2. Do not force the browser to parse the html markup when you have text. Use textContent instead of innerHTML.
  3. Why is there a bunch of code with styles? Write them immediately with your hands.
  4. Rewrite the date formatting.
  5. Refuse the gradient text or use svg.