DIR : /home/kozerus/public_html/ko/timers7.html

/home/kozerus/public_html/ko

<html>
<head>


<style>
body{
  text-align: center;
  background: #00ECB9;
  font-family: sans-serif;
  font-weight: 100;
}

h1{
  color: #396;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}

#clockdiv{
  font-family: sans-serif;
  color: #fff;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
}

#clockdiv > div{
  padding: 10px;
  border-radius: 3px;
  background: #00BF96;
  display: inline-block;
}

#clockdiv div > span{
  padding: 15px;
  border-radius: 3px;
  background: #00816A;
  display: inline-block;
}

.smalltext{
  padding-top: 5px;
  font-size: 16px;
}


	</style>

<script>

function getTimeRemaining(endtime) {
	const total = Date.parse(endtime) - Date.parse(new Date());
	const seconds = Math.floor((total / 1000) % 60);
	const minutes = Math.floor((total / 1000 / 60) % 60);
	const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
	const days = Math.floor(total / (1000 * 60 * 60 * 24));
	return { total, days, hours, minutes, seconds };
	}

function updateClock() {
	endtime="";
	const t = getTimeRemaining(endtime);

	daysSpan.innerHTML = t.days;
	hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
	minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
	secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

	if (t.total <= 0) { clearInterval(timeinterval); }
	}


	function startup_timers(args) {
		alert( "BUGS_100 startup_timers argds="+args );
		const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
		divid="div_clock";
		initializeClock(div_clock, deadline);
		divid="div_clock";
		const clock = document.getElementById(divid);
		const daysSpan = clock.querySelector('.days');
		const hoursSpan = clock.querySelector('.hours');
		const minutesSpan = clock.querySelector('.minutes');
		const secondsSpan = clock.querySelector('.seconds');
		return(args);
		}


	const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
	divid="div_clock";
	initializeClock(divid, deadline);
	</script>


	<script>
		function startup(args) {
			alert( "BUGS_101 startup args="+args );
			const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
			divid="div_clock";
			alert( "BUGS_102 startup divid="+divid+" deadline="+deadline );
			initializeClock(divid, deadline);
			if( document.getElementById(divid)) {
				alert( "BUGS_103 startupl ___FOUND divid="+divid );
				const clock = document.getElementById(divid);
				}
			else {
				alert( "BUGS_104 startup NOTFOUND divid="+divid );
				}
			const daysSpan = clock.querySelector('.days');
			const hoursSpan = clock.querySelector('.hours');
			const minutesSpan = clock.querySelector('.minutes');
			const secondsSpan = clock.querySelector('.seconds');
	
//			alert( "BUGS_103 startup deadline="+deadline );
			const timeinterval = setInterval(updateClock, 1000);
			alert( "BUGS_104 startup timeinterval="+timeinterval );
			updateClock();
			alert( "BUGS_105 startup timeinterval="+timeinterval );
			}
		</script>
<script>
function initializeClock(id, endtime) {
	alert( BUGS_101 initializeClock id="+id+" endtime="+endtime );
	const clock = document.getElementById(id);
	const daysSpan = clock.querySelector('.days');
	const hoursSpan = clock.querySelector('.hours');
	const minutesSpan = clock.querySelector('.minutes');
	const secondsSpan = clock.querySelector('.seconds');
	}
	</script>

	</head>
<body bgcolor=linen onload="startup('onload'); return false">
<h1>/ko/timers.html</h1>
<hr color=white>
	<div id=clockdiv>
		<h2>div_clock</h2>
		</div id=clockdiv_end>

<hr color=white>
<h1>Countdown Clock</h1>
<div id="div_clock">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>
<br>
	<img src=/imgs/btn/kb.png onclick="startup('click');return false;" return false"
	height=50>startup
	<img src=/imgs/btn/kb.png onclick="startup_timers('click');return false;" return false"
	height=50>startup_timers
	<img src=/imgs/btn/kb.png onclick="updateClock();return false;" return false"
	height=50>updateClock
	</body>
	</html>
//


koh5_pano



Your browser does not support the HTML5 canvas element.
Drag mouse to navigate.

Navigation





17.Aug.2010, Martin Wengenmayer