Home
Build your own digital clock screensaver
html (screensaver) Friday, 10 April 2020 by 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.