
一款带有年月日星期数字日期时间跟指针一体时钟jQuery代码。
js代码
<script>
$(function(){
var clock = document.getElementById(\"clock\");
function initNumXY(){
// 1、12个数字的位置设置
var radius = 160;//大圆半价
var dot_num = 360/$(\".dot\").length;//每个div对应的弧度数
//每一个dot对应的弧度;
var ahd = dot_num*Math.PI/180;
$(\".dot\").each(function(index, el) {
$(this).css({
\"left\":180+Math.sin((ahd*index))*radius,
\"top\":180+Math.cos((ahd*index))*radius
});
});
// 2、刻钟设置
for(var i = 0; i < 60; i++) {
clock.innerHTML += \"<div class=\'clock-scale\'> \" +
\"<div class=\'scale-hidden\'></div>\" +
\"<div class=\'scale-show\'></div>\" +
\"</div>\";
}
var scale = document.getElementsByClassName(\"clock-scale\");
for(var i = 0; i < scale.length; i++) {
scale[i].style.transform=\"rotate(\" + (i * 6 - 90) + \"deg)\";
}
}
initNumXY();//调用上面的函数
//获取时钟id
var hour_line = document.getElementById(\"hour_line\"),
minute_line = document.getElementById(\"minute_line\"),
second_line = document.getElementById(\"second_line\"),
date_info=document.getElementById(\"date_info\"),//获取date_info
hour_time = document.getElementById(\"hour_time\"),// 获去时间id
minute_time = document.getElementById(\"minute_time\"),
second_time = document.getElementById(\"second_time\");
//3、设置动态时间
function setTime(){
var nowdate = new Date();
//获取年月日时分秒
var year = nowdate.getFullYear(),
month = nowdate.getMonth()+1,
day = nowdate.getDay(),
hours = nowdate.getHours(),
minutes = nowdate.getMinutes(),
seconds = nowdate.getSeconds(),
date = nowdate.getDate();
var weekday =[\"星期日\",\"星期一\",\"星期二\",\"星期三\",\"星期四\",\"星期五\",\"星期六\"];
// 获取日期id
date_info.innerHTML=year+\"年\"+month+\"月\"+day+\"日 \"+weekday[day];
hour_time.innerHTML = hours >=10 ? hours : \"0\"+hours;
minute_time.innerHTML = minutes >=10 ? minutes : \"0\"+minutes;
second_time.innerHTML = seconds >=10 ? seconds : \"0\"+seconds;
console.log(year+\"年\"+month+\"月\"+day+\"日 \"+weekday[day]);
//时分秒针设置
var hour_rotate = (hours*30-90) + (Math.floor(minutes / 12) * 6);
hour_line.style.transform = \'rotate(\' + hour_rotate + \'deg)\';
minute_line.style.transform = \'rotate(\' + (minutes*6 - 90) + \'deg)\';
second_line.style.transform = \'rotate(\' + (seconds*6 - 90)+\'deg)\';
}
// setTime();
setInterval(setTime, 1000);
});
</script>










暂无评论内容