首页 > 代码库 > javascript 通过面向对象编写圆形数字时钟
javascript 通过面向对象编写圆形数字时钟
效果如图所示，代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> .hour{height: 200px;width: 200px;position: relative;top:100px;left: 100px;border-radius: 50%; border: 3px solid #666666;display: inline-block} .minute{height: 200px;width: 200px;position: relative;top:100px;left: 100px;border-radius: 50%; border: 3px solid #666666;display: inline-block} .second{height: 200px;width: 200px;position: relative;top:100px;left: 100px;border-radius: 50%; border: 3px solid #666666;display: inline-block} .innerLeft{height: 178px;width: 89px;position: absolute;top: 1px;left: 1px;border-radius: 178px 0 0 178px ;border-bottom: 10px solid #009bff;border-top: 10px solid #009bff;border-left: 10px solid #009bff;background: white ;transform-origin: 100% 50%;} .innerRight{height: 178px;width: 89px;position: absolute;top: 1px;right: 1px;border-radius:0 178px 178px 0 ;border-bottom: 10px solid #009bff;border-top: 10px solid #009bff;border-right: 10px solid #009bff;background: white;transform-origin: 0 50%; transform: rotate(-180deg) ;} .cover{position: absolute;height: 200px;width: 100px;border-radius: 198px 0 0 198px;background: white;z-index: 1} input{position: absolute;top: 60px;left: 120px;} span{height: 20px;width: 80px;line-height: 20px;display: block;position: absolute;;top: 90px; z-index: 2; left: 60px;font-size: 16px;font-weight: bold;text-align: center} </style></head><body> <div class="hour"> <div class="innerLeft"></div> <div class="cover"></div> <div class="innerRight"></div> <span></span> </div> <div class="minute"> <div class="innerLeft"></div> <div class="cover"></div> <div class="innerRight"></div> <span></span> </div> <div class="second"> <div class="innerLeft"></div> <div class="cover"></div> <div class="innerRight"></div> <span></span> </div> <script> window.onload=function(){ function roll(progress,n) { innerLeft = document.querySelector(‘.‘+this.className + ‘ .innerLeft‘); innerRight = document.querySelector(‘.‘+this.className + ‘ .innerRight‘); span = document.querySelector(‘.‘+this.className + ‘ span‘); cover = document.querySelector(‘.‘+this.className + ‘ .cover‘); span.innerHTML = progress+‘‘+this.className; if (progress*n < 180) { console.log(this.className); cover.style.display = ‘block‘; innerLeft.style.transform = ‘rotate(‘ + (progress*n) + "deg)"; innerRight.style.transform = ‘rotate(‘ + (progress*n - 180) + ‘deg)‘; } else{ console.log(this.className); cover.style.display = ‘none‘; innerLeft.style.transform = ‘rotate(‘ + (progress*n) + "deg)"; innerRight.style.transform = ‘rotate(0deg)‘; } } var T=setInterval(function(){ var time=new Date(); var hours=time.getHours(); var minutes=time.getMinutes(); var seconds=time.getSeconds(); var hour=document.querySelector(‘.hour‘); var minute=document.querySelector(‘.minute‘); var second=document.querySelector(‘.second‘); roll.call(hour,hours,30); roll.call(minute,minutes,6); roll.call(second,seconds,6); },1000); } </script></body></html>
在编程过程中向使用tansform 来实现动态效果，但是会出现归零时逆向，最后就没有使用，接下来还是去探索一下吧。
javascript 通过面向对象编写圆形数字时钟
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。