JSFiddle 中的相同代码运行，但在 .html 中有错误

Question

我正在尝试使用 jQuery 更新时钟并且代码在 JSFiddle (link here) 中工作正常，但是当我将它传递给 .html 时 "hours" 和"minutes" 选项变为“0”。请看下面的代码：

<ul>
    <li class='hours'>
        <select>
            <option value=0>00</option>
            <option value=1>01</option>
            <option value=2>02</option>
            <option value=3>03</option>
            <option value=4>04</option>
            <option value=5>05</option>
            <option value=6>06</option>
            <option value=7>07</option>
            <option value=8>08</option>
            <option value=9>09</option>
            <option value=10>10</option>
            <option value=11>11</option>
            <option value=12>12</option>
            <option value=13>13</option>
            <option value=14>14</option>
            <option value=15>15</option>
            <option value=16>16</option>
            <option value=17>17</option>
            <option value=18>18</option>
            <option value=19>19</option>
            <option value=20>20</option>
            <option value=21>21</option>
            <option value=22>22</option>
            <option value=23>23</option>
        </select>
    </li>
    <li class='point'>:</li>
    <li class='min'>
        <select>
            <option value=0>00</option>
            <option value=1>01</option>
            <option value=2>02</option>
            <option value=3>03</option>
            <option value=4>04</option>
            <option value=5>05</option>
            <option value=6>06</option>
            <option value=7>07</option>
            <option value=8>08</option>
            <option value=9>09</option>
            <option value=10>10</option>
            <option value=11>11</option>
            <option value=12>12</option>
            <option value=13>13</option>
            <option value=14>14</option>
            <option value=15>15</option>
            <option value=16>16</option>
            <option value=17>17</option>
            <option value=18>18</option>
            <option value=19>19</option>
            <option value=20>20</option>
            <option value=21>21</option>
            <option value=22>22</option>
            <option value=23>23</option>
            <option value=24>24</option>
            <option value=25>25</option>
            <option value=26>26</option>
            <option value=27>27</option>
            <option value=28>28</option>
            <option value=29>29</option>
            <option value=30>30</option>
            <option value=31>31</option>
            <option value=32>32</option>
            <option value=33>33</option>
            <option value=34>34</option>
            <option value=35>35</option>
            <option value=36>36</option>
            <option value=37>37</option>
            <option value=38>38</option>
            <option value=39>39</option>
            <option value=40>40</option>
            <option value=41>41</option>
            <option value=42>42</option>
            <option value=43>43</option>
            <option value=44>44</option>
            <option value=45>45</option>
            <option value=46>46</option>
            <option value=47>47</option>
            <option value=48>48</option>
            <option value=49>49</option>
            <option value=50>50</option>
            <option value=51>51</option>
            <option value=52>52</option>
            <option value=53>53</option>
            <option value=54>54</option>
            <option value=55>55</option>
            <option value=56>56</option>
            <option value=57>57</option>
            <option value=58>58</option>
            <option value=59>59</option>
        </select>
    </li>
    <li class='point'>:</li>
    <li class='sec'>
        <select>
            <option value=0>00</option>
            <option value=1>01</option>
            <option value=2>02</option>
            <option value=3>03</option>
            <option value=4>04</option>
            <option value=5>05</option>
            <option value=6>06</option>
            <option value=7>07</option>
            <option value=8>08</option>
            <option value=9>09</option>
            <option value=10>10</option>
            <option value=11>11</option>
            <option value=12>12</option>
            <option value=13>13</option>
            <option value=14>14</option>
            <option value=15>15</option>
            <option value=16>16</option>
            <option value=17>17</option>
            <option value=18>18</option>
            <option value=19>19</option>
            <option value=20>20</option>
            <option value=21>21</option>
            <option value=22>22</option>
            <option value=23>23</option>
            <option value=24>24</option>
            <option value=25>25</option>
            <option value=26>26</option>
            <option value=27>27</option>
            <option value=28>28</option>
            <option value=29>29</option>
            <option value=30>30</option>
            <option value=31>31</option>
            <option value=32>32</option>
            <option value=33>33</option>
            <option value=34>34</option>
            <option value=35>35</option>
            <option value=36>36</option>
            <option value=37>37</option>
            <option value=38>38</option>
            <option value=39>39</option>
            <option value=40>40</option>
            <option value=41>41</option>
            <option value=42>42</option>
            <option value=43>43</option>
            <option value=44>44</option>
            <option value=45>45</option>
            <option value=46>46</option>
            <option value=47>47</option>
            <option value=48>48</option>
            <option value=49>49</option>
            <option value=50>50</option>
            <option value=51>51</option>
            <option value=52>52</option>
            <option value=53>53</option>
            <option value=54>54</option>
            <option value=55>55</option>
            <option value=56>56</option>
            <option value=57>57</option>
            <option value=58>58</option>
            <option value=59>59</option>
        </select>
    </li>
</ul>

<!-- JavaScript Includes -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        digitalClock();
    });

    function digitalClock() {
        hrs = $(".hours option")
        min = $(".min option")
        sec = $(".sec option")

        var _updateTime = function() {
            s = new Date().getUTCSeconds();
            m = new Date().getUTCMinutes();
            h = new Date().getUTCHours();
            sec.removeAttr("selected").eq(s).attr("selected", "");
            min.removeAttr("selected").eq(m).attr("selected", "");
            hrs.removeAttr("selected").eq(h).attr("selected", "");
        };

        setInterval(_updateTime, 1000);
    }
</script>

如您所见，代码完全相同，但时钟在 JSFiddle 中运行正确，但在网络浏览器 html 中保持 00:00:00。你能解释一下这是什么问题吗？

Answer 1

这个 html 对我有用，我刚刚向你的添加了 html 和 body 标签。

<html>

<body>
    <ul>
        <li class='hours'>
            <select>
            <option value=0>00</option>
            <option value=1>01</option>
            <option value=2>02</option>
            <option value=3>03</option>
            <option value=4>04</option>
            <option value=5>05</option>
            <option value=6>06</option>
            <option value=7>07</option>
            <option value=8>08</option>
            <option value=9>09</option>
            <option value=10>10</option>
            <option value=11>11</option>
            <option value=12>12</option>
            <option value=13>13</option>
            <option value=14>14</option>
            <option value=15>15</option>
            <option value=16>16</option>
            <option value=17>17</option>
            <option value=18>18</option>
            <option value=19>19</option>
            <option value=20>20</option>
            <option value=21>21</option>
            <option value=22>22</option>
            <option value=23>23</option>
        </select>
        </li>
        <li class='point'>:</li>
        <li class='min'>
            <select>
            <option value=0>00</option>
            <option value=1>01</option>
            <option value=2>02</option>
            <option value=3>03</option>
            <option value=4>04</option>
            <option value=5>05</option>
            <option value=6>06</option>
            <option value=7>07</option>
            <option value=8>08</option>
            <option value=9>09</option>
            <option value=10>10</option>
            <option value=11>11</option>
            <option value=12>12</option>
            <option value=13>13</option>
            <option value=14>14</option>
            <option value=15>15</option>
            <option value=16>16</option>
            <option value=17>17</option>
            <option value=18>18</option>
            <option value=19>19</option>
            <option value=20>20</option>
            <option value=21>21</option>
            <option value=22>22</option>
            <option value=23>23</option>
            <option value=24>24</option>
            <option value=25>25</option>
            <option value=26>26</option>
            <option value=27>27</option>
            <option value=28>28</option>
            <option value=29>29</option>
            <option value=30>30</option>
            <option value=31>31</option>
            <option value=32>32</option>
            <option value=33>33</option>
            <option value=34>34</option>
            <option value=35>35</option>
            <option value=36>36</option>
            <option value=37>37</option>
            <option value=38>38</option>
            <option value=39>39</option>
            <option value=40>40</option>
            <option value=41>41</option>
            <option value=42>42</option>
            <option value=43>43</option>
            <option value=44>44</option>
            <option value=45>45</option>
            <option value=46>46</option>
            <option value=47>47</option>
            <option value=48>48</option>
            <option value=49>49</option>
            <option value=50>50</option>
            <option value=51>51</option>
            <option value=52>52</option>
            <option value=53>53</option>
            <option value=54>54</option>
            <option value=55>55</option>
            <option value=56>56</option>
            <option value=57>57</option>
            <option value=58>58</option>
            <option value=59>59</option>
        </select>
        </li>
        <li class='point'>:</li>
        <li class='sec'>
            <select>
            <option value=0>00</option>
            <option value=1>01</option>
            <option value=2>02</option>
            <option value=3>03</option>
            <option value=4>04</option>
            <option value=5>05</option>
            <option value=6>06</option>
            <option value=7>07</option>
            <option value=8>08</option>
            <option value=9>09</option>
            <option value=10>10</option>
            <option value=11>11</option>
            <option value=12>12</option>
            <option value=13>13</option>
            <option value=14>14</option>
            <option value=15>15</option>
            <option value=16>16</option>
            <option value=17>17</option>
            <option value=18>18</option>
            <option value=19>19</option>
            <option value=20>20</option>
            <option value=21>21</option>
            <option value=22>22</option>
            <option value=23>23</option>
            <option value=24>24</option>
            <option value=25>25</option>
            <option value=26>26</option>
            <option value=27>27</option>
            <option value=28>28</option>
            <option value=29>29</option>
            <option value=30>30</option>
            <option value=31>31</option>
            <option value=32>32</option>
            <option value=33>33</option>
            <option value=34>34</option>
            <option value=35>35</option>
            <option value=36>36</option>
            <option value=37>37</option>
            <option value=38>38</option>
            <option value=39>39</option>
            <option value=40>40</option>
            <option value=41>41</option>
            <option value=42>42</option>
            <option value=43>43</option>
            <option value=44>44</option>
            <option value=45>45</option>
            <option value=46>46</option>
            <option value=47>47</option>
            <option value=48>48</option>
            <option value=49>49</option>
            <option value=50>50</option>
            <option value=51>51</option>
            <option value=52>52</option>
            <option value=53>53</option>
            <option value=54>54</option>
            <option value=55>55</option>
            <option value=56>56</option>
            <option value=57>57</option>
            <option value=58>58</option>
            <option value=59>59</option>
        </select>
        </li>
    </ul>

    <!-- JavaScript Includes -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            digitalClock();
        });

        function digitalClock() {
            hrs = $(".hours option")
            min = $(".min option")
            sec = $(".sec option")

            var _updateTime = function() {
                s = new Date().getUTCSeconds();
                m = new Date().getUTCMinutes();
                h = new Date().getUTCHours();
                sec.removeAttr("selected").eq(s).attr("selected", "");
                min.removeAttr("selected").eq(m).attr("selected", "");
                hrs.removeAttr("selected").eq(h).attr("selected", "");
            };

            setInterval(_updateTime, 1000);
        }
    </script>
</body>

</html>

Answer 2

您需要更新您的 jquery...

改变

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

到

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Answer 3

尝试在header中包含js代码，似乎是初始化时间（doc ready）影响结果

<head>
<!-- JavaScript Includes -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    digitalClock();
});

function digitalClock() {
    hrs = $(".hours option")
    min = $(".min option")
    sec = $(".sec option")

    var _updateTime = function() {
        s = new Date().getUTCSeconds();
        m = new Date().getUTCMinutes();
        h = new Date().getUTCHours();
        sec.removeAttr("selected").eq(s).attr("selected", "");
        min.removeAttr("selected").eq(m).attr("selected", "");
        hrs.removeAttr("selected").eq(h).attr("selected", "");
    };

    setInterval(_updateTime, 1000);
}
</script>
</head>

JSFiddle 中的相同代码运行，但在 .html 中有错误

Same code run in JSFiddle, but with bug in .html

html

jquery

jsfiddle

JSFiddle 中的相同代码 运行，但在 .html 中有错误

Same code run in JSFiddle, but with bug in .html

html

jquery

jsfiddle

JSFiddle 中的相同代码运行，但在 .html 中有错误