如何製作自己的加密貨幣儀表盤
隨著所有關於分叉、詐騙、網站竊取你的CPU來開採altcoins以及瘋狂的價格波動的討論，加密貨幣（cryptocurrences，簡稱“crypto”）無疑正變得越來越主流。
如果您已經投資或正在考慮購買任何加密貨幣，那麼您需要一種實時監控其價格的方法。幸運的是，您只需使用HTML和CSS就可以輕鬆地構建一個加密儀表板。
注：購買加密貨幣是一種高度投機性的投資。永遠不要投資超過你能承受的，準備一夜之間失去它。
入門
此儀表板由提供的免費小部件提供支持coinmarketcap.com. 這個優秀的網站顯示了數千種加密貨幣的統計數據和當前價格。首先選擇您選擇的貨幣，或者在右上角的搜索工具中輸入一枚硬幣。
一旦被選中，你將被帶到硬幣概述頁面，在那裡各種統計數據，圖表和分析顯示有關你選擇的硬幣。轉到“工具”選項卡。在這裡，您將看到一個現成的小部件，顯示有關所選硬幣的特定數據。您可以隨意嘗試使用Customizethiswidget設置，但就目前而言，基本的小部件已經足夠了。從網站小部件框中複製代碼或保持頁面打開以供以後使用。
以下是比特幣的小部件代碼：
<script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/currency.js"></script><div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD" ></div>無論你是喜歡比特幣、以太坊、Ripple、Dogecoin，還是其他1000多種可選（alt）硬幣，這個過程都是完全一樣的：找到一個硬幣，然後複製小部件代碼。
如果您想喜歡自動化，可以使用API Ticker和Cron之類的調度工具來執行幾乎任何您喜歡的操作。這有點超出了本文的範圍，但您可以創建一個電子郵件警報，如果價格下降到某個閾值以下，例如。
建立網頁
現在您已經有了小部件，您需要創建一個基本的HTML頁面來顯示它。使用您最喜歡的文本編輯器，創建一個名為儀表板.html.
以下是您需要的啟動代碼：
<!doctype html><html> <head> <title>Crypto Dashboard</title> </head> <body> </body></html>在body標籤之間粘貼HTML小部件代碼。回到比特幣，整個代碼是這樣的：
<!doctype html><html> <head> <title>Crypto Dashboard</title> </head> <body> <script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/currency.js"></script> <div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD" ></div> </body></html>
就這些。創建自己的加密貨幣儀表板就這麼簡單。
讓它變得漂亮
雖然這個儀表盤在技術上已經完成了，但它不是很好。小部件水平地填充屏幕，但是垂直地不是很高。讓我們用層疊樣式表（CSS）來設置樣式。
在標題下方，添加樣式標記：
<style></style>在這些樣式標籤中，您可以編寫CSS。以下是您需要的：
.coinmarketcap-currency-widget { width: 33%; margin: 100px auto;}
這個簡單的CSS做了兩件事。使用文檔對象模型（DOM），它以coinmarketcap貨幣小部件類為目標。此類是小部件的主容器，因此此命令指示web瀏覽器將以下樣式應用於該特定元素。
小部件的寬度被設置為33%，這確保了它在保留默認選項（在本例中為100%）時看起來不再被拉伸。
最後，在頂部和底部添加一個100像素的邊距，左側和右側獲得自動邊距。這會將小部件從瀏覽器頂部移開，並使其水平居中。
幾乎沒有限制，你可以走多遠與你的風格這個小部件。也許你喜歡紅色文字或藍色背景？閃爍文字怎麼樣？天空真的是極限！
添加更多硬幣
既然你已經掌握了基礎知識，是時候添加更多的硬幣了。即使你只擁有一枚硬幣，多樣化你的儀表盤也有幾個好處。
作為一個寬鬆的規則（儘管任何事情都可能發生在加密貨幣的荒野西部），比特幣下跌時，alt幣會上漲，除了比特幣絕對下跌時，它會帶走其他一切。
通過監控其他貨幣，你通常可以清楚地看到，資金是從一種貨幣流出，然後流入另一種貨幣。如果你想買一枚新硬幣，把它加到你的儀表板上就意味著你可能發現一個趨勢或者一個每日低點來買一個便宜貨！
使用上面的步驟，繼續並獲取您想要跟蹤的任何其他貨幣的小部件代碼。只需將它們粘貼在比特幣跟蹤器下方，如下所示：
<script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/currency.js"></script><div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD" data-secondary="BTC"></div><div class="coinmarketcap-currency-widget" data-currency="ethereum" data-base="USD" data-secondary="BTC"></div><div class="coinmarketcap-currency-widget" data-currency="ripple" data-base="USD" data-secondary="BTC"></div><div class="coinmarketcap-currency-widget" data-currency="cardano" data-base="USD" data-secondary="BTC"></div>
你不需要貨幣.js對於每個小部件。你每頁只需要一次。
如果你重新加載你的儀表板，你會發現它看起來不太好。所有的硬幣都是垂直堆放的，它們之間有巨大的縫隙！您需要修改CSS，使這些小部件對於多個硬幣看起來更好。
通過調整每個小部件容器的寬度和邊距，可以水平排列多個小部件，如下所示：
width: 23%;margin: 10px 1%;float: left;
使用同樣的CSS，您可以堆疊任意多的小部件，儘管您可能需要在大約12個小部件之後稍微修改它。
最後一個點睛之筆是使儀表板自動重新加載，確保您始終擁有最新的價格。
在文檔頂部的頭標籤內，粘貼此元標籤：
<meta http-equiv="refresh" content="60">這將每X秒刷新一次頁面，其中X在內容中指定。上面的代碼將每60秒刷新一次頁面。把這個改成你喜歡的，只要你在幾秒鐘內輸入數字。
保持理智
現在您的加密貨幣儀表板已完成，您不再需要檢查coinmarketcap.com，或coinbase.com網站，或任何你用來監控你購買的網站。別每分鐘都檢查價格，把自己逼瘋了。
讓它在你的電腦上運行，或者甚至把它設置在樹莓皮上，讓它在你的走廊裡運行！
如果您想查看移動中的價格，請查看我們的最佳加密貨幣Android應用指南，在購買加密貨幣之前，不要忘記閱讀我們的指南，瞭解您需要了解的所有信息。
你建了密碼儀表板嗎？你把你的放哪兒了？請在下面的評論中告訴我們！
- 發表於 2021-03-12 02:21
- 閱讀 ( 55 )
- 分類：程式設計
你可能感興趣的文章
儀表板(dashboard)和記分卡(scorecard)的區別
儀表板(dashboard)和記分卡(scorecard)的區別 dashboard和scoreboard之間的關鍵區別在於dashboard是一種資料視覺化工具，它在單個螢幕上整合和顯示企業的各種財務指標，包括指標和數字，而記分卡是一種績效管理工具，用於將戰略目...
3個excel儀表板提示您必須嘗試
... 如何在excel中建立儀表板 ...
你也可以用piktochart模板製作很酷的資訊圖形
不管你是否喜歡視覺效果，資訊圖表都很熱門。對於商業文件、教育資料甚至簡歷來說，它們不僅**有趣，而且顯示資料也很有吸引力。 ...
amazon freetime接收父儀表板更新
...這個非常流行的立方體世界，那就太好了。當你試圖解釋如何幹掉安德龍的時候，我已經看到了你的眼睛在轉動和微笑（那是一個老闆，僅供參考……）。 ...
5個奇怪但有用的樹莓皮相機專案
...用者之一Noe Ruiz發明了一款可穿戴Pi-Zero攝像頭，並展示瞭如何**。 ...
最快最好的microsd卡
... 如何選擇microsd卡？ ...
實際使用的9個mac儀表板小部件
...得更好。它可以幫助您查詢和**特殊字元，如重音符號和貨幣符號。 ...
7個有用的儀表盤提示，幫助您充分發揮其潛力
...事故的錄影——即使你忘記儲存。事件通常儲存到SD卡上自己的目錄中，以便稍後檢索。 ...
instagram現在可以追蹤你在instagram上浪費了多少時間
... 如何使用instagram的新活動儀表板 ...
如何用這10個diy專案為你的舊車新增智慧功能
... 本影片向您展示瞭如何使用Raspberry Pi和Arch Linux構建自己的雙攝像頭儀表盤，儘管還有其他Raspberry Pi作業系統可用。 ...
0 篇文章
