-
JS实现钟表效果
JS实现钟表效果
通过new Date();获取实时时间然后通过css3的定位和旋转实现钟表效果
css代码:
- <style>
- .clock {
- position: relative;
- width: 400px;
- height: 400px;
- margin: 20px auto;
- border-radius: 50%;
- background: url(images/clock.png);
- }
- .clock div:nth-child(1), .clock div:nth-child(2), .clock div:nth-child(3), .clock div:nth-child(4) {
- position: absolute;
- -webkit-transform-origin: bottom;
- }
- .clock div:nth-child(1) {
- top: 45px;
- left: 197px;
- width: 4px;
- height: 160px;
- border-top-right-radius: 50px;
- background: #343339;
- }
- .clock div:nth-child(2) {
- top: 80px;
- left: 195px;
- width: 6px;
- height: 120px;
- border-top-right-radius: 10px;
- border-bottom-right-radius: 10px;
- background: #343332;
- }
- .clock div:nth-child(3) {
- top: 100px;
- left: 195px;
- width: 8px;
- height: 100px;
- border-top-right-radius: 10px;
- border-bottom-right-radius: 10px;
- background: #010001;
- }
- .clock div:nth-child(4) {
- top: 189px;
- left: 188px;
- width: 20px;
- height: 20px;
- border: 1px solid #fff;
- border-radius: 50%;
- background: rgba(237, 200, 45, 1);
- }
- </style>
<style> .clock { position: relative; width: 400px; height: 400px; margin: 20px auto; border-radius: 50%; background: url(images/clock.png); } .clock div:nth-child(1), .clock div:nth-child(2), .clock div:nth-child(3), .clock div:nth-child(4) { position: absolute; -webkit-transform-origin: bottom; } .clock div:nth-child(1) { top: 45px; left: 197px; width: 4px; height: 160px; border-top-right-radius: 50px; background: #343339; } .clock div:nth-child(2) { top: 80px; left: 195px; width: 6px; height: 120px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background: #343332; } .clock div:nth-child(3) { top: 100px; left: 195px; width: 8px; height: 100px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background: #010001; } .clock div:nth-child(4) { top: 189px; left: 188px; width: 20px; height: 20px; border: 1px solid #fff; border-radius: 50%; background: rgba(237, 200, 45, 1); } </style>
html代码:
- <div class=“clock”>
- <div id=“sec”></div>
- <div id=“min”></div>
- <div id=“hour”></div>
- <div></div>
- </div>
<div class="clock"> <div id="sec"></div> <div id="min"></div> <div id="hour"></div> <div></div> </div>
js代码:
- <script>
- var hour = document.getElementById(‘hour’);
- var min = document.getElementById(‘min’);
- var sec = document.getElementById(‘sec’);
- var timer = null;
- function sport (){
- var time = new Date();
- sec.style.webkitTransform = ’rotate(‘ + time.getSeconds() * 6 + ‘deg)’;
- min.style.webkitTransform = ’rotate(‘ + (time.getMinutes() + time.getSeconds() / 60) * 6 + ‘deg)’;
- hour.style.WebkitTransform = ’rotate(‘ + (time.getHours() % 12 + time.getMinutes() / 60 + time.getSeconds() / 3600) * 30 + ‘deg)’;
- console.log(sec.style.WebkitTransform);
- }sport ();
- setInterval(sport, 1000);
- </script>
<script> var hour = document.getElementById('hour'); var min = document.getElementById('min'); var sec = document.getElementById('sec'); var timer = null; function sport (){ var time = new Date(); sec.style.webkitTransform = 'rotate(' + time.getSeconds() * 6 + 'deg)'; min.style.webkitTransform = 'rotate(' + (time.getMinutes() + time.getSeconds() / 60) * 6 + 'deg)'; hour.style.WebkitTransform = 'rotate(' + (time.getHours() % 12 + time.getMinutes() / 60 + time.getSeconds() / 3600) * 30 + 'deg)'; console.log(sec.style.WebkitTransform); }sport (); setInterval(sport, 1000); </script>
2017
三月
18
</div>
<div class="rssFix">
<a href="http://blog.csdn.net/qq_35515563/rss/list" class="column" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_RSS'])"><i class="fa fa-rss"></i></a>
</div>
<div id="goTopBtn" class="skin_backTop"><i class="fa fa-chevron-up"></i></div>
</div>