JSFiddle - React, Tailwind, and code Playground

HTML

This is a demo of the pagetimer recipe for PmWiki. Try dragging the timer around, and then refresh the page. You will see that it's position has been memorized. The timer is reset by clicking and pressing keys on the page. A URL redirect won't actually happen here as this a demo, and Jsfiddle blocks such operation.

<div id='pageTimerID' style='-webkit-filter: drop-shadow(1px 1px 1px gray); position:fixed; cursor:move; z-index:9; font-size:20px'></div>

JavaScript

/* 
 * A countdown timer which redirects to a designated URL on timer expiration. The URL to 
 * redirect defaults to the PmWiki logout page. The timer is written in a way such that
 * computer sleep can also be taken into account; on resuming from computer sleep, the 
 * timer immediately updates the correct remaining time and redirects if necessary.
 * The timer can be dragged and moved, and its position will be memorized.
 * 
 * This program is free software; you can redistribute it
 * and/or modify it under the terms of the GNU General
 * Public License as published by the Free Software
 * Foundation; either version 3 of the License, or (at your
 * option) any later version. Available at
 * https://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2016 Ling-San Meng (f95942117@gmail.com)
 * Version 20160726
 */

var PageTimer = 
{
  ExpDuration: 3600,
  ExpDurationSleep: 300,
  RedirectUrl: 'https://www.google.com/',
  timer: 0,
  lastDiff: 0,
  hourInit: 0,
  minInit: 0,
  secInit: 0,
  
  // Counting down the timer by comparing the system clock and the last recorded time
  // instant.
	updateClock: function()
	{
	  // In case that the initialization is not completed, return immediately.
	  if (PageTimer.timer == 0) { return; }
	  
    var clock = new Date();
    var diff = PageTimer.timer - clock.getTime()/1000;
    
    // Check computer standby and logout
		if (PageTimer.lastDiff - diff >= PageTimer.ExpDurationSleep)
		{	
	    return;
		}

		PageTimer.lastDiff = diff;
		
    // Timer expires
		if (diff <= 0)
		{
		  return;
		}

    // Update timer display
    diff = Math.round(diff);
		hour = Math.floor(diff/3600);
		diff -= hour*3600;
		min = Math.floor(diff/60);
		diff -= min*60;		
		sec = Math.round(diff);

		hour = hour<10 ? "0" + hour : hour;
		min = min<10 ? "0" + min : min;
		sec = sec<10 ? "0" + sec : sec;
    
    document.querySelector('#pageTimerID').textContent = hour +":" + min + ":" + sec;
	},

  // Reset the timer.
  resetTimer: function()
 ...