Flash Your Webpage Title - Javascript Code Snippet | Algorithms, Blockchain and Cloud

Javascript is without the doubt the most widely used programming language, that can run on almost most of the platforms as long as there is a modern internet browser. The following Javascript code snippet can flash the webpage title every 500 ms which will attract users’ attentions.

/* HelloACM.com rocks */
(function() {
    var n = 0;
    var t = document.title; // original page title
    var f = function() {
        n ++;
        switch (n) {
            case 3: 
                n = 1; // no break, so continue to next label
            case 1: 
                document.title = '☆ ☆ '+ t + ' ★ ★'; 
                break;
            default: 
                document.title = '★ ★ '+ t + ' ☆ ☆';
        }
        window.setTimeout(f, 500); // every 500ms, adjust if necessary
    }
    f(); // start the animation
})();

/* HelloACM.com rocks */
(function() {
	var n = 0;
	var t = document.title; // original page title
	var f = function() {
		n ++;
		switch (n) {
			case 3: 
				n = 1; // no break, so continue to next label
			case 1: 
				document.title = '☆ ☆ '+ t + ' ★ ★'; 
				break;
			default: 
				document.title = '★ ★ '+ t + ' ☆ ☆';
		}
		window.setTimeout(f, 500); // every 500ms, adjust if necessary
	}
	f(); // start the animation
})();

To enable the title-flashing, you will need to either directly copy the above Javascript to the HTML page and put it (recommended) between the head tags, for example,

<html>
<head>
	<title>HelloACM.com rocks!</title>
	<script type='text/Javascript'>
	// code goes here
	</script>
</head>
<body>

</body>
</html>

Or, save the above Javascript code into a file (assumed put in the same web path), then use the following method:

<html>
<head>
	<title>HelloACM.com rocks!</title>
	<script type='text/Javascript' src='flashtitle.js'></script>
</head>
<body>

</body>
</html>

If you are lazy, here is the copy at server, so you can use: https://helloacm.com/js/flashtitle.js.

The document.title gets or sets the current page title. window.setTimeout will execute the code/function (given in the first parameter) in time (given in the second parameter, unit milliseconds). The window.setTimeout(f, 500); is the same as window.setTimeout(“f”, 500); but the first one is generally considered better as there is no need to parse string to get the name of function to execute.

window.setTimeout can be simplified as setTimeout because the default namespace is windows. To cancel a scheduled task, you can use window.clearTimeout for example,

1 2	var task = setTimeout(test, 500); clearTimeout(task);

var task = setTimeout(test, 500);
clearTimeout(task);

window.setInterval is very similar to window.setTimeout except that the function code is executed repeatly forever until manually cancelled. And to cancel the interval, use clearInterval,

1 2	var task = setInterval(test, 500); clearInterval(task);

var task = setInterval(test, 500);
clearInterval(task);

The title flashing function is a recursive one, so at the end of function, it will wait for 500ms and call itself again. However, if re-written using setInterval there is no need to put recursive call in the function, because it will be automatically invoked anyway.

The document.title refers to the page title while you could change it to window.status to flash your browser status bar!

–EOF (The Ultimate Computing & Technology Blog) —

GD Star Rating
loading...

551 words
Last Post: VBScript Coding Exercise - Compute PI using Monte Carlo Random Method
Next Post: Recursive Combination Algorithm Implementation in C++

The Permanent URL is: Flash Your Webpage Title – Javascript Code Snippet

Related posts:

Leave a Reply