JavaScript-код не работает. Возможно, он неправильно прикреплен к html-странице

0

Поэтому я пытаюсь создать таймер, но мой javascript не работает. Я прикрепляю его к странице неправильно? Я новичок в js, поэтому я не совсем уверен, в чем проблема. Если бы кто-нибудь мог указать, что именно я делаю неправильно, и как исправить это, я бы очень признателен!

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
    <link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" type="text/css" href="ex.css" /> 
    <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>

    <script>
        $(function () {
    var rounds  = 3;
    var states  = ['work', 'rest', 'wait'];
    var lengths = [3, 1, 2]; // In seconds
    var start   = $('#start');
    var stop    = $('#stop');
    var stats   = $('#stats');
    var roundEl = $('#round');
    var stateEl = $('#state');
    var cronoEl = $('#crono');
    var timer;

    start.click(function () {
        var ctimer, date;

        // UI
        start.prop('disabled', true);
        stop.prop('disabled', false);
        stats.show();

        // Start round
        nextRound(0);

        function nextRound(round) {
            // Update UI
            roundEl.html(round + 1);

            if (round < rounds) {
                // Start new round                
                nextState(round, 0);                
            } else {
                // We have finished
                stop.click();
            }
        }

        function nextState(round, state) {
            if (state < states.length) {                
                stateEl.html(states[state]);

                // Start crono UI
                time   = new Date();
                ctimer = setInterval(crono, 15);

                // State timer
                timer = setTimeout(function () {
                    clearInterval(ctimer);
                    nextState(round, state + 1);
                }, lengths[state] * 1000);
            } else {
                nextRound(round + 1);
            }
        }

        function crono() {
            cronoEl.html((((new Date()).getTime() - time.getTime()) / 1000).toFixed(2));
        }
    });

    stop.click(function () {
        clearTimeout(timer);
        start.prop('disabled', false);
        stop.prop('disabled', true);
        stats.hide();
    });
});

    </script>   
    <title>Workitt</title>
 </head>
 <body>

    <input id="start" value="START" type="button" />
    <input id="stop" value="STOP" type="button" disabled />
    <div id="stats" class="stats" style="display:none;">
        Round: <span id="round"></span><br>
        State: <span id="state" class="state"></span><br>
        Time: <span id="crono"></span>s<br>
    </div>

 </body>
</html>
  • 1
    jsfiddle.net/mWQ8g что не работает? проверь ссылку и скажи
  • 0
    Это работает и для меня: jqversion.com/#!/p8SjEfL
Показать ещё 1 комментарий
Теги:
timer

4 ответа

3
Лучший ответ

Вы используете jquery 1.4 и prop() добавлен в 1.6.

+ Изменить

<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>

в

<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-2.1.0.min.js"></script>

и он будет работать.

Поделиться
  • 0
    Я бы порекомендовал 1. * последнюю версию по сравнению с 2. * версиями для большей поддержки IE, т.е. 2. * версия не поддерживается в Internet Explorer 6, 7 или 8.
1

Измените путь jquery на:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

чтобы всегда иметь последний код jquery.

Поделиться
0

С DOCTYPE, который у вас есть, вам нужно изменить свой тег скрипта на это -

<script type="text/javascript">

Кроме того, .prop() недоступен в этой версии jQuery - вместо этого используйте .attr().

Поделиться
  • 1
    Технически да. Но это не вызовет его проблемы.
  • 0
    Кроме того, .prop() недоступно в этой версии jQuery - используйте вместо него .attr() . Нет, используйте вместо этого актуальную версию jQuery.
Показать ещё 2 комментария
0

Проблема в том, что вы используете более старую версию jQuery

Как вы можете видеть в следующем тесте: http://jqversion.com/#!/p8SjEfL/1 в версии 2.0.1 он работает, но в 1.4.x не работает.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню