前端学习记录-JavaScript配合css实现的时钟动态效果-
Posted li-xiangff
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端学习记录-JavaScript配合css实现的时钟动态效果-相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Display</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body onload="init()">
<div class="container">
<div class="timeCont">
<div id="hour">
<p>00</p><p>01</p><p>02</p><p>03</p><p>04</p><p>05</p><p>06</p><p>07</p><p>08</p><p>09</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p><p>21</p><p>22</p><p>23</p>
</div>
<span>:</span>
<div id="min">
<p>00</p><p>01</p><p>02</p><p>03</p><p>04</p><p>05</p><p>06</p><p>07</p><p>08</p><p>09</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p><p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p><p>27</p><p>28</p><p>29</p><p>30</p><p>31</p><p>32</p><p>33</p><p>34</p><p>35</p><p>36</p><p>37</p><p>38</p><p>39</p><p>40</p><p>41</p><p>42</p><p>43</p><p>44</p><p>45</p><p>46</p><p>47</p><p>48</p><p>49</p><p>50</p><p>51</p><p>52</p><p>53</p><p>54</p><p>55</p><p>56</p><p>57</p><p>58</p><p>59</p>
</div>
<span>:</span>
<div id="sec">
<p>00</p><p>01</p><p>02</p><p>03</p><p>04</p><p>05</p><p>06</p><p>07</p><p>08</p><p>09</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p><p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p><p>27</p><p>28</p><p>29</p><p>30</p><p>31</p><p>32</p><p>33</p><p>34</p><p>35</p><p>36</p><p>37</p><p>38</p><p>39</p><p>40</p><p>41</p><p>42</p><p>43</p><p>44</p><p>45</p><p>46</p><p>47</p><p>48</p><p>49</p><p>50</p><p>51</p><p>52</p><p>53</p><p>54</p><p>55</p><p>56</p><p>57</p><p>58</p><p>59</p>
</div>
</div>
</div>
</body>
<script>
var unit = 70;
function init(){
clock = setInterval(() => {
var now = new Date();
console.log(now.getHours(),now.getMinutes(),now.getSeconds());
rflsh(now);
}, 1000);
}
function rflsh(time){
$(‘hour‘).style.marginTop = - time.getHours() * unit +‘px‘;
$(‘min‘ ).style.marginTop = - time.getMinutes() * unit +‘px‘;
$(‘sec‘ ).style.marginTop = - time.getSeconds() * unit +‘px‘;
}
function $(id){
return document.getElementById(id);
}
</script>
</html>
实现效果：
以上是关于前端学习记录-JavaScript配合css实现的时钟动态效果-的主要内容，如果未能解决你的问题，请参考以下文章