Last active
May 27, 2018 13:29
-
-
Save temmings/0f1a6a9eed6e60921f74b115f3c41563 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="ja"> | |
<head> | |
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"> | |
<meta http-equiv="Content-Script-Type" content="text/javascript"> | |
<meta http-equiv="Content-Style-Type" content="text/css"> | |
<title>文字マウスストーカー</title> | |
<style type="text/css"> | |
#myText { | |
font-style: italic; | |
font-weight: bold; | |
font-family: 'comic sans ms', verdana, arial; | |
color: gold; | |
position: absolute; | |
top: 0; left: 0; | |
z-index: 3000; | |
cursor: default; | |
} | |
#myText div { position: relative; } | |
#myText div div { position: absolute;top: 0;left: 0;text-align: center; } | |
</style> | |
<script type="text/javascript"> | |
<!-- | |
if (!(window.addEventListener || window.attachEvent) || !document.createElement) | |
throw 'error'; | |
var msg = ""; | |
var tMsg = ' '; | |
var size = 24; | |
var circleY = 0.75, circleX = 2; | |
var letter_spacing = 5; | |
var diameter = 10; | |
var rotation = 0.4; | |
var speed = 0.3; | |
var m = new Array("1月", "2月", "3月", "4月", "5月", "6月", | |
"7月", "8月", "9月", "10月", "11月", "12月"); | |
var w = new Array("㊐", "㊊", "㊋", "㊌", "㊍", "㊎", "㊏"); | |
var Eto = new Array("子", "丑", "寅", "卯", "辰", "巳", | |
"午", "未", "申", "酉", "戌", "亥"); | |
var date = new Date(); | |
var n = msg.length - 1, | |
a = Math.round(size * diameter * 0.208333), | |
currStep = 20, | |
ymouse = a * circleY + 20, | |
xmouse = a * circleX + 20, | |
y = [], x = [], Y = [], X = [], | |
o = document.createElement('div'), | |
oi = document.createElement('div'), | |
b = (document.compatMode && document.compatMode != "BackCompat") | |
? document.documentElement | |
: document.body, | |
mouse = function(e) { | |
e = e || window.event; | |
ymouse = !isNaN(e.pageY) ? e.pageY : e.clientY; // y-position | |
xmouse = !isNaN(e.pageX) ? e.pageX : e.clientX; // x-position | |
}, | |
makecircle = function() { // rotation/positioning | |
if (init.nopy) { | |
o.style.top = (b || document.body).scrollTop + 'px'; | |
o.style.left = (b || document.body).scrollLeft + 'px'; | |
} | |
currStep -= rotation; | |
for (var d, i = n; i > -1; --i) { // makes the circle | |
d = document.getElementById('iemsg' + i).style; | |
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px'; | |
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px'; | |
} | |
}; | |
function digi(){ | |
var t = tMsg; | |
var Wareki = date.getFullYear(), | |
month = m[date.getMonth()], | |
day = date.getDate(), | |
week = w[date.getDay()], | |
Hour = date.getHours(), | |
Min = date.getMinutes(), | |
Sec = date.getSeconds(); | |
if (Hour <= 9) Hour = "0" + Hour; | |
if (Min <= 9) Min = "0" + Min; | |
if (Sec <= 9) Sec = "0" + Sec; | |
var EtoNum = (Wareki + 8) % 12; | |
t = Eto[EtoNum] + "◆" + " " + month + day + "日" + " " | |
+ week + " " + "★" + "★" + " " | |
+ date.toLocaleDateString("ja-JP-u-ca-japanese", { | |
era: "long", year: "numeric" } | |
).replace(/\u200e/g, "") | |
.replace(" ", "") | |
.replace(/(^|[^\d])1(?=$|[^\d])/, '$1元') | |
+ " " + "◆" + Hour + ":" + Min + ":" + Sec; | |
if (t != tMsg) { | |
var currentLength = msg.length; | |
// 状態の変更 | |
tMsg = t; | |
msg = t.split(''); | |
n = msg.length - 1; | |
// 文字要素の変更 | |
for (var i = Math.max(currentLength, msg.length) - 1; i > -1; --i) { | |
var d = i < currentLength && document.getElementById('iemsg' + i); | |
if (d) { | |
if (i < t.length) { | |
// 既存要素の内容変更 | |
d.innerHTML = msg[i]; | |
} else { | |
// 不要になった要素の削除 | |
d.parentElement.removeChild(d); | |
} | |
} else { | |
// 不足要素の追加 | |
d = document.createElement('div'); | |
d.id = 'iemsg' + i; | |
d.style.height = d.style.width = a + 'px'; | |
d.appendChild(document.createTextNode(msg[i])); | |
oi.appendChild(d); | |
y[i] = x[i] = Y[i] = X[i] = 0; | |
} | |
} | |
} | |
} | |
function drag() { | |
y[0] = Y[0] += (ymouse - Y[0]) * speed; | |
x[0] = X[0] += (xmouse - 20 - X[0]) * speed; | |
for (var i = n; i > 0; --i) { | |
y[i] = Y[i] += (y[i-1] - Y[i]) * speed; | |
x[i] = X[i] += (x[i-1] - X[i]) * speed; | |
}; | |
makecircle(); | |
digi(); | |
} | |
function ascroll() { | |
ymouse += window.pageYOffset; | |
xmouse += window.pageXOffset; | |
window.removeEventListener('scroll', ascroll, false); | |
} | |
function init() { | |
if (!isNaN(window.pageYOffset)) { | |
ymouse += window.pageYOffset; | |
xmouse += window.pageXOffset; | |
} else { | |
init.nopy = true; | |
} | |
for (var d, i = n; i > -1; --i) { | |
d = document.createElement('div'); | |
d.id = 'iemsg' + i; | |
d.style.height = d.style.width = a + 'px'; | |
d.appendChild(document.createTextNode(msg[i])); | |
oi.appendChild(d); | |
y[i] = x[i] = Y[i] = X[i] = 0; | |
} | |
o.id = 'myText'; | |
o.style.fontSize = size + 'px'; | |
o.appendChild(oi); | |
document.body.appendChild(o); | |
setInterval(drag, 25); | |
} | |
if (window.addEventListener) { | |
window.addEventListener('load', init, false); | |
document.addEventListener('mouseover', mouse, false); | |
document.addEventListener('mousemove', mouse, false); | |
if (/Apple/.test(navigator.vendor)) | |
window.addEventListener('scroll', ascroll, false); | |
} else if (window.attachEvent) { | |
window.attachEvent('onload', init); | |
document.attachEvent('onmousemove', mouse); | |
} | |
// --> | |
</script> | |
<script type="text/javascript"> | |
<!-- | |
// for debug | |
{ | |
date = new Date(2018, 11, 31, 23, 59, 50); | |
setInterval(function(d) { | |
return function() { | |
d.setSeconds(d.getSeconds() + 1); | |
} | |
}(date), 1000); | |
} | |
// --> | |
</script> | |
</head> | |
<body bgcolor="black"> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment