coinmarketcap完整數據

index.html

@@ -3247,11 +3247,11 @@
         <div class="container-fluid">
             <table id="mytab" class="table">
                 <thead class="llll">
-                    <tr>
+                    <tr class="small">
                         <th scope="col">#</th>
                         <th scope="col">Name</th>
                         <th scope="col">Assets</th>
-                        <th scope="col">Collection Net Worth</th>
+                        <th scope="col">Collection<br>Net Worth</th>
                         <th scope="col">Volume(7d)</th>
                         <th scope="col">Sales(7d)</th>
                         <th scope="col">Volume(All Time)</th>
@@ -3259,46 +3259,9 @@
                         <th scope="col">Last 7 Days</th>
                     </tr>
                 </thead>
-                <tbody id="pc">                  
-                    <!-- <tr>
-                        <th scope="row">1</th>
-                        <td><img src="https://s3.coinmarketcap.com/generated/nft/collections/cryptopunks.png" alt="">CryptoPunks</td>
-                        <td>10000</td>
-                        <td>$364,897,006.99	</td>
-                        <td>$364,897,006.99	</td>
-                        <td>14,022</td>
-                        <td><img class="data-line" src="https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/cryptopunks.png" alt=""></td>
-                    </tr>
-                    <tr>
-                        <th scope="row">2</th>
-                        <td><img src="https://s3.coinmarketcap.com/generated/nft/collections/artblocks.png" alt="">Art Blocks</td>
-                        <td>50,357</td>
-                        <td>$39,478,456.73</td>
-                        <td>$39,478,456.73	</td>
-                        <td>67,921</td>
-                        <td><img class="data-line" src="https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/artblocks.png" alt=""></td>
-                    </tr>
-                    <tr>
-                        <th scope="row">3</th>
-                        <td><img src="https://s3.coinmarketcap.com/generated/nft/collections/sorare.png" alt="">Sorare</td>
-                        <td>310,463</td>
-                        <td>$71,376,688.34	</td>
-                        <td>$71,376,688.34	</td>
-                        <td>389,959	</td>
-                        <td><img class="data-line" src="https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/sorare.png" alt=""></td>
-                    </tr>
-                    <tr>
-                        <th scope="row">4</th>
-                        <td> <img src="https://s3.coinmarketcap.com/generated/nft/collections/thesandbox.png" alt="">The Sandbox</td>
-                        <td>87,420</td>
-                        <td>$29,148,868.09	</td>
-                        <td>$29,148,868.09	</td>
-                        <td>94,561	</td>
-                        <td><img class="data-line" src="https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/thesandbox.png" alt=""></td>
-                    </tr> -->
-                </tbody>
+                <tbody id="pc"></tbody>
             </table>
-            <div class="sec07-table-button">
+            <div class="showdata sec07-table-button">
                 <button class="data-button">完整數據</button>
             </div>
         </div>
@@ -3323,36 +3286,10 @@
                         <th scope="col">Last 7 Days</th>
                     </tr>
                 </thead>
-                <tbody id="mobile">                  
-                    <!-- <tr>
-                        <th scope="row">1</th>
-                        <td><img src="https://s3.coinmarketcap.com/generated/nft/collections/cryptopunks.png" alt="">CryptoPunkse</td>
-                        <td>10000</td>
-                        <td><img class="data-line" src="https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/cryptopunks.png" alt=""></td>
-                    </tr>
-                    <tr>
-                        <th scope="row">2</th>
-                        <td><img src="https://s3.coinmarketcap.com/generated/nft/collections/artblocks.png" alt="">Art Blocks</td>
-                        <td>50,357</td>
-                        <td><img class="data-line" src="https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/artblocks.png" alt=""></td>
-
-                    </tr>
-                    <tr>
-                        <th scope="row">3</th>
-                        <td><img src="https://s3.coinmarketcap.com/generated/nft/collections/sorare.png" alt="">Sorare</td>
-                        <td>310,463	</td>
-                        <td><img class="data-line" src="https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/sorare.png" alt=""></td>
-
-                    </tr>
-                    <tr>
-                        <th scope="row">4</th>
-                        <td> <img src="https://s3.coinmarketcap.com/generated/nft/collections/thesandbox.png" alt="">The Sandbox</td>
-                        <td>87,420	</td>
-                        <td><img class="data-line" src="https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/thesandbox.png" alt=""></td>
-                    </tr> -->
+                <tbody id="mobile">
                 </tbody>
             </table>
-            <div class="sec07-table-button">
+            <div class="showdata" class="sec07-table-button">
                 <button class="data-button">完整數據</button>
             </div>
         </div>
@@ -3391,74 +3328,59 @@
 
 <script>
 $(document).ready(function() {
-    var limit = 10;
-    var mobile_temp = '';
-    var pc_temp = '';
-
-    $.get("https://api.coinmarketcap.com/data-api/v3/nft/collections?start=0&limit=" + limit, function(result) {
-        for(var i=0; i < limit; i++) {
-            var obj = result.data.collections[i];
-            var rank = obj.rank;
-            var slug = obj.slug;
-            var logo = 'https://s3.coinmarketcap.com/generated/nft/collections/' + slug + '.png';
-            var website = obj.website;
-            var name = obj.name;
-            var assets = obj.transferUniqueAssetsAT;
-            var collection_net_worth = obj.netWorth;
-            var volume_7d = obj.volume7d;
-            var sales_7d = obj.sales7d;
-            var volume_all_time = obj.volumeAT;
-            var sales_all_time = obj.salesAT;
-            var last_7_days = 'https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/' + slug +'.png';
-            
-            mobile_temp += ' \
-                <tr> \
-                    <th scope="row">' + rank + '</th> \
-                    <td><img class="img-fluid" src="' + logo + '" alt="' + name + '">' + name + '</td> \
-                    <td>' + assets + '</td> \
-                    <td><img class="data-line" src="' + last_7_days + '" alt="' + name + '"></td> \
-                </tr>';
-            
-            pc_temp += ' \
-                <tr class="small"> \
-                    <th scope="row">' + rank + '</th> \
-                    <td><img src="' + logo + '" alt="' + name + '" style="height:40px;">' + name + '</td> \
-                    <td>' + assets + '</td> \
-                    <td>' + collection_net_worth + '</td> \
-                    <td>' + volume_7d + '</td> \
-                    <td>' + sales_7d + '</td> \
-                    <td>' + volume_all_time + '</td> \
-                    <td>' + sales_all_time + '</td> \
-                    <td><img class="data-line" src="' + last_7_days + '" alt="' + name + '"></td> \
-                </tr>';
-            // $.each(obj, function(key, value) {
-            //     console.log(key + ": " + value);
-            // });
-        }
-
-        $('#mobile').html(mobile_temp);
-        $('#pc').html(pc_temp);
-    });
-    // $.ajax({
-    //     type: 'GET',
-    //     url: 'https://api.coinmarketcap.com/data-api/v3/nft/collections?start=0&limit=130',
-    //     dataType: 'json',
-    //     success: function (result) {
-    //         console.log('data: ' + result.data);
-    //         //console.log('data: ' + data);
-    //     },
-    //     beforeSend: function () {
-    //         console.log('beforeSend');
-    //     },
-    //     complete: function () {
-    //         console.log('complete');
-    //     },
-    //     error: function (jqXHR, textStatus, errorThrown) {
-    //         console.log(JSON.stringify(jqXHR));
-    //         console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
-    //         console.log('送出失敗: ' + jqXHR.responseText);
-    //     }
-    // });
+    function get_data(limit=5) {
+        var mobile_temp = '';
+        var pc_temp = '';
+
+        $.get("https://api.coinmarketcap.com/data-api/v3/nft/collections?start=0&limit=" + limit, function(result) {
+            for(var i=0; i < limit; i++) {
+                var obj = result.data.collections[i];
+                var rank = obj.rank;
+                var slug = obj.slug;
+                var logo = 'https://s3.coinmarketcap.com/generated/nft/collections/' + slug + '.png';
+                var website = obj.website;
+                var name = obj.name;
+                var assets = obj.transferUniqueAssetsAT;
+                var collection_net_worth = obj.netWorth;
+                var volume_7d = obj.volume7d;
+                var sales_7d = obj.sales7d;
+                var volume_all_time = obj.volumeAT;
+                var sales_all_time = obj.salesAT;
+                var last_7_days = 'https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/' + slug +'.png';
+                
+                mobile_temp += ' \
+                    <tr> \
+                        <th scope="row">' + rank + '</th> \
+                        <td><a href="' + website + '" target="_blank" style="text-decoration: none;color:black;"><img class="me-2 img-fluid" src="' + logo + '" alt="' + name + '">' + name + '</a></td> \
+                        <td>' + assets + '</td> \
+                        <td><img class="data-line" src="' + last_7_days + '" alt="' + name + '"></td> \
+                    </tr>';
+                
+                pc_temp += ' \
+                    <tr class="small"> \
+                        <th scope="row">' + rank + '</th> \
+                        <td><a href="' + website + '" target="_blank" style="text-decoration: none;color:black;"><img class="me-2" src="' + logo + '" alt="' + name + '" style="height:40px;width:auto;">' + name + '</a></td> \
+                        <td>' + assets + '</td> \
+                        <td>' + collection_net_worth + '</td> \
+                        <td>' + volume_7d + '</td> \
+                        <td>' + sales_7d + '</td> \
+                        <td>' + volume_all_time + '</td> \
+                        <td>' + sales_all_time + '</td> \
+                        <td><img class="data-line" src="' + last_7_days + '" alt="' + name + '"></td> \
+                    </tr>';
+            }
+
+            $('#mobile').html(mobile_temp);
+            $('#pc').html(pc_temp);
+        });
+    }
+
+    get_data();
+        
+	// 完整數據
+    $('.showdata').click(function() {
+		get_data(100);
+	});
 });
 </script>
 </body>