マウスストーカー８■文字■　横流れ時計離したり付けたり

●2016/05/30：即時関数で囲んで、グローバル変数を消しました。

■時計表示のスイッチボタンの無いJavaScriptはこちら→　マウスストーカー６■文字■横流れのリアル時計

上記のJavaScriptを改造しました。
デジタル時計の数字の付いた、マウスストーカーの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>

<style type="text/css"><!--
#control{position:fixed; top:100px; left:20px;}/*★時計用ボタンの固定位置指定。不要なら削除*/
--></style>

</head>
<body>

<!--★コピーここから。　下記１行が時計用ボタンの指定。削除しても可-->
<input type="button" value="時計Off" id="control" title="Offで時計離す。Onで付く">

<script type="text/javascript"><!--
/*==============================================================
マウスの横流れ時計離したり付けたり　By：http://himajin.moo.jp/freejava/stokertime.html（サイト：http://himajin.moo.jp）
離したり付けたりのスイッチ追加　　★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 vis=true;//スイッチ
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);
function H_move(e){x[0]=e.pageX+fx; y[0]=e.pageY+fy;}
document.onmousemove =H_move;
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); }
}
function onoff(){
vis=!vis;
document.getElementById("control").value=vis?"時計Off":"時計On";
document.onmousemove=vis? H_move:null;
}
document.getElementById("control").onclick=onoff;
F_run();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

マウスストーカー８■文字■ 横流れ時計離したり付けたり UP日時 : 2016/05/30

　マウスストーカー８■文字■　横流れ時計離したり付けたり　　　　UP日時 : 2016/05/30