kurt.grigg６-１■文字■　動く時計 -原本-

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>kurt.grigg６-１■文字■　動く時計 -原本-</title>

<!--★コピーここから-->
<style type="text/css"><!--
body{
background-color : #000000;
}

.css1{
position : absolute;
top : 0px;
left : 0px;
width : 16px;
height : 16px;
font-family : Arial,sans-serif;
font-size : 16px;
text-align : center;
font-weight : bold;
}

.css2{
position : absolute;
top : 0px;
left : 0px;
width : 10px;
height : 10px;
font-family : Arial,sans-serif;
font-size : 10px;
text-align : center;
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。マウスボタン用-->
<div class="centre">
<script type="text/javascript"><!--
if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){
document.write('<input type="button" id="clockcontrol" value="Clock Off"/>');
}
//--></script>
</div>
<!--★ここまでマウスボタン用-->


<!--★ここから下はマウスストーカー用。下は外部jsにしても可-->
<script type="text/javascript"><!--
/*===================================================================
Silly Clock - http://www.btinternet.com/~kurt.grigg/javascript（閉鎖済）
掲載サイト：http://www.kurtsdhtml.talktalk.net/　
====================================================================*/
if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){

(function(){

//Configure here...

//Clock colours
var dCol = '#ff0000'; //date colour.
var fCol = '#ff0000'; //face colour.
var sCol = '#0000ff'; //seconds colour.
var mCol = '#ff0000'; //minutes colour.
var hCol = '#ff0000'; //hours colour.

//Controls
var del = 0.6;        //follow mouse speed.
var rep = 30;         //run speed (setTimeout).

//End.

var theDays = new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
var theMonths = new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var timer = null;
var vis = true;
var ofy = -7;
var ofx = -3;
var ofst = 70;
var date = new Date();
var day = date.getDate();
var year = date.getYear();
 if (year < 2000) year = year+1900; 

var dt = " " + theDays[date.getDay()] + " " + day + " " + theMonths[date.getMonth()] + " " + year;
var todaysDate = dt.split("");
var tdlen = todaysDate.length;

var clockFace = "3 4 5 6 7 8 9 10 11 12 1 2";
var cfa = clockFace.split(" ");
var cflen = cfa.length;

var _h = "...";
var hourfin = _h.split("");
var hlen = hourfin.length;

var _m = "....";
var minfin = _m.split("");
var mlen = minfin.length;

var _s = ".....";
var secfin = _s.split("");
var slen = secfin.length;

var dims = 40;
var Q1 = 360/cflen;
var Q2 = 360/todaysDate.length;
var handlen = dims/5.5;
var dy=new Array();
var dx=new Array();
var zy=new Array();
var zx=new Array();
var theSeconds = new Array();
var theMinutes = new Array(); 
var theHours = new Array();
var theDial = new Array(); 
var theDate = new Array();

var sum = tdlen + cflen + hlen + mlen + slen + 1;
for (i = 0; i < sum; i++){
dy[i] = 0;
dx[i] = 0;
zy[i] = 0;
zx[i] = 0;
}

var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

var isButton = (document.getElementById("clockcontrol"));

if (isButton)
var controlButton = document.getElementById("clockcontrol");

if (domWw) r = window;
else{ 
  if (d.documentElement && 
  typeof d.documentElement.clientWidth == "number" && 
  d.documentElement.clientWidth != 0)
  r = d.documentElement;
 else{ 
  if (d.body && 
  typeof d.body.clientWidth == "number")
  r = d.body;
 }
}

for (i=0; i < tdlen; i++){
 document.write('<div id="_date'+(idx+i)+'" class="css2" style="color:'+dCol+'">'+todaysDate[i]+'<\/div>');
}

for (i=0; i < cflen; i++){
 document.write('<div id="_face'+(idx+i)+'" class="css2" style="color:'+fCol+'">'+cfa[i]+'<\/div>');
}

for (i=0; i < hlen; i++){
 document.write('<div id="_hours'+(idx+i)+'" class="css1" style="color:'+hCol+'">'+hourfin[i]+'<\/div>');
}

for (i=0; i < mlen; i++){
 document.write('<div id="_minutes'+(idx+i)+'" class="css1" style="color:'+mCol+'">'+minfin[i]+'<\/div>');
}

for (i=0; i < slen; i++){
 document.write('<div id="_seconds'+(idx+i)+'" class="css1" style="color:'+sCol+'">'+secfin[i]+'<\/div>');
}


function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
  if (d.documentElement && d.defaultView && 
  typeof d.defaultView.scrollMaxY == "number"){
  oh = d.documentElement.offsetHeight;
  sy = d.defaultView.scrollMaxY;
  ow = d.documentElement.offsetWidth;
  sx = d.defaultView.scrollMaxX;
  rh = oh-sy;
  rw = ow-sx;
 }
 else{
  rh = r.innerHeight;
  rw = r.innerWidth;
 }
h = rh; 
w = rw;
}
else{
h = r.clientHeight; 
w = r.clientWidth;
}
}


function scrl(yx){
var y,x;
if (domSy){
 y = r.pageYOffset;
 x = r.pageXOffset;
 }
else{
 y = r.scrollTop;
 x = r.scrollLeft;
 }
return (yx == 0)?y:x;
}


function OnOff(){
if (vis){ 
 vis = false;
 controlButton.value = "Clock On";
 }
else{ 
 vis = true;
 controlButton.value = "Clock Off";
 Delay();
 }
kill();
}


function kill(){
if (vis) 
 mouseControl(true);
else 
 mouseControl(false);
} 


function mouseControl(needed){
if (window.addEventListener){
 if (needed){
  document.addEventListener("mousemove",mouse,false);
 }
 else{ 
  document.removeEventListener("mousemove",mouse,false);
 }
}  
if (window.attachEvent){
 if (needed){
  document.attachEvent("onmousemove",mouse);
 }
 else{ 
  document.detachEvent("onmousemove",mouse);
 }
}
}


function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;    
 if (typeof e.pageY == "number"){
  my = e.pageY + ofst - msy;
  mx = e.pageX + ofst;
 }
 else{
  my = e.clientY + ofst - msy;
  mx = e.clientX + ofst;
 }
if (!vis) kill();
}


function theClock(){
var time = new Date();

var secs = time.getSeconds();
var secOffSet = secs - 15;
if (secs < 15){ 
 secOffSet = secs+45;
}
var sec = Math.PI * (secOffSet/30);

var mins = time.getMinutes();
var minOffSet = mins - 15;
if (mins < 15){ 
 minOffSet = mins+45;
}
var min = Math.PI * (minOffSet/30);

var hrs = time.getHours();
if (hrs > 12){
 hrs -= 12;
}
var hrOffSet = hrs - 3;
if (hrs < 3){ 
 hrOffSet = hrs+9;
}
var hr = Math.PI * (hrOffSet/6) + Math.PI * time.getMinutes()/360;

for (i=0; i < slen; i++){
 theSeconds[i].top = dy[tdlen + cflen + hlen + mlen + i] + ofy + (i * handlen) * Math.sin(sec) + scrl(0) + pix;
 theSeconds[i].left = dx[tdlen + cflen + hlen + mlen + i] + ofx + (i * handlen) * Math.cos(sec) + pix;
 }

for (i=0; i < mlen; i++){
 theMinutes[i].top = dy[tdlen + cflen + hlen + i] + ofy + (i * handlen) * Math.sin(min) + scrl(0) + pix;
 theMinutes[i].left = dx[tdlen + cflen + hlen + i] + ofx + (i * handlen) * Math.cos(min) + pix;
 }

for (i=0; i < hlen; i++){
 theHours[i].top = dy[tdlen + cflen + i] + ofy + (i * handlen) * Math.sin(hr) + scrl(0) + pix;
 theHours[i].left = dx[tdlen + cflen + i] + ofx + (i * handlen) * Math.cos(hr) + pix;
 }

for (i=0; i < cflen; i++){
 theDial[i].top = dy[tdlen + i] + dims * Math.sin(i * Q1 * Math.PI/180) + scrl(0) + pix;
 theDial[i].left = dx[tdlen + i] + dims * Math.cos(i * Q1 * Math.PI/180) + pix;
 }

for (i=0; i < tdlen; i++){
 theDate[i].top = dy[i] + dims * 1.5 * Math.sin(-sec + i * Q2 * Math.PI/180) + scrl(0) + pix;
 theDate[i].left = dx[i] + dims * 1.5 * Math.cos(-sec + i * Q2 * Math.PI/180) + pix;
 }
if (!vis) clearTimeout(timer);
}


function Delay(){
if (!vis){
 dy[0]=-100;
 dx[0]=-100;
}
else{
 zy[0]=Math.round(dy[0]+=((my)-dy[0])*del);
 zx[0]=Math.round(dx[0]+=((mx)-dx[0])*del);
}
for (i=1; i < sum; i++){
 if (!vis){
  dy[i]=-100;
  dx[i]=-100;
 }
 else{
  zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);
  zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);
 }
if (dy[i-1] >= h-80) dy[i-1]=h-80;
if (dx[i-1] >= w-80) dx[i-1]=w-80;
}
timer = setTimeout(Delay,rep);
theClock();
}


function init(){
for (i=0; i < tdlen; i++){
 theDate[i] = document.getElementById("_date"+(idx+i)).style;
}
for (i=0; i < cflen; i++){
 theDial[i] = document.getElementById("_face"+(idx+i)).style; 
}
for (i=0; i < hlen; i++){
 theHours[i] = document.getElementById("_hours"+(idx+i)).style;
}
for (i=0; i < mlen; i++){
 theMinutes[i] = document.getElementById("_minutes"+(idx+i)).style; 
}
for (i=0; i < slen; i++){
 theSeconds[i] = document.getElementById("_seconds"+(idx+i)).style;         
}
winsize();
mouseControl(true);
Delay();
}

if (window.addEventListener){
 window.addEventListener("resize",winsize,false);
 window.addEventListener("load",init,false);
 if (isButton){
  controlButton.addEventListener("click",OnOff,false);
 }
}  
else if (window.attachEvent){
 window.attachEvent("onload",init);
 window.attachEvent("onresize",winsize);
 if (isButton){
 controlButton.attachEvent("onclick",OnOff);
 }
} 
})();
}//End.
// --></script>
<!--★コピーここまで-->

</body>
</html>
kurt.grigg６-１■文字■ 動く時計 -原本- UP日時 : 2016/05/29

　kurt.grigg６-１■文字■　動く時計 -原本-　　　　UP日時 : 2016/05/29
