javascript - Hjælp til ændring af nedtællingsscript - Udvikleren.dk

Tags: javascript

Bruger #10878 @ 23.11.07 20:48

Jeg har kigget på dette script

Kode

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>Nedtælling til nytårsaften</title>

<script type="text/javascript">
<!-- Dette script og mange flere --> 
<!-- findes hos http://www.html.dk --> 
<!-- Start
var now = new Date();
var event = new Date("Jan 01 2008 00:00:01");
var seconds = (event - now) / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
ID=window.setTimeout("update();", 1000);
function update() {
now = new Date();
seconds = (event - now) / 1000;
seconds = Math.round(seconds);
minutes = seconds / 60;
minutes = Math.round(minutes);
hours = minutes / 60;
hours = Math.round(hours);
days = hours / 24;
days = Math.round(days);
document.getElementById('days').value = days;
document.getElementById('hours').value = hours;
document.getElementById('minutes').value = minutes;
document.getElementById('seconds').value = seconds;
ID=window.setTimeout("update();",1000);
}
// Slut -->
</script>

</head>
<body>

<h1>Nedtælling til nytårsaften</h1>
<p>Der er <input type="text" id="days" value="0" style="width:75px;" /> dage til nytårsaften<br />
Der er <input type="text" id="hours" value="0" style="width:75px;" /> timer til nytårsaften<br />
Der er <input type="text" id="minutes" value="0" style="width:75px;" /> minutter til nytårsaften<br />
Der er <input type="text" id="seconds" value="0" style="width:75px;" /> sekunder til nytårsaften</p>

</body>
</html>

Som nogen nok har læst, så er dette taget fra html.dk

Mit problem er at jeg endnu ikke har været i gang med JS i mere end 1 måned.

Det jeg vil med scripted ovenover er at den kun viser dage, når der er mere end 0 dage til tidspunktet.

Kode

<input type="text" id="days" value="0" style="width:75px;" /> dage

og kun viser timer når der er mere end 0 timer til tispunktet.

osv.

Håber i kan forstå spørgsmålet, og at det er muligt. ellers kan jeg godt forstå hvorfor det ikke lykkes for mig.

7 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #12836 @ 23.11.07 21:27

857

Hej Dion,

Beklager at jeg har smidt input felterne væk. jeg brød mig ikke om dem.

God fornøjelse.

Med venlig hilsen
Ieet

Kode


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>Nedtælling til nytårsaften</title>

<script type="text/javascript">
<!-- Dette script og mange flere --> 
<!-- findes hos [dk"]http://www.html.dk[/url] --> 
<!-- Start
var now = new Date();
var event = new Date("Jan 01 2008 00:00:01");
var seconds = (event - now) / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
ID=window.setTimeout("update();", 1000);
function update() {
now = new Date();
seconds = (event - now) / 1000;
seconds = Math.round(seconds);
minutes = seconds / 60;
minutes = Math.round(minutes);
hours = minutes / 60;
hours = Math.round(hours);
days = hours / 24;
days = Math.round(days);

ID=window.setTimeout("update();",1000);
var str_start = "Der er ";
var str_end = " til nytårsaften";
var str_dage = " dage";
var str_timer = " timer";
var str_minutter = " minutter";
var str_sekunder = " sekunder";

if(days > 0)
    document.getElementById('Span1').innerHTML = "" + str_start + days + str_dage + str_end + "";
if(hours > 0)
    document.all.Span2.innerHTML = "" + str_start + hours + str_timer + str_end + "";
if(minutes > 0)
    document.all.Span3.innerHTML = "" + str_start + minutes + str_minutter + str_end + "";
if(seconds > 0 || minutes > 0 || hours > 0 || days > 0)
    document.all.Span4.innerHTML = "" + str_start + seconds + str_sekunder + str_end + "";
}
// Slut -->
</script>

</head>

<body>

<h1>Nedtælling til nytårsaften</h1>
<p>
	<span id="Span1" name="Span1"></span><br />
	<span id="Span2" name="Span2"></span><br />
	<span id="Span3" name="Span3"></span><br />
	<span id="Span4" name="Span4"></span><br />
</p>

</body>
</html>

Bruger #10216 @ 23.11.07 21:45

4.283

Kode

<div id="test"></div>

<script type="text/javascript">

	/**
	 * @class Countdown
	 * @param {string/HTMLElement} el target HTMLElement or id of target HTMLElement.
	 * @param {string/Date Object} time target time to countdown to.
	 */
	var CountDown = function(el, time) {
		if(!el.innerHTML) {
			el = document.getElementById(el);
		}	
		this.el = el;
		
		if(typeof target != "object") {
			time = new Date(time);
		}
		this.target = time;
	}
	
	CountDown.prototype = {
		/**
		 * Gets distance in seconds
		 * @return {number}
		 */
		getDist : function() {
			var now = new Date();
			
			var dist = now.getTime() - this.target.getTime();
			return Math.abs(dist);
		},

		/**
		 * Gets calculated distance
		 * @return {object}
		 */
		getCount : function() {
			var dist = this.getDist();

			var second = 1000
			var minute = 60 * second;
			var hour = 60 * minute;
			var day = 24 * hour;
			
			var days = Math.floor(dist / day);
			var hours = Math.floor((dist - (days*day)) / hour);
			var minutes = Math.floor((dist - (days*day+hours*hour)) / minute);
			var seconds = Math.floor((dist - (days*day+hours*hour+minutes*minute)) / second);

			return {
				"days" : days, "hours" : hours, "minutes" : minutes, "seconds" : seconds
			}
		},
		
		/**
		 * starts countdown
		 */
		start : function() {
			var c = this.getCount()
		
			this.el.innerHTML = c.days + 'days '+c.hours+'hours '+c.minutes+'minutes '+c.seconds+'seconds';
			
			var fn = function(that) {
				that.start.call(that);
			}
			this.timer = setTimeout(fn,1000,this);
		},
		
		/**
		 * stops countdown
		 */
		stop : function() {
			clearTimeout(this.timer);
		}
	}

	window.onload = function() {
		var cd = new CountDown("test", new Date('Jan 01 2008 00:00:01'));
		cd.start();
		
	}
</script>

og her kommer den objekt-orienterede version af det.

Bruger #12836 @ 23.11.07 21:56

857

Hej Gnu,

Nøj, hvor pænt og fint du har struktureret din JavaScript kode (ja, det var ikke sarkastisk).

Med venlig hilsen
Ieet

Bruger #10216 @ 23.11.07 22:11

4.283

tjah... Så'n går det jo når man når til det punkt hvor man arbejder hurtigere ved at strukture sin kode. Plus at jeg ikke kan læse ustruktureret kode. Hehe...

Men tak for de rosende ord.

Bruger #10878 @ 24.11.07 02:10

[qoute]Beklager at jeg har smidt input felterne væk. jeg brød mig ikke om dem.[/qoute]
Det gjorde jeg heller ikke, men glemte at fjerne dem.

Jeg ved ikke hvilken en jeg skal bruge, men jeg skal nok lære noget af dem begge.

Jeg siger mange tak.

Bruger #10878 @ 25.11.07 17:34

Jeg har fået et mindre problem med begge jeres koder. Når jeg skriver "Jan 01 2008 16:00:01" vil den ikke skrive andet end NaN.

Bruger #12242 @ 04.06.08 15:16

Hej Gnu,

Nøj, hvor pænt og fint du har struktureret din JavaScript kode (ja, det var ikke sarkastisk).

Med venlig hilsen
Ieet

ARRRRGHH
Det gør jeg også men jeg kan bare ikke JS

Hjælp til ændring af nedtællingsscript

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler