完成的效果:
同学的代码:
<!----html部分----> <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部分---->
<!----注意这里的lunar.js来自博客大神:晶晶---->
<!----附上博客链接:https://blog.jjonline.cn/userInterFace/173.html ---->
<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>
