Home
Build your own digital clock screensaver
Published: Friday, 10 April 2020 | Categories: html | Keywords: screensaver | Status: Posted | Created: Friday, 10 April 2020 | Author: paul

 

  1. Download a web page screensaver like https://github.com/cwc/web-page-screensaver/releases
  2. Copy the scr file (Web-Page-Screensaver.scr) to c:\windows\system32
  3. 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>

     

  4. Right click on desktop.
  5. Select “Personalise”.
  6. Select “Lock Screen”.
  7. Select “Screen saver settings”.
  8. Change the selected screen saver to “Web-Page-Screensaver”
  9. Press settings.
  10. Right click on the default web pages and select “Remove URL”.
  11. In the Add box enter “c: \screensaver\ss.html”.
  12. Press OK and then OK.

Done.

Add Comment
No Comments.