js+html样式,(原创)js+css+html时钟

var myDate = new Date();

var shi = myDate.getHours();

var fen = myDate.getMinutes()

var miao = myDate.getSeconds();

$(".pxianshi").css("transform", "rotate(" + (shi * 5 * 6 + 90) + "deg)");

$(".pxianfen").css("transform", "rotate(" + (fen * 6 + 90) + "deg)");

$(".pxianmiao").css("transform", "rotate(" + (miao * 6 + 90) + "deg)");

getdate();

getmiao();

setTimeout(function() {

getfen();

}, 60000);

setTimeout(function() {

getshi();

}, 3600000);

function getmiao() {

//构造getmatrix函数,返回上次旋转度数

var deg = eval('get' + $(".pxianmiao").css('transform'));

//每次旋转多少度

var step = 6;

$(".pxianmiao").css("transform", "rotate(" + (deg + step) % 360 + "deg)")

setTimeout(function() {

getmiao();

}, 1000);

}

function getfen() {

//构造getmatrix函数,返回上次旋转度数

var deg = eval('get' + $(".pxianfen").css('transform'));

//每次旋转多少度

var step = 6;

$(".pxianfen").css("transform", "rotate(" + (deg + step) % 360 + "deg)")

setTimeout(function() {

getfen();

}, 60000);

}

function getshi() {

//构造getmatrix函数,返回上次旋转度数

var deg = eval('get' + $(".pxianshi").css('transform'));

//每次旋转多少度

var step = 6;

$(".pxianshi").css("transform", "rotate(" + (deg + step) % 360 + "deg)")

setTimeout(function() {

getshi();

}, 3600000);

}

function getmatrix(a, b, c, d, e, f) {

var aa = Math.round(180 * Math.asin(a) / Math.PI);

var bb = Math.round(180 * Math.acos(b) / Math.PI);

var cc = Math.round(180 * Math.asin(c) / Math.PI);

var dd = Math.round(180 * Math.acos(d) / Math.PI);

var deg = 0;

if (aa == bb || -aa == bb) {

deg = dd;

} else if (-aa + bb == 180) {

deg = 180 + cc;

} else if (aa + bb == 180) {

deg = 360 - cc || 360 - dd;

}

return deg >= 360 ? 0 : deg;

}

function getdate() {

var myDate = new Date();

$("#nowtime").html(myDate.toLocaleString());

//获取日期与时间

setTimeout(function() {

getdate()

}, 1000);

}