相同的代码在JSFiddle中运行，但是在.html

时间：2017-02-24 15:36:28

标签： jquery html jsfiddle

我正在尝试使用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中正确运行，但在Web浏览器html中保持00:00:00。你能解释一下我的问题是什么吗？

3 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

你需要更新你的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>

答案 2 :(得分：0)

尝试在头文件中包含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>
相关问题
最新问题