• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Benötige Hilfe bei JavvaScript

S

SrsuperCILLER

New member
Moin Moin liebe Gemeinde,

ich bin Julian und studiere in Hamburg. Für einen Kurs muss ich eine kleine HTML Seite bauen (Spiel)
Es geht darum das ein Balken und eine zeit abläuft, während dessen kann man auf Buttons klicken um diesen balken wieder aufzufüllen damit er nicht abläuft. Gibt es jemanden der mir Helfen kann? Mehr Informationen könnt ihr gerne Fragen.

Liebe Grüße Julian und danke für eine schnelle Hilfe


So soll es am Ende aussehen:
Anhang anzeigen 4923


Der Aktuelle Code:

HTML: 
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
    	<meta name="description"
    	content="Das Spiel ums schnelle Geld">
		<title>PayDay</title>
        <link rel="stylesheet" type="text/css" href="../CSS/payday_style.css">
        <script>
			
			function schreibfunktion(){
				window.alert(6+"A");
				document.getElementById("demo").innerHTML = "Heute ist Dienstag, der 1. November 2016, 16:30 Uhr";}
			
			function uhrzeit(){
				//window.alert("bis hier?");
				var today = new Date();
				var tag = today.getDate();
				if(tag<10){
					tag="0"+tag;
				}
				var wochentag = today.getDay();
				var monat = today.getMonth();
				var jahr = today.getFullYear();
				if(jahr<10){
					jahr="0"+jahr;
				}
				var stunden = today.getHours();
				if(stunden<10){
					stunden="0"+stunden;
				}
				var minuten = today.getMinutes();
				if(minuten<10){
					minuten="0"+minuten;
				}
				var sekunden = today.getSeconds();
				if(sekunden<10){
					sekunden="0"+sekunden;
				}
				var wochentage = new Array("Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag");
				
				document.getElementById("balken").innerHTML = sekunden;
				document.getElementById("balken").style.height =5*sekunden + "px";
				
				setTimeout(uhrzeit,500);
				}
		
		</script>
		
	</head>

	<body onload="uhrzeit()">
		<div id="balken" > TEST </div>
		<h1> TEST </h1>
		
	</body>
</html>

Und Hier das Stylesheet:
HTML: 
@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset,
form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	}
		
ol, ul {
	list-style: none;
}

	body {background-color: #3FAF6C ; width:auto;
	overflow-y: hidden;}

	#balken {background-color: #FFFFFF;
	margin:0;
	padding:0;
			
			
			}

	
	h1,h2,h3,h4,h5,h6{color:black; padding: 10px;}
	h1{font-family:"DINPro-Black" ;}
	p{font-size:14px; font-family:"DINPro-Black"}
 
Zuletzt bearbeitet von einem Moderator:
Genau die fehlen auch noch, also momentan läuft ein weißer balken von oben Herunter, und der soll eigentlich am unteren browserrand immer bei "Null" sein, bevor dies geschiet soll man die Möglichkeit haben auf zufällig erscheinende Buttons zu klicken um den balken um einige parameter wieder nach oben zu bringen.

Gruß Julian

- - - Aktualisiert - - -

miniA4kuser schrieb:
Welche Buttons?
In deinem HTML sind keine Buttons...
Zum Vergrößern anklicken....
Ich bin leider überhaupt nicht vom Fach :D, deswgen weiß ich auch nicht wie das mit den Buttons funktioniert.
 
SrsuperCILLER schrieb:
also momentan läuft ein weißer balken von oben Herunter
Zum Vergrößern anklicken....
Bis eine Minute rum ist, dann ist er wieder voll, weil du das Date-Objekt verwendest

SrsuperCILLER schrieb:
auf zufällig erscheinende Buttons zu klicken um den balken um einige parameter wieder nach oben zu bringen.
Zum Vergrößern anklicken....
Und wie, wo, wann sollen die erscheinen?

Hast du dir mal nen Struktogramm und/oder einen Ablaufplan erstellt?

Was willst du denn jetzt genau wissen? Wo liegt das Problem?
Ohne jetzt unhöflich zu sein, hierwird dir bei Problemen geholfen und vieles erklärt, aber wir sind nicht hier um deine Arbeit zu machen.
 
Hey, ja das ist klar :)
Entschuldige mir wenn die Frage undeutlich war. Ich wollte wissen ob jemand eine Idee hat, dass der Balken halt nicht nach einer Minute neu startet, sondern immer wenn er am Browserfenster angelangt ist.

Gruß
 
- Höhe des Browserfensters herausfinden
- Alle x Millisekunden den Balken vergrößern
- Kontrollieren ob Balken größer Browserfenster ist

HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Balken</title>
    <style>
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset,
    form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        vertical-align: baseline;
    }

    ol, ul {
        list-style: none;
    }

    body {
        background-color: #3FAF6C;
        width:auto;
        overflow-y: hidden;
    }

    #balken {
        background-color: #FFFFFF;
        margin:0;
        padding:0;
    }

    h1,h2,h3,h4,h5,h6{
        color:black;
        padding: 10px;
    }
    h1{
        font-family:"DINPro-Black";
    }

    p{
        font-size:14px;
        font-family:"DINPro-Black"
    }
    </style>
</head>

<body onload="start()">
    <div id="balken" > TEST </div>
    <h1> TEST </h1>
    <script>
        function start(){
            document.getElementById('balken').dataset.maxHeight = window.screen.availHeight - (window.outerHeight - window.innerHeight);
            document.getElementById('balken').dataset.currentHeight = 0;
            balkenBerechnen();
        }
        
        function balkenBerechnen(){
            var balken = document.getElementById('balken'),
                currentHeight = parseInt(balken.dataset.currentHeight, 10);
        
            if (currentHeight < balken.dataset.maxHeight) {
                currentHeight = currentHeight + 50;
                balken.style.height = currentHeight + 'px';
                balken.dataset.currentHeight = currentHeight;
                setTimeout(balkenBerechnen, 100);
            } else {
                alert('ENDE');
            }
        }
    </script>
</html>
 
Super, das hat mir sehr weitergeholfen, vielen Dank!
Eine kleine Frage noch, setTimeout = 100 (in welcher einheit bemisst sich dieser Wert?)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben