Location>code7788 >text

Hands-on teaching you to create the simplest web version of the countdown program (only 25 lines of core code)

Popularity：815 ℃/2024-09-19 11:50:15

I. Deconstruction

As shown in the figure, the effect of the cell phone browser. Code is a simple html language plus a JavaScript script, the interface is mainly divided into 3 parts, the realization of the function is mainly divided into 3 functions.

(i) Display style

The CSS style for centered display is defined in the header, and in the future, the countdown will be centered in the browser to display X minutes and XX seconds.

<style type="text/css">
    .center {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
</style>

Also the main body of the page background is blue.
<body bgcolor="blue"/>

(ii) Input boxes and buttons

<input type="text" value="" >
<input type="button" onclick="go()" value="commencement">
<input type="button" onclick="stop()" value="cessation">

(iii) Countdown display

The countdown timer display area, using the CSS style of centered display, while setting the foreground color to white, the word centered, font size 180px:
<div class=center style="color:#fff; text-align:center; font-size:180px;"/>

(iv) Three functions

go function.

// Parsing time
function go() {
clearInterval(timer);//clear timer
("timer"). = "#fff";// set the foreground color of the timer display area to white
time = ("time").value;//get start time
resetTime(time);//reset the countdown with time
}

reset function.

function resetTime(time) {
    var t = parseInt(time) * 60; //convert minutes to seconds
    var m, s; //Minutes and seconds.
    function countDown() { //decrement function
        t--; //decrement time by 1
        if (t < 0) { //Boundary value detection, if t is zero, stop the timer
            t = 0; //Stop(); //Stop the timer if t is zero.
            stop();
        }
        m = (t / 60); // round to the nearest minute
        s = t % 60; //take seconds
        s < 10 && (s = '0' + s); //Seconds are rounded up to zero.
        ("timer").innerHTML = m + "minutes" + s + "seconds"; //output countdown display
    } //end of countDown
    timer = setInterval(countDown,1000); //Set the timer to call the countDown decrement function every 1000 milliseconds.
} //end of resetTime

stop function.

function stop() {
  clearInterval(timer); //stop the timer
  ("timer"). = "#f00"; // set the foreground color of the timer area to the RGB color red
}

II. Samples

<!--(c)hele 2018countdown timer，Enter the number of minutes and click start，Built-in Decrement Program，1in descending order1substandard-->
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
	.center {
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
// width:1000px;
	}
</style>
</head>
<body bgcolor="blue">
	<input type="text" value="" >
	<input type="button" onclick="go()" value="commencement">
	<input type="button" onclick="stop()" value="cessation">
	<div class=center style="color:#fff; text-align:center; font-size:180px;">
	</div>
	<script type="text/javascript">
		var timer = null;
		//parse time
		function go() {
			clearInterval(timer);
			("timer").="#fff";
			time = ("time").value;
			resetTime(time);
		}
		function stop() {
			clearInterval(timer);
			("timer").="#f00";
		}
		//Setting Countdown Timer Parameters
		function resetTime(time) {
			var t = parseInt(time) * 60;
			var m, s;
			function countDown() {
				t--;
				if (t < 0) {
					t = 0;
					stop();
				}
				m = (t / 60);
				s = t % 60;
				s < 10 && (s = '0' + s);
				("timer").innerHTML = m + "ingredient" + s + "unit of angle or arc equivalent one sixtieth of a degree";
			} //end of countDown
			timer = setInterval(countDown,1000);
		} //end of resetTime
	</script>
</body>
</html>
<Previous Next>