3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

SprocketAdvent Calendar 2019

Day 7

Chrome のコンソールに猫の足跡を並べよう

Last updated at Posted at 2019-12-06

nyan01.png

Chrome のコンソールに猫の足跡を並べたくなったので、並べてみました。

⚠注意点⚠

これは所謂「無限ループ」です。
実行したが最後、 Chrome のタブを閉じない限り実行され続けます。
閉じても問題のないタブのコンソールから実行してください。

スクリプト全体

{
  const nyanFrequency = 11;
  const nyanSize = '36';
  const nyanTime = 500;
  const nyan = '🐈';
  const footstep = '🐾';
  let nyandam;
  let nyanText = nyan;
  const nyanFunc = () => {
    nyandam = Math.round(Math.random() * 100);
    if(nyandam % nyanFrequency === 0){
      nyanText = nyanText + nyan;
    }
    nyanText = nyanText + footstep;
    console.log(`%c${nyanText}`,`font-size: ${nyanSize}px`);
  };

  setInterval(nyanFunc, nyanTime);
};

猫の足跡が増えるタイミングを変えたい

猫の足跡が増えるタイミングを変えたい場合は var nanTime = 500; を変更してください。
ミリ秒単位で変更可能です。

猫が登場する頻度を変えたい

猫が登場する頻度を変えたい場合は const nyanFrequency = 11; を変更してください。
数字は 1 以上の任意の値にして下さい。
数字を増やせば猫が登場する頻度は落ちますし、数字を減らせば猫が登場する頻度が増えます。

猫の大きさを変えたい

猫の大きさを変えたい場合は const nyanSize = '36'; を変更してください。
数字は 1 以上の任意の値にして下さい。
ただし最小フォントサイズは Chrome の設定に依存します。

猫以外も表示したい

こちらの記号をお好みのものに変更してください。

  const nyan = '🐈';
  const footstep = '🐾';

例えばこのように変更すると……

  const nyan = '⛄️';
  const footstep = '';

冬っぽくなります。

snow.png

3
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?