Differences

This shows you the differences between two versions of the page.

Link to this comparison view

on_screen_clock [2021/07/30 11:39]
bgfdsuperadmin created
on_screen_clock [2021/07/30 11:51]
bgfdsuperadmin
Line 1: Line 1:
 ===== On Screen Clock ===== ===== On Screen Clock =====
 This short php script generates an on screen clock with a green chroma-key background that can be used in OBS... This short php script generates an on screen clock with a green chroma-key background that can be used in OBS...
 +<code>
 +<html>
 +<head>
 +<title>A clock for OBS Studio</title>
 +<style>
 + html, body {
 + background-color: #0f0;
 + font-family: Arial, Helvetica, sans-serif ;
 + color:  #fff;
 + text-shadow:  -4px 0 black, 0 4px black, 4px 0 black, 0 -4px black;
 + font-size: 2em;
 + }
 + .center {
 +  display: flex;
 +  justify-content: center;
 +  align-items: center;
 +  height: 100%;
 + }
 +</style>
 +<script>
 + function startTime() {
 +  const today = new Date();
 +  let h = today.getHours();
 +  let m = today.getMinutes();
 +  let s = today.getSeconds();
 +  m = checkTime(m);
 +  s = checkTime(s);
 +  document.getElementById('clock').innerHTML = "<h1>" + h + ":" + m + "</h1>";
 +  setTimeout(startTime, 1000);
 + }
 +
 + function checkTime(i) {
 +  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
 +  return i;
 + }
 +</script>
 +</head>
 +<body onload="startTime()">
 + <div id="clock" class="center"><h2>hh:mm</h2></div>
 +</body>
 +</html>
 +
 +</code>