マウスストーカー６■文字■　横流れのリアル時計

●2016/05/30：即時関数で囲んで、グローバル変数を消しました。
デジタル時計の数字の付いた、マウスストーカーのJavaScriptです。
マウスの動きに合わせて、数字が横に流れます。
原本はHIMAJINから。

原本の文字の指定のhtmlの非推奨タグを改め、さらに画面の下でマウスホイールした時に無限スクロールしないように修正しました。

■時計を消したり付けたりするJavaScriptはこちら→　マウスストーカー７■文字■横流れ時計消したり付けたり
■時計を離したり付けたりするJavaScriptはこちら→　マウスストーカー８■文字■横流れ時計離したり付けたり

<!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>マウスストーカー６■文字■　横流れのリアル時計</title>

</head>
<body>

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*==============================================================
マウスの横流れリアル時計　By：http://himajin.moo.jp/freejava/stokertime.html（サイト：http://himajin.moo.jp）
htmlの非推奨タグ修正。簡略化　　★2016/05/30
================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var msec=100;            　　 //★追従速度
var fs=24;               　　 //★時計の数字のサイズ。単位px
var fc="#f00";           　　 //★時計の数字の色
var fx=30;               　　 //★原本20。マウスに対する文字の表示位置。横座標
var fy=10;               　　 //★原本-10。マウスに対する文字の表示位置。縦座標
var F_face="Times New Roman"; //★フォント
var sc=12;                    //★数字同士の間隔。単位px

//指定ここまで--------------------------------------
function f(n){return n<10?"0"+n:n;}
var t=new Date;
var moji=f(t.getHours())+":"+f(t.getMinutes())+":"+f(t.getSeconds());
var x=[], y=[], i= 0, len=moji.length;
var sss="";
for(i=0;i<len;i++){
sss +="<div style='position:absolute; top:-100px; left:-100px; font-size:"+fs+"px; color:"+fc+"; font-family:"+F_face+";' id='Fonts"+i+"'>"+moji.charAt(i)+"</div>";
}
document.write(sss);
document.onmousemove=function (e){x[0]=e.pageX+fx; y[0]=e.pageY+fy;}
function F_run(){
var w=window.innerWidth-fs-18;
var h=window.pageYOffset+window.innerHeight-fs-18;
for (i=len-1; i>=0; i--){
if(i){ x[i]=x[i-1]+sc; y[i]=y[i-1];}
document.getElementById("Fonts"+i).style.top=Math.min(h, y[i])+"px";
document.getElementById("Fonts"+i).style.left=Math.min(w, x[i])+"px";
}
setTimeout(F_run,msec); nowtime();
}
function nowtime(){
function f(n){return n<10?"0"+n:n;}
t=new Date;
moji=f(t.getHours())+":"+f(t.getMinutes())+":"+f(t.getSeconds());
for(i=0; i<len; i++){document.getElementById("Fonts"+i).innerHTML=moji.charAt(i); }
}
F_run();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

マウスストーカー６■文字■ 横流れのリアル時計 UP日時 : 2016/05/30

　マウスストーカー６■文字■　横流れのリアル時計　　　　UP日時 : 2016/05/30