Question

所以我想创建一个计时器，但我的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>

Answer 1

您正在使用jquery 1.4并在1.6中添加了prop()。

更改

<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>

它会运行。

Answer 2

将jquery路径更改为：

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

确保您始终拥有最新的jquery代码。

Answer 3

使用DOCTYPE，您必须将脚本标记更改为 -

<script type="text/javascript">

此外，该版本的jQuery中不提供.prop() - 请改用.attr()。

Answer 4

问题是您使用旧版本的jQuery

正如您在以下测试中看到的那样：{2.0}版本中的http://jqversion.com/#!/p8SjEfL/1可以正常工作，但在1.4.x中无效...

javascript代码无效。可能会错误地将它附加到html页面

4 个答案: