chilinglee.github.io/pokemon_full.html at main · chilinglee/chilinglee.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Pokemon!!!GO!!!</title>
</head>

<body>
    <div class="jumbotron">
        <h1 class="display-4"></h1>
    </div>
    <div class="buttonArea text-center my-4">
        <button class="btn btn-primary mx-2" id="loadAll">Load All</button>
        <button class="btn btn-warning mx-2" id="plus1">Pokemon + 1</button>
        <button class="btn btn-warning mx-2" id="minus1">Pokemon - 1</button>
        <button class="btn btn-success mx-2" id="timer">Timer</button>
        <button class="btn btn-success mx-2" id="stopper">Stop Timer</button>
        <button class="btn btn-danger" onclick='reset()'>reset</button>
    </div>
    <div id='container' class="d-flex justify-content-center flex-wrap"></div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
        crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

    <script>

        //onload
        onload = setPokemon(); //onload 就是window.onload， window可以省略
        function setPokemon() {
            let h1 = document.getElementsByTagName('h1')[0];
            h1.innerText = "Pokemon圖鑒列表";
            h1.setAttribute("class", "text-center my-3")
        }
        const container = document.querySelector("div#container");

        //load all
        let loadAll = document.getElementById('loadAll');
        loadAll.onclick = function () {
            //清除所有内容
            while (container.lastChild) {
                container.removeChild(container.lastChild);
            };
            //加上所有圖片
            for (let i = 1; i < 899; i++) {
                let img_index = i.toString().padStart(3, '0');
                let path = `https://assets.pokemon.com/assets/cms2/img/pokedex/detail/${img_index}.png`;
                let img = document.createElement('img');
                img.setAttribute('src', path);
                img.addEventListener("click", function (event) {
                    container.removeChild(event.target);
                });
                container.appendChild(img);
            }
        }

        //+1
        let plus1 = getById("plus1");
        let counter = 1;
        plus1.addEventListener('click', function () {
            let img_index = counter.toString().padStart(3, '0');
            let path = `https://assets.pokemon.com/assets/cms2/img/pokedex/detail/${img_index}.png`;
            let img = document.createElement('img');
            img.setAttribute('src', path);
            counter++;
            container.appendChild(img);
        });

        //-1
        let minus1 = getById("minus1")
        minus1.addEventListener("click", function () {
            if (container.lastElementChild) {
                container.removeChild(container.lastElementChild);
            }
        });

        //Timer
        let timer = getById("timer");
        let IntervalId = 0;
        timer.addEventListener("click", function () {
            //清除所有内容
            while (container.lastChild) {
                container.removeChild(container.lastChild);
            };
            let timer_count = 1;
            IntervalId = setInterval(function () {
                let img_index = timer_count.toString().padStart(3, '0');
                let path = `https://assets.pokemon.com/assets/cms2/img/pokedex/detail/${img_index}.png`;
                let img = document.createElement('img');
                img.setAttribute('src', path);
                img.addEventListener("click", function (event) {
                    container.removeChild(event.target);
                });
                container.appendChild(img);
                timer_count++;
            }, 1000);
        });

        //StopTimer
        let stopper = getById("stopper");
        stopper.addEventListener("click", function () {
            clearInterval(IntervalId);
            timer_count = 0;
        });

        //reset
        function reset() {
            container.innerHTML = '';
            index = 0;
        }

        //get
        function getById(target) {
            return document.getElementById(target);
        };
    </script>
</body>

</html>