js实现炫酷时钟代码-html代码-BFW代码库

代码语言：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 + seconds - (sec * (360 / 60));
  var mrot = 360 + minutes - (min * (360 / 60));
  var hrot = 360 + hours - ((hour * (360 / 12)) + min * (360 / (60 * 12)));

  var rots = "rotate(" + srot + "deg)";
  var rotm = "rotate(" + mrot + "deg)";
  var roth = "rotate(" + hrot + "deg)";

  draw('outer_sec').style.webkitTransform = rots;
  draw('outer_min').style.webkitTransform = rotm;
  draw('outer_hour').style.webkitTransform = roth;
  draw('outer_sec').style.MozTransform = rots;
  draw('outer_min').style.MozTransform = rotm;
  draw('outer_hour').style.MozTransform = roth;
}

function realtime(d) {
  var hour = d.getHours();
  var min = d.getMinutes();
  var sec = d.getSeconds();
  var currHr = hour % 12;
  currHr = currHr ? currHr : 12;
  var ts = currHr + ':' +numPad0(min) + ':' + numPad0(sec);
  return ts;
}

function numPad0(str) {
  var cStr = str.toString();
  if (cStr.length < 2) str = 0 + cStr;
  return str;
}
function build(thisc, w, h){
  var _c  = $('hidden');
  var c = $$('canvas');
  c.id = 'id_' + thisc;
  c.width = w;
  c.height = h;
  c.style.display = "none";
  _c.appendChild(c);
  return canv(thisc);
}

function remove(thisc){
  var _c = $('hidden');
  var thisid = 'id_' + thisc;
  var c = $(thisid);
  if(c !== null){
    _c.removeChild(c);
  }
}
function save(thisc){
  var _c  = $('hidden');
  var src = 'id_' + thisc;
  var _id = src + '_img';

  var img = new Image();
  img.id = _id;
  img.src = $(src).toDataURL();
  img.width = $(src).width;
  img.height = $(src).height;
  _c.appendChild(img);
}

function hide(thisc){
  var _id = 'id_' + thisc + '_img';
  var thisimg = $(_id);
  thisimg.style.display = "none";
}

function display(thisc){
  var _id = 'id_' + thisc + '_img';
  var thisimg = $(_id);
  thisimg.style.display = "block";
}

function canv(thisc){
  var thisid = 'id_' + thisc;
  return $(thisid).getContext('2d');
}

function getcnvsById(thisc){
  var thisid= 'id_' + thisc;
  return $(thisid);
}

function draw(thisc){
  var _id = 'id_' + thisc + '_img';
  return $(_id);
}


function hands(){
  var calcs = $$('div');
  calcs.style.display = "none";
  calcs.appendChild(subs('hand_hour', (0 * 60 / 12)));
  calcs.appendChild(subs('hand_min', 0));
  calcs.appendChild(subs('hand_sec', 0));
  document.body.appendChild(calcs);
}

function subs(thisid, ofs){
  var _c = $$('span');
  _c.id = 'id_' + thisid + '_ofs_deg';
  _c.style.display = "none";
  _c.textContent = ofs * 360 / 60;
  return _c;
}


function midClock(){
  var sz = Math.round(maxsize() * 0.95);
  var pos = Math.round(sz / 2);
  var fontsz = 32;
  var digiclock = $$('div');
  digiclock.id = "mid_clock";
  digiclock.style.position = "absolute";
  digiclock.style.top = "0";
  digiclock.style.left = "0";
  digiclock.style.bottom = "0";
  digiclock.style.right = "0";
  digiclock.style.margin ="auto";
  digiclock.style.width="150px";
  digiclock.style.height="50px";
  digiclock.style.textAlign="center";
  digiclock.style.fontFamily = "monospace";
  digiclock.style.fontSize = fontsz + "px";
  digiclock.style.colo.........完整代码请登录后点击上方下载按钮下载查看