Build your own digital clock screensaver
html
(screensaver)
Friday, 10 April 2020
by paul

- Download a web page screensaver like https://github.com/cwc/web-page-screensaver/releases
- Copy the scr file (Web-Page-Screensaver.scr) to c:\windows\system32
- Create a new file (c: \screensaver\ss.html) and paste the code below into it.
<!DOCTYPE html><HTML><HEAD>
<STYLE>
html { height: 100%; }
body {
background: #000;
color: #fff;
font-family: Arial;
}
.screen {
width: 1280px;
height: 800px;
}
.datetime {
position: absolute;
}
.date {
font-size: 48pt;
text-align: center;
margin: 5px;
}
.time {
margin: 5px;
text-align: center;
}
.Number {
position: relative;
display: inline-block;
background-color: #706F9C;
border-radius: 20px;
box-shadow: 0 5px 50x #000;
color: white;
padding: 5px;
font-size: 175pt;
}
</STYLE>
</HEAD>
<BODY scroll="no" onload="startTime()">
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var y = today.getYear();
var screenwidth = 1280;
var screenheight = 800;
var border = 50;
var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var d = today.getDate();
var day = days[ today.getDay() ];
var month = months[ today.getMonth() ];
var dw = document.getElementById('datetime').offsetWidth;
var dh = document.getElementById('datetime').offsetHeight;
var xwidth = border + (Math.floor(Math.random() * ((screenwidth - dw) - border)));
var xheight = border + (Math.floor(Math.random() * ((screenheight - dh) - border)));
document.getElementById('datetime').style.left = xwidth+'px';
document.getElementById('datetime').style.top = xheight+'px';
th = "th";
if(d==1 | d==21 | d==31)
th="st";
if(d==3 | d==23)
th="rd";
if(m < 10)
m="0"+m;
if(h < 10)
h="0"+h;
y = y + 1900;
document.getElementById('ttxt').innerHTML = "<DIV CLASS='Number'>" + h + "</DIV> <DIV CLASS='Number'>" + m + "</DIV>";
document.getElementById('dtxt').innerHTML = day + " " + d + th + " " + month + " " + y;
var t = setTimeout(startTime, 10000);
}
</script>
<TABLE BORDER=0 WIDTH=100% HEIGHT=100% id="screen"><TR><TD>
<DIV CLASS="datetime" ID="datetime">
<div id="ttxt" class="time">Loading...</div>
<div id="dtxt" class="date">Loading...</div>
</DIV>
</TD></TR></TABLE>
</BODY>
</HTML>
- Right click on desktop.
- Select “Personalise”.
- Select “Lock Screen”.
- Select “Screen saver settings”.
- Change the selected screen saver to “Web-Page-Screensaver”
- Press settings.
- Right click on the default web pages and select “Remove URL”.
- In the Add box enter “c: \screensaver\ss.html”.
- Press OK and then OK.
Done.