项目描述
上传时间
浏览人数
先放效果图!
web部分:
<body> <div class="circle"> <div class="center">♥</div> <div class="line"></div> <div class="hour"></div> <div class="min"></div> <div class="sec"></div> <div class="date"></div> <div class="time"></div> <div class="nl"></div> </div> </body>
css部分:
<style type="text/css"> *{ background-color: black; } body{ background-color: black; } .circle { width: 400px; height: 400px; border: 4px solid #FF42AB; border-radius: 50%; margin-top: 100px; margin-left: auto; margin-right: auto; position: relative; background-color: black; } .center{ position: absolute; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 40px; top: 180px; left: 180px; color: #FF42AB; } .line{ width: 2px; height: 8px; } .hour{ width: 6px; height: 100px; transform-origin: 50% 100%; background-color: #FF42AB; position: absolute; top: 100px; left: 200px; border-radius: 50px; z-index: 1; } .min{ width: 4px; height: 140px; transform-origin: 50% 100%; background-color: #FF42AB; position: absolute; top: 60px; left: 200px; border-radius: 50px; z-index: 1; } .sec { width: 2px; height: 150px; transform-origin: 50% 100%; background-color: #FF42AB; position: absolute; top: 50px; left: 200px; border-radius: 50px; z-index: 1; } .date{ position: relative; color: #FF42AB; width: 180px; text-align: center; top: 230px; left: 110px; font-size: 20px; } .nl{ position: relative; color: #FF42AB; width: 240px; text-align: center; top: 210px; left: 80px; } .time{ position: relative; color: #FF42AB; width: 180px; text-align: center; top: 100px; left: 110px; font-size: 25px; } </style>
js部分:
<script type="text/javascript" src="../../../js/lunar.js"></script> <script type="text/javascript"> // 获取当前时间 function getTime(){ let t = new Date(); let hour = t.getHours(); //时 hour = hour<10?('0'+hour):hour; //一位数前加0 let min = t.getMinutes(); //分 min = min<10?('0'+min):min; let sec = t.getSeconds(); //秒 sec = sec<10?('0'+sec):sec; let hourDeg = hour * 30; //1小时角度 let minDeg = min * 6; let secDeg = sec * 6; $('.time').html(hour + ':' + min + ':' + sec); $('.hour').css({'transform':'rotate(' + hourDeg + 'deg)'}); //transform:rotate(12deg); 旋转角度 $('.min').css({'transform': 'rotate(' + minDeg + 'deg)'}); $('.sec').css({'transform': 'rotate(' + secDeg + 'deg)'}); } window.onload = getTime(); setInterval(getTime); //按照指定的周期(以毫秒计)来调用函数或计算表达式 //获取当前日期 function getDate(){ let t = new Date(); let year = t.getFullYear(); //年 let mon = t.getMonth()+1; //月 mon = mon<10?('0'+mon):mon; let day = t.getDate(); //日 day = day<10?('0'+day):day; let d = t.getDay(); //星期 let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; let week = weeks[d]; $('.date').html(year + '-' + mon + '-' + day + ' ' +week); let n = calendar.solar2lunar(year, parseInt(mon), parseInt(day)); //农历 $('.nl').html('农历: ' + n.gzYear + '(' + n.Animal + ')年 ' + n.IMonthCn + n.IDayCn); } window.onload = getDate(); setInterval(getDate); </script>
注: lunar.js下载链接: https://blog.jjonline.cn/userInterFace/173.html