我想更新使用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。你能解釋我有什麼問題嗎?
爲什麼不檢查控制檯並查看問題所在? –
在JSFiddle中,您使用的是jQuery 3.1.1,但在您的代碼中使用了jQuery 1.10.1。 –
控制檯顯示正確的時間值,如果你看到html代碼,選項有屬性選擇,但在選擇框中的值是0 ...如果你可以複製和粘貼這段代碼並自己看,也許是相同的bug會出現給你 –