マウスストーカー１５■文字■　リアル時計・離したり付けたり

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

■マウスにリアル時計が付いてくるJavaScriptはこちら→　マウスストーカー１３■文字■マウスのリアル時計

上記のリアル時計のマウスストーカーを改造しました。左上のボタンクリックで、時計を離したり付けたりできます。
マウスのゆっくり後追いの動作の参考は、YAHOO!知恵袋から。リアル時計の原本はMake-Mobileから。

■リアル時計を消したり付けたりするJavaScriptはこちら→　マウスストーカー１４■文字■リアル時計・消したり付けたり

■2016/07/16：HTMLに記述した「 onclick="onoff();"」を不要のため削除。

<!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"><!--
/*★時計文字の装飾。#Moは必須。後はお好みで*/
#Mo{
font-size:18px;/*★文字サイズ指定*/
color:#80ff80;/*★文字色　緑*/
font-family:Atilla,Arial;/*★フォント書体指定。指定したフォントで表示できない場合に備え2個指定。お好みで*/
font-weight:bold;/*★太字指定*/
background:#004a95;/*★背景色指定　紺色*/
border:4px ridge #0080ff;/*★枠指定　青色*/
}

#control{position:fixed; top:100px; left:20px;}/*★時計用ボタンの固定位置指定。不要なら削除*/
--></style>
<!--★コピーここまで。bodyにもコピー有り-->

</head>
<body> 

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

<script type="text/javascript"><!--
/*===================================================================
マウスストーカーのリアル時計を消したり付けたり　　　★下記合体。離したり付けたりのスイッチ追加　2016/07/16
ゆっくり後追い移動の参考：http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1196547876（YAHOO!知恵袋）
リアル時計表示  By  http://makemobile.6.tool.ms/121/（Make-Mobile）
====================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var hx=10;         //★表示位置 x座標。マウスと時計の横位置。マイナス値で左側
var hy=30;         //★表示位置 y座標。マウスと時計の縦位置。マイナス値で上側
var spd=40;        //★原本40。マウスと時計の速度。小さいほど速い
var yure=0.3;      // ( 0～1 の小数 ) ★原本0.2。時計の揺らぎ。小さいほど大きな動き

//指定ここまで--------------------------------------------------------------------------
var vis=true;//スイッチ
var newx=0,xp=0,newy=0,yp=0;
document.write("<span id='Mo' style='position:absolute;'></span>");
function tim(){
function f(n){return n<10?"0"+n:n;}
var t=new Date;
document.getElementById("Mo").innerHTML=f(t.getHours())+":"+f(t.getMinutes())+":"+f(t.getSeconds());
}
function H_move(e){newy=e.pageY+hy; newx=e.pageX+hx;}
document.onmousemove=H_move;
function Run(){
var w=window.innerWidth-Mo.offsetWidth-18;
var h=window.pageYOffset+window.innerHeight-Mo.offsetHeight-18;
xp+=Math.floor((newx-xp)*yure); Mo.style.left=Math.min(w,xp)+"px";
yp+=Math.floor((newy-yp)*yure); Mo.style.top=Math.min(h,yp)+"px";
setTimeout(Run,spd); tim();
}
function onoff(){
vis=!vis;
document.getElementById("control").value=vis?"時計Off":"時計On";
document.onmousemove=vis? H_move:null;
}
document.getElementById("control").onclick=onoff;
Run();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

マウスストーカー１５■文字■ リアル時計・離したり付けたり 最終修正日 : 2016/07/16

　マウスストーカー１５■文字■　リアル時計・離したり付けたり　　　　最終修正日 : 2016/07/16