如何制作自己的加密货币仪表盘

如果你已经投资加密货币,你可以很容易地建立自己的加密仪表板只使用HTML和CSS。...

随着所有关于分叉、诈骗、网站窃取你的CPU来开采altcoins以及疯狂的价格波动的讨论,加密货币(cryptocurrences,简称“crypto”)无疑正变得越来越主流。

cryptocurrency-dashboard

如果您已经投资或正在考虑购买任何加密货币,那么您需要一种实时监控其价格的方法。幸运的是,您只需使用HTML和CSS就可以轻松地构建一个加密仪表板。

注:购买加密货币是一种高度投机性的投资。永远不要投资超过你能承受的,准备一夜之间失去它。

入门

此仪表板由提供的免费小部件提供支持coinmarketcap.com. 这个优秀的网站显示了数千种加密货币的统计数据和当前价格。首先选择您选择的货币,或者在右上角的搜索工具中输入一枚硬币。

crypto dashboard on CoinMarketCap

一旦被选中,你将被带到硬币概述页面,在那里各种统计数据,图表和分析显示有关你选择的硬币。转到“工具”选项卡。在这里,您将看到一个现成的小部件,显示有关所选硬币的特定数据。您可以随意尝试使用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>
crypto dashboard widget

就这些。创建自己的加密货币仪表板就这么简单。

让它变得漂亮

虽然这个仪表盘在技术上已经完成了,但它不是很好。小部件水平地填充屏幕,但是垂直地不是很高。让我们用层叠样式表(CSS)来设置样式。

在标题下方,添加样式标记:

<style>
</style>

在这些样式标签中,您可以编写CSS。以下是您需要的:

.coinmarketcap-currency-widget {
width: 33%;
margin: 100px auto;
}
crypto dashboard widget with CSS

这个简单的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>
crypto dashboard add more coins

你不需要货币.js对于每个小部件。你每页只需要一次。

如果你重新加载你的仪表板,你会发现它看起来不太好。所有的硬币都是垂直堆放的,它们之间有巨大的缝隙!您需要修改CSS,使这些小部件对于多个硬币看起来更好。

通过调整每个小部件容器的宽度和边距,可以水平排列多个小部件,如下所示:

width: 23%;
margin: 10px 1%;
float: left;
crypto dashboard widget horizontal

使用同样的CSS,您可以堆叠任意多的小部件,尽管您可能需要在大约12个小部件之后稍微修改它。

crypto dashboard widget stacked

最后一个点睛之笔是使仪表板自动重新加载,确保您始终拥有最新的价格。

在文档顶部的头标签内,粘贴此元标签:

<meta http-equiv="refresh" content="60">

这将每X秒刷新一次页面,其中X在内容中指定。上面的代码将每60秒刷新一次页面。把这个改成你喜欢的,只要你在几秒钟内输入数字。

保持理智

现在您的加密货币仪表板已完成,您不再需要检查coinmarketcap.com,或coinbase.com网站,或任何你用来监控你购买的网站。别每分钟都检查价格,把自己逼疯了。

让它在你的电脑上运行,或者甚至把它设置在树莓皮上,让它在你的走廊里运行!

如果您想查看移动中的价格,请查看我们的最佳加密货币Android应用指南,在购买加密货币之前,不要忘记阅读我们的指南,了解您需要了解的所有信息。

你建了密码仪表板吗?你把你的放哪儿了?请在下面的评论中告诉我们!

  • 发表于 2021-03-12 02:21
  • 阅读 ( 339 )
  • 分类:编程

你可能感兴趣的文章

为什么你的加密币没有你想象的那么安全

...者使用恶意软件窃取加密货币钱包的内容,他们就会知道如何掩盖自己的数字踪迹。 ...

  • 发布于 2021-03-14 03:01
  • 阅读 ( 212 )

恶意软件对犯罪组织的利润有多大?

...当代的恶意软件时代,尤其是恶意软件的雇用计划,管理仪表盘并不完全罕见。 ...

  • 发布于 2021-03-27 04:28
  • 阅读 ( 230 )

什么是加密劫持,你如何保护自己?

...挖掘脚本。它的挖掘速度会慢一些,但网站可以做到。 如何保护自己免受浏览器中的加密窃取 我们建议运行安全软件,自动阻止加密货币矿工在您的浏览器。例如,Malwarebytes会自动阻止CoinHive和其他加密货币挖掘脚本,从而阻...

  • 发布于 2021-04-05 06:23
  • 阅读 ( 216 )

如何轻松购买比特币

...议你购买比特币。但是,如果你有你的心定下来,这里有如何做到不容易上当受骗。 警告:负责任 相关报道:比特币不是一种货币,它是一种(不安全的)投资 在我们看来,在比特币(又称BTC)上投机与赌博基本上是一回事...

  • 发布于 2021-04-06 14:13
  • 阅读 ( 176 )

如何在web浏览器中阻止加密货币矿工

...脑,并减少电池寿命。 相关报道:什么是比特币,它是如何工作的? 这个问题首先在CoinHive脚本中引起了广泛的关注,它在您访问海盗湾时运行,但是还有其他挖掘脚本和其他网站在使用它们。事实上,研究人员甚至发现了一...

  • 发布于 2021-04-07 01:11
  • 阅读 ( 158 )

如何创建自己的加密货币

...加货币价值或承诺,但这将帮助您了解技术方面以及代币如何工作。ICO可能不适合临时观察员,因为越来越多的监管和对失实陈述的处罚。如果你想更进一步,为更广泛的读者创造一个真正有价值的硬币来挖掘、购买和销售,而...

  • 发布于 2021-05-15 03:00
  • 阅读 ( 172 )

如何保护你的iota加密货币,miota,安全

物联网生态系统的加密货币平台IOTA最近陷入困境,因为黑客窃取了用户钱包的密码,并携价值400万美元的硬币潜逃。这起盗窃案成为头条新闻,批评人士迅速抨击IOTA,称IOTA为“一种可怕的加密货币”,因为它没有保护用户免受...

  • 发布于 2021-06-17 03:22
  • 阅读 ( 132 )

法定货币(fiat currency)和数字加密货币(cryptocurrency)的区别

...两种货币。此外,上述计件工作强调了加密形式的货币是如何成为一种世界性的现象,关于法定货币作为一种传统的交换媒介如何在全球范围内为人所知,以及每种货币形式的利弊。然而,尽管数字货币在现代社会比法定货币有...

  • 发布于 2021-07-11 22:50
  • 阅读 ( 303 )
大塔防御
大塔防御

0 篇文章

相关推荐