js实现炫酷时钟代码
代码语言:html
所属分类:其他
代码描述:js实现炫酷时钟代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Black+Ops+One);
html, body {
width: 100%;
min-height: 100%;
background: #181719;
overflow: hidden;
font-family: "Black Ops One", cursive;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
var $ = function(id) {return document.getElementById(id);};
var $$ = function(el){return(document.createElement(el));}
var h = function(){return window.innerHeight/1.5;}
var w = function(){return window.innerWidth/1.5;}
var maxsize = function(){return (h() < w()) ? h() : w();}
var main = $$('div');
main.id = "hidden";
document.body.appendChild(main);
function run(){
hands();
var outer_sec = setOuterSec();
position(draw(outer_sec));
var outer_min = setOuterMin();
position(draw(outer_min));
var outer_hour = setOuterHr();
position(draw(outer_hour));
var _hand = setHand();
position(draw(_hand));
midClock();
rot();
$('mid_clock').style.display = "block";
display(outer_sec);
display(outer_min);
display(outer_hour);
var cnt = setInterval(function(){rot();}, 1000);
}
function rot(){
var t = new Date();
var sec = t.getSeconds();
var min = t.getMinutes();
var hour = t.getHours();
if(hour > 12)hour = hour - 12;
var str = realtime(t);
$('mid_clock').textContent = str;
var seconds = Number($('id_hand_sec_ofs_deg').textContent);
var minutes = Number($('id_hand_min_ofs_deg').textContent);
var hours = Number($('id_hand_hour_ofs_deg').textContent);
var srot = 360 +.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0