chilinglee.github.io/pokemon.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
132
133
134
135
136
137
138
139
140
141
142
<!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>
    <button class="btn btn-warning mb-2" onclick='fetchPokemon()'>載入寶可夢圖鑑列表_侵入式</button><br>
    <button class="btn btn-success mb-2" onclick='fetchPokemon_appendChild()'>載入寶可夢圖鑑列表all_侵入式</button><br>
    <button class="btn btn-dark mb-2" id="btn1">載入寶可夢圖鑑列表all_註冊方式二</button><br>
    <button class="btn btn-primary mb-2" id="btn2">載入寶可夢圖鑑列表all_註冊方式三</button><br>
    <button class="btn btn-danger" onclick='reset()'>reset</button>
    <div id='container'></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 = setPokemon(); //onload 就是window.onload， window可以省略
        function setPokemon() {
            let h1 = document.getElementsByTagName('h1')[0];
            h1.innerText = "Pokemon圖鑒列表"
        }

        const container = document.querySelector("div#container");
        // let fileName = "002";
        // let pathFile = `https://assets.pokemon.com/assets/cms2/img/pokedex/detail/${fileName}.png`;
        // let Pokeimg = `<img scr = "${pathFile}" style = "width:100px; height:100px;">`;
        // container.innerHTML = Pokeimg;

        function appendPokemon() {
            while (container.lastChild) {
                container.removeChild(container.lastChild)
            }
            let img = document.createElement("img");
            img.setAttribute("src", "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/001.png");
            container.appendChild(img);
        }
        appendPokemon();


        function fetchPokemon() {
            let pokemons = "";
            for (let i = 1; i < 899; i++) {
                let fileName = i.toString().padStart(3, '0');
                let poke = `https://assets.pokemon.com/assets/cms2/img/pokedex/detail/${fileName}.png`;
                let pokemonImg = `<img src = '${poke}'>`;

                pokemons += pokemonImg;
            }
            container.innerHTML = pokemons;
        }
        // function fetchPokemon_appendChild(){
        //     try{
        //         let disappear = container.childNodes;
        //         for (let j = 0; j < disappear.length; j++){
        //             container.removeChild(disappear[j]);
        //         }
        //     }
        //     finally{
        //         for(let i = 1; i < 899; i++){
        //         let fileName = i.toString().padStart(3,'0');
        //         let poke = `https://assets.pokemon.com/assets/cms2/img/pokedex/detail/${fileName}.png`;

        //         let img = document.createElement('img');
        //         img.setAttribute('src', poke);

        //         container.appendChild(img);
        //         }
        //     }

        // }
        function fetchPokemon_appendChild() {

            while (container.lastChild) {
                container.removeChild(container.lastChild)
            }
            for (let i = 1; i < 899; i++) {
                let fileName = i.toString().padStart(3, '0');
                let poke = `https://assets.pokemon.com/assets/cms2/img/pokedex/detail/${fileName}.png`;

                let img = document.createElement('img');
                img.setAttribute('src', poke);

                container.appendChild(img);
            }
        }

        let btn1 = document.getElementById('btn1');
        btn1.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)
                container.appendChild(img);
            }
        }

        let btn2 = document.getElementById('btn2');
        btn2.addEventListener('click', 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)
                container.appendChild(img);
            }
        });
        function reset() {
            container.innerHTML = '';
        }

    </script>
</body>

</html>