どうもこんにちはクソコードが大好きなAtsu1209です。
今日はクソコード第四弾です。
第一弾
第二弾
第三弾
番外編
このシリーズ結構やってて草
今回やること
第二弾の記事にこんなコメントをいただきました。
パッと見何をやりたいかわかるコードはクソコードではないｗｗｗ
なら挙動もコードもなにもかもが意味不明なものつくろう
ということです。
作る
説明するより見てもらったほうが早い気がするので早速書いちゃいます。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>クソコード</title>
</head>
<body>
<div id="a"></div>
<button id="b">クリックしてはいけない</button>
<script>
var _=document.getElementById.bind(document),$=_('a'),O=0,x=function(_,A){return _+A};function y(){var Z="";for(var W=0;W<10;W++){Z+=W%2==0?"<p>"+x(W,O++)+"</p>":"";}return Z;}!function(){_('b').addEventListener('click',function(){$.innerHTML=y();var A=setInterval(function(){O%5==0?($.style.color='red'):($.style.color='blue');O++;O>50?clearInterval(A):null;},100);});}();
</script>
</body>
</html>
かなりわかりにくくしました。
変数をアルファベット一文字にして、さらに挙動も意味わからない
挙動がわかりやすいようにJSを整形します
index.js
var _ = document.getElementById.bind(document),
$ = _('a'),
O = 0,
x = function(_, A) {
return _ + A
};
function y() {
var Z = "";
for (var W = 0; W < 10; W++) {
Z += W % 2 == 0 ? "<p>" + x(W, O++) + "</p>" : "";
}
return Z;
}! function() {
_('b').addEventListener('click', function() {
$.innerHTML = y();
var A = setInterval(function() {
O % 5 == 0 ? ($.style.color = 'red') : ($.style.color = 'blue');
O++;
O > 50 ? clearInterval(A) : null;
}, 100);
});
}();
これを作ってる時間おれは何をしてたんだろう...
おわり
たまにはクソコードでも書いてリラックスしましょ。
ではまた次の記事で