on_screen

On Screen Clock

This short php script generates an on screen clock with a green chroma-key background that can be used in OBS…

<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>