Crysknife007/flasher.html

## flasher.html

<html>
<head>
<title>Javascript Flasher Clock</title>

<script>

// Set up our colors array
const colors = [
    '#FFFFFF',
    '#FF0000',
    '#FF8000',
    '#FFFF00',
    '#80FF00',
    '#00FF00',
    '#00FF80',
    '#00FFFF',
    '#0080FF',
    '#0000FF',
    '#7F00FF',
    '#FF00FF',
    '#FF007F'
];

// Set up our default color index
var c = 0;

// Set up our base wait time
var w = 50;

// Define the wait function, a promise that waits for a setTimeout of length t before returning
var wait = t => new Promise(resolve => setTimeout(() => resolve(), t));

// A function to change the color
function changeColor() {

    // If we are at the end of the colors array set c back to the first value
    if ( c === colors.length - 1) {

        // Set c back to the first color
        c = 0;

    }

    // Else we just need to increment our color value c
    else {

        // Increment c
        c++;

    }

}

// Define our clock function using async so that we can use await
async function clock() {

    // Set the default background color to black at the beginning of each cycle
    document.body.style.background = '#000000';

    // Wait for a long while so that we separate our flasher clock cycles
    await wait(w * 40);

    // Get the current date
    let date = new Date();

    // Get the current number of hours
    let hours = ((date.getHours() + 11) % 12 + 1);

    // Get the current number of tens digits
    let tensDigits = (date.getMinutes() < 10 ? '0' : '' + date.getMinutes()).substring(1,0);

    // Flash the current number of hours
    for (let h = 0; h < hours; h++) {

        // Wait a while
        await wait(w*8);

        // Set the screen to the colors c value
        document.body.style.background = colors[c];

        // Wait another while
        await wait(w*8);

        // Set the screen back to black
        document.body.style.background = '#000000';

    }

    // Wait a medium while between the hours and tens digits flashes
    await wait(w*20);

    // Flash for the current number of tens digits
    for (let t = 0; t < tensDigits; t++) {

        // Wait a little while
        await wait(w*5);

        // Set the screen to the colors c value
        document.body.style.background = colors[c];

        // Wait another little while
        await wait(w*5);

        // Set the screen back to black
        document.body.style.background = '#000000';

    }

    // Call this clock function again to start a new cycle
    clock();

}
</script>

</head>
<body onload='clock()' onclick='changeColor()'>
</body>
</html>

	<html>
	<head>
	<title>Javascript Flasher Clock</title>

	<script>

	// Set up our colors array
	const colors = [
	'#FFFFFF',
	'#FF0000',
	'#FF8000',
	'#FFFF00',
	'#80FF00',
	'#00FF00',
	'#00FF80',
	'#00FFFF',
	'#0080FF',
	'#0000FF',
	'#7F00FF',
	'#FF00FF',
	'#FF007F'
	];

	// Set up our default color index
	var c = 0;

	// Set up our base wait time
	var w = 50;

	// Define the wait function, a promise that waits for a setTimeout of length t before returning
	var wait = t => new Promise(resolve => setTimeout(() => resolve(), t));

	// A function to change the color
	function changeColor() {

	// If we are at the end of the colors array set c back to the first value
	if ( c === colors.length - 1) {

	// Set c back to the first color
	c = 0;

	}

	// Else we just need to increment our color value c
	else {

	// Increment c
	c++;

	}

	}

	// Define our clock function using async so that we can use await
	async function clock() {

	// Set the default background color to black at the beginning of each cycle
	document.body.style.background = '#000000';

	// Wait for a long while so that we separate our flasher clock cycles
	await wait(w * 40);

	// Get the current date
	let date = new Date();

	// Get the current number of hours
	let hours = ((date.getHours() + 11) % 12 + 1);

	// Get the current number of tens digits
	let tensDigits = (date.getMinutes() < 10 ? '0' : '' + date.getMinutes()).substring(1,0);

	// Flash the current number of hours
	for (let h = 0; h < hours; h++) {

	// Wait a while
	await wait(w*8);

	// Set the screen to the colors c value
	document.body.style.background = colors[c];

	// Wait another while
	await wait(w*8);

	// Set the screen back to black
	document.body.style.background = '#000000';

	}

	// Wait a medium while between the hours and tens digits flashes
	await wait(w*20);

	// Flash for the current number of tens digits
	for (let t = 0; t < tensDigits; t++) {

	// Wait a little while
	await wait(w*5);

	// Set the screen to the colors c value
	document.body.style.background = colors[c];

	// Wait another little while
	await wait(w*5);

	// Set the screen back to black
	document.body.style.background = '#000000';

	}

	// Call this clock function again to start a new cycle
	clock();

	}
	</script>

	</head>
	<body onload='clock()' onclick='changeColor()'>
	</body>
	</html>