Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

意味不明なものを作ろう会Advent Calendar 2024

Day 9
@RS0823inStedTechOrganization

意味が不明電卓②

Posted at

全体のコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超カラフルアプリ</title>
    <style>
        /* CSSスタイル */
        body {
            background-color: #ffcccb;
            text-align: center;
            font-family: 'Comic Sans MS', sans-serif;
            color: #fff;
        }

        h1 {
            font-size: 3em;
            color: #000;
            text-shadow: 2px 2px #ff0;
        }

        button {
            font-size: 1.5em;
            padding: 10px 20px;
            background-color: #00f;
            color: #fff;
            border: 2px solid #ff0;
            border-radius: 10px;
            box-shadow: 5px 5px #0ff;
            cursor: pointer;
            animation: spin 2s infinite linear;
            margin: 5px;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        p {
            font-size: 2em;
            background-color: #0ff;
            padding: 20px;
            border: 5px dotted #000;
            transition: background-color 0.5s, color 0.5s, font-size 0.5s;
        }

        p:hover {
            background-color: #ff0;
            color: #00f;
            font-size: 2.5em;
        }
    </style>
</head>
<body>
    <h1>めちゃくちゃカラフルで不思議なアプリ</h1>
    <button id="colorButton1">色を変える 1</button>
    <button id="colorButton2">色を変える 2</button>
    <button id="colorButton3">色を変える 3</button>
    <p id="colorText1">テキスト 1</p>
    <p id="colorText2">テキスト 2</p>
    <p id="colorText3">テキスト 3</p>
    <p id="randomText">ここにランダムなテキストが表示されます</p>

    <script>
        // JavaScriptのコード
        document.getElementById('colorButton1').addEventListener('click', function() {
            changeColor('colorText1');
        });

        document.getElementById('colorButton2').addEventListener('click', function() {
            changeColor('colorText2');
        });

        document.getElementById('colorButton3').addEventListener('click', function() {
            changeColor('colorText3');
        });

        function getRandomColor() {
            return '#' + Math.floor(Math.random() * 16777215).toString(16);
        }

        function changeColor(elementId) {
            var randomColor = getRandomColor();
            document.getElementById(elementId).style.backgroundColor = randomColor;
            document.getElementById(elementId).style.color = getRandomColor();
            document.getElementById(elementId).style.borderColor = getRandomColor();
            document.getElementById(elementId).innerText = getRandomColor();
        }

        setInterval(function() {
            document.getElementById('randomText').innerText = Math.random().toString(36).substring(2, 15);
        }, 1000);

        if (Math.random() < 0.2) { // 20%の確率でエラーメッセージを表示
            document.body.innerHTML = '<h1>エラー: Something went terribly wrong!</h1>';
        }
    </script>
</body>
</html>

全体のコードの説明

1. HTML構造 (<body>部分)

<h1>めちゃくちゃカラフルで不思議なアプリm(__)m</h1>
<button id="colorButton1">色を変える 1</button>
<button id="colorButton2">色を変える 2</button>
<button id="colorButton3">色を変える 3</button>
<p id="colorText1">テキスト 1</p>
<p id="colorText2">テキスト 2</p>
<p id="colorText3">テキスト 3</p>
<p id="randomText">ここにランダムなテキストが表示されます</p>
  • <h1>タグ: アプリケーションのタイトル「めちゃくちゃカラフルで不思議なアプリ」が表示されます。
  • <button>タグ: 3つのボタンがあり、それぞれが異なるテキスト（colorText1, colorText2, colorText3）の色や背景色を変更するために使われます。
  • <p>タグ: それぞれの<p>要素（colorText1, colorText2, colorText3）は、クリックで色が変わるテキストを表示します。また、randomTextという<p>はランダムな文字列が表示される場所です。

2. CSSスタイル

body {
    background-color: #ffcccb;
    text-align: center;
    font-family: 'Comic Sans MS', sans-serif;
    color: #fff;
}

h1 {
    font-size: 3em;
    color: #000;
    text-shadow: 2px 2px #ff0;
}

button {
    font-size: 1.5em;
    padding: 10px 20px;
    background-color: #00f;
    color: #fff;
    border: 2px solid #ff0;
    border-radius: 10px;
    box-shadow: 5px 5px #0ff;
    cursor: pointer;
    animation: spin 2s infinite linear;
    margin: 5px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

p {
    font-size: 2em;
    background-color: #0ff;
    padding: 20px;
    border: 5px dotted #000;
    transition: background-color 0.5s, color 0.5s, font-size 0.5s;
}

p:hover {
    background-color: #ff0;
    color: #00f;
    font-size: 2.5em;
}

  • body: 背景色は淡いピンク色（#ffcccb）で、全体のテキストは白（#fff）に設定されています。また、テキストは中央揃えで、フォントは「Comic Sans MS」を使用しています。

  • h1: アプリケーションのタイトルが大きな文字で表示されます。黒色の文字に黄色の影を付けて、目立つようにしています。

  • button: ボタンは大きなフォントサイズ（1.5em）で、青色の背景に黄色の境界線、そしてシアン色（#0ff）のボックスシャドウを使用しています。さらに、ボタンは2秒ごとに回転するアニメーション（@keyframes spin）を適用しています。

  • p: p要素には、シアン色の背景と黒い点線の境界線が設定されています。また、transitionプロパティを使って、ホバー時に色やフォントサイズが滑らかに変化するようになっています。

  • p:hover: p要素にカーソルを合わせると、背景色が黄色、文字色が青色に変わり、フォントサイズも少し大きくなります。

3. JavaScriptの動作

ボタンのクリックイベントと色変更

document.getElementById('colorButton1').addEventListener('click', function() {
    changeColor('colorText1');
});

document.getElementById('colorButton2').addEventListener('click', function() {
    changeColor('colorText2');
});

document.getElementById('colorButton3').addEventListener('click', function() {
    changeColor('colorText3');
});
  • 各ボタン（colorButton1, colorButton2, colorButton3）がクリックされると、changeColor関数が呼び出され、それぞれ対応する<p>要素（colorText1, colorText2, colorText3）の色と背景色がランダムに変更されます。

ランダムな色を生成する関数

function getRandomColor() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
}
  • getRandomColor関数は、16進数のカラーコードをランダムに生成します。Math.random()を使って0から16777215（#ffffffに対応する最大値）までの整数を取得し、その整数を16進数に変換しています。

色を変更する関数

function changeColor(elementId) {
    var randomColor = getRandomColor();
    document.getElementById(elementId).style.backgroundColor = randomColor;
    document.getElementById(elementId).style.color = getRandomColor();
    document.getElementById(elementId).style.borderColor = getRandomColor();
    document.getElementById(elementId).innerText = getRandomColor();
}
  • changeColor関数は、指定されたelementIdの<p>要素に対して、背景色、文字色、境界線の色をランダムに変更します。そして、innerTextをランダムなカラーコードで更新します。

ランダムな文字列を表示

setInterval(function() {
    document.getElementById('randomText').innerText = Math.random().toString(36).substring(2, 15);
}, 1000);
  • このコードは1秒ごとにrandomTextのテキストをランダムな文字列に更新します。Math.random().toString(36)はランダムな数値を36進数（英数字）に変換して、substring(2, 15)でランダムな部分文字列を取り出します。

20%の確率でエラーメッセージを表示

if (Math.random() < 0.2) { // 20%の確率でエラーメッセージを表示
    document.body.innerHTML = '<h1>エラー: Something went terribly wrong!</h1>';
}
  • Math.random() < 0.2で20%の確率を生成し、ランダムな確率が20%未満の場合にエラーメッセージ（エラー: Something went terribly wrong!）を表示します。この場合、ページ全体がエラーメッセージに置き換わります。

まとめ

このHTMLファイルは、ユーザーがボタンをクリックするとテキストの色や背景色がランダムに変わり、1秒ごとにランダムな文字列を表示するアプリです。また、20%の確率でエラーメッセージを表示する機能も組み込まれています。意味不明だろm(__)m

今回は意味不明系でしたm(__)m

1
0
2

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
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?