2017-02-24 67 views
0

我想更新使用jQuery的時鐘和代碼工作正常在JSFiddle (link here),但是當我將它傳遞到.html「小時」和「分鐘」選項變成「0」。請參見下面的代碼:相同的代碼在JSFiddle中運行,但與錯誤在.html

<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。你能解釋我有什麼問題嗎?

+1

爲什麼不檢查控制檯並查看問題所在? –

+3

在JSFiddle中,您使用的是jQuery 3.1.1,但在您的代碼中使用了jQuery 1.10.1。 –

+0

控制檯顯示正確的時間值,如果你看到html代碼,選項有屬性選擇,但在選擇框中的值是0 ...如果你可以複製和粘貼這段代碼並自己看,也許是相同的bug會出現給你 –

回答

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

此html正在爲我工​​作,我剛剛爲您添加了htmlbody標籤。

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

這裏仍然是設置0,但是新版本jQuery現在解決了這個問題... –

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> 
相關問題