• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z aplikacją internetową.

VPS Starter Arubacloud
0 głosów
237 wizyt
pytanie zadane 18 lipca 2015 w JavaScript przez Michał Gibas Pasjonat (19,610 p.)
edycja 18 lipca 2015 przez krecik1334

Witam!

Od trzech dni staram się stworzyć aplikację internetową która ma być "czasomierzem" (w postaci "bomby"). Jednak coś w moim kodzie nie gra i nie potrafię stworzyć właściwego rozwiązania. Jeśli ktoś mógł by mi pomóc byłbym bardzo wdzięczny.

Oto mój kod:

(wszystko zamieściłem w jednym pliku: js,html,css)
 

<!DOCTYPE html>
<html>
    <head>
        <title>Bomb app.</title>
        <meta charset="utf-8" />
        <meta type="keywords" value="apps,bomb,app"/>
        <link rel="shortcut icon" href="favicon.png">
    </head>
    <style>
        #pole
        {
            font-family: Verdana;
            width: 30px;
            padding: 2px;
        }
        #pole1
        {
            font-family: Verdana;
            width: 30px;
            padding: 2px;
        }
        #pole2
        {
            font-family: Verdana;
            width: 30px;
            padding: 2px;
        }
        #przycisk1
        {
            display: block;
            font-family: Fantasy;
            width 800px;
            height 400px;
            backgorund: red;
            color: black;
            font-size: 20px;
            cursor: pointer;
        }
        #przycisk2    
        {
            display: block;
            font-family: Fantasy;
            width 800px;
            height 400px;
            backgorund: red;
            color: black;
            font-size: 20px;
            cursor: pointer;
        }
        h1
        {
            margin-left: auto;
            margin-right: auto;
            padding: 20px;
            font-family: Fantasy;
            color: red;
            background-color: black;
        }
        h2
        {
            font-family: Fantasy;
            letter-spacing: 3px;
        }
        #audiopoint
        {
            align: left;
        }
    </style>
    <script type="text/javascript">
        var godz;
        var min;
        var sek;
        var plant;
        function SoundOn()
        {
            document.getElementById("audio").innerHTML = "<img src=\"audio.png\" id=\"audiopoint\" />";
            document.getElementById("onoffdiv").innerHTML = "<input type=\"submit\" value=\"on/off\" id=\"onoff\" onclick=\"SoundOff()\" style=\"cursor: pointer;\" />"
        }
        function SoundOff()
        {
            document.getElementById("audio").innerHTML = "<img src=\"audiooff.png\" id=\"audiopoint\" />";
            document.getElementById("onoffdiv").innerHTML = "<input type=\"submit\" value=\"on/off\" id=\"onoff\" onclick=\"SoundOn()\" style=\"cursor: pointer;\" />"
        }
        function DefuseBomb()
            {
                document.getElementById("timer").innerHTML = "00:00:00";
            }
        function Odliczanie()
        {
            document.getElementById("timer").innerHTML = godz+":"+min+":"+sek;
            if(plant==true)
            {
                sek=sek-1;
                if(sek==0)
                {
                    min=min-1;
                    sek=sek+59;
                    if(min==0)
                    {
                        godz=godz-1;
                        min=min+59;
                        if(godz==0)
                        {
                            document.getElementById("timer").innerHTML = "00:"+min+":"+sek;
                        }
                    }
                }
                if((godz==0)&&(min==0)&&(sek==0))
                {
                    Boom();
                }
            }
            setTimeOut("Odliczanie()", 1000);
        }
        
        function Boom()
        {
                document.getElementById("container").innerHTML = "<source src=\"boom.mp4\" type=\"video/mp4\" codecs=\"avc1.42E01E, mp4a.40.2\">"
        }
        function PlantBomb()
        {
            godz = h;
            min = m;
            sek = s;
            plant = planted;
            var planted = false;
            var h = document.getElementById("pole").value;
            if(h<10) h = "0"+h;
            if(h==0) h = "00"
            var m = document.getElementById("pole1").value;
            if(m<10) m = "0"+m;
            if(m==0) m = "00"
            var s = document.getElementById("pole2").value;
            if(s<10) s = "0"+s;
            if(s==0) s = "00"
            if((h<0)||(m<0)||(s<0))document.getElementById("error").innerHTML = "It isn't good value! Try Again!";
            if((h>=0)&&(m>=0)&&(s>=0)&&(h<=99)&&(m<=59)&&(s<=59))
            {
            document.getElementById("timer").innerHTML = h+":"+m+":"+s;
            document.getElementById("error").innerHTML = "";
            planted = true;
            Odliczanie();
            }
            if((h>99)||(m>59)||(s>59))document.getElementById("error").innerHTML = "It isn't good value! Try Again!";
            if((h==0)&&(m==0)&&(s==0))document.getElementById("error").innerHTML = "It isn't value! Try Again!";
        }
    
    </script>
    <body bgcolor="gray">
    <div id="container" align="center">
    <h2 align="center">PLANT YOUR BOMB!<h2>
    <br />
    <br />
    <br />
        <input type="text" id="pole" />h
        <input type="text" id="pole1" />m
        <input type="text" id="pole2" />s
        <br />
        <br />
        <input type="submit" value="Start!" id="przycisk1" onclick="PlantBomb()" />
            <div>
                <h1 align="center" id="timer">00:00:00</h1>
            </div>
            <div id="error">
                
            </div>
            <br />
            <br />
            <br />
            <input type="submit" value="defuse the bomb" id="przycisk2" onclick="DefuseBomb()">
    </div>
    <div id="audio">
        <img src="audio.png" id="audiopoint" />
    </div>
    <div id="onoffdiv">
    <input type="submit" value="on/off" id="onoff" onclick="SoundOff()" style="cursor: pointer;" />
    </div>
    </body>
</html>



 

| Z góry dziękuję! |

3 odpowiedzi

+2 głosów
odpowiedź 18 lipca 2015 przez Comandeer Guru (599,730 p.)
wybrane 20 lipca 2015 przez Michał Gibas
 
Najlepsza
A co dokładnie nie działa?
komentarz 18 lipca 2015 przez Michał Gibas Pasjonat (19,610 p.)
Nie działa mi odliczanie w Js'ie.
komentarz 18 lipca 2015 przez Comandeer Guru (599,730 p.)

setTimeout, nie setTimeOut. Dodatkowo do poczytania: http://tutorials.comandeer.pl/js-beauty.html#setTimeout

PlantBomb najpierw wylicz wszystko, a dopiero później przypisz godziny, minuty i sekundy z krótkich zmiennych do długich (inaczej dostajesz tam undefined). Dodatkowo wgl bym to wyeliminował i po prostu przekazywał te wartości jako parametry do Odliczanie. Przy okazji zrobiłbym walidację tego, co jest w polach (a je same zmienił na [type=number]). 

No i jeszcze w Odliczanie sprawdasz wartość zmiennej plant zamiast planted.

A nazwy funkcji dużą to konwencja wyłącznie dla konstruktorów - Twoje funkcje powinny mieć nazwy zaczynającą się małą. Dodatkowo [on…] w kodzie to zło: https://pornel.net/onclick

Po poprawkach i kilku udoskonaleniach wygląda to tak: http://wklej.org/hash/8d8e9511c44/ (no dobra, zrobiłem to po mojemu… czyli dobrze :P)

komentarz 20 lipca 2015 przez Michał Gibas Pasjonat (19,610 p.)
Dzięki za podpowiedź i porady!
0 głosów
odpowiedź 18 lipca 2015 przez Boshi VIP (100,240 p.)
Wsadź to w znaczniki bo czytać  sie nie da.
komentarz 18 lipca 2015 przez krecik1334 Maniak (58,390 p.)

Wstawione. Można czytać wink

0 głosów
odpowiedź 18 lipca 2015 przez michal0007 Nowicjusz (140 p.)
rzuć okiem tutaj http://jsfiddle.net/MATj4/19/

Podobne pytania

0 głosów
2 odpowiedzi 156 wizyt
pytanie zadane 12 kwietnia 2021 w JavaScript przez DominikPie Użytkownik (770 p.)
0 głosów
1 odpowiedź 98 wizyt
pytanie zadane 1 marca 2020 w JavaScript przez niezalogowany
0 głosów
1 odpowiedź 280 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...