Differences

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

--- on_screen_clock [2021/07/30 11:39]
bgfdsuperadmin created
+++ on_screen_clock [2021/07/30 11:51] (current)
bgfdsuperadmin
@@ Line 1: / Line 1: @@
 ===== On Screen Clock =====
 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>