html通过web3JS 获取当前连接的区块链信息和账号信息

这篇具有很好参考价值的文章主要介绍了html通过web3JS 获取当前连接的区块链信息和账号信息。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前面 我们讲了 MetaMask和ganache的配置安装 并用 MetaMask管理ganache的启动的虚拟区块链
那么 我们现在也完全可以写一个网页来做这个东西的管理

您可以先查看文章web3.js获取导入做一个导入了 web3的html文件

首先我们可以来试着 获取 自己当前是在哪个区块的
getBlockNumber
当然 你要有本地的区块链 我们还是通过ganache启动起虚拟的环境
然后在网页中编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "./js/web3.min.js"></script>
</head>
<body>
    <script>
        var web3 = new Web3(Web3.givenProvider || "ws://localhost:8545");
        web3.eth.getBlockNumber().then(res =>{
            console.log(res);
        })
    </script>
</body>
</html>

这里 就输出了我们的区块链编号
web3获取当前账号,区块链,html,web3
如果你是刚起来的环境 自然就是0 如果中间你做过其他操作 可能就会向后退 变成 1 2 3 4 5

我们在运行 ganache 时 会出现一个链id
web3获取当前账号,区块链,html,web3
web3就可以获取到当前连接的这个链的id
getChainId
我们在网页中编写代码如下

web3.eth.getChainId().then(res =>{
  console.log(res);
})

web3获取当前账号,区块链,html,web3
这里 就成功将我们的 链id就输出出来了

这里 我们也很确定了 确实是 网页已经连接到了我们本地的区块链

那么 下面我们就来做点有意义的事吧
通过账号 获取用户的ETH数量

你们要自己找方法 可以用文档https://learnblockchain.cn/docs/web3.js/web3-eth.html#getchainid
上面都会有函数演示和说明 但是他这个文档老实说结构做点不是特别清晰 需要耐心去找
web3获取当前账号,区块链,html,web3
这里 文档跟我们说 需要一个地址 简单说 就是需要账号的公钥
web3获取当前账号,区块链,html,web3
我们可以这样编写代码

web3.eth.getBalance("0xCA9368CbD09A84457a39E0909Ce9335D15Be81C6").then(res =>{
     console.log(res);
})

0xCA9368CbD09A84457a39E0909Ce9335D15Be81C是我ganache中十个账号中的一个的公钥 这里 你们肯定要自己去 启动的 ganache 环境中去拿一个账号来用
web3获取当前账号,区块链,html,web3
但是 这东西一输出 我估计大家都麻了 这明显就有问题啊
web3获取当前账号,区块链,html,web3
其实这个 展示的也没问题 只是一个单位没有转换处理
我不知道 大家对文件单位的转换敏不敏感 这个就差不多 就好比 我们 1024 转 M这个概念是一样的
这里 我们接口返回的单位也是最小的 叫 wei
web3获取当前账号,区块链,html,web3
其实这个我们直接 除就可以了 但是 我们还是搞正规一点 它有专门的方法

但是先说个题外话 这六个单位 其实你们可以拿名字去查一下 很有纪念意义 他们都是在数学和密码学上很有贡献的人
这个东西的作者还是有心了的
这边很多平台和文档都会说 希望在做计算是 还是 以wei这个单位来处理 只是涉及到展示时才要将他转换成 ether给用户看 方便用户统计处理

我们将代码改成

web3.eth.getBalance("0xCA9368CbD09A84457a39E0909Ce9335D15Be81C6").then(res =>{
  console.log(web3.utils.fromWei(res,"ether"));
})

utils.fromWei 两个参数 第一个 要转换的单位 第二个 要转换成什么点位
运行结果如下
web3获取当前账号,区块链,html,web3
这样 我们的单位就是之前看到的 1000了文章来源地址https://www.toymoban.com/news/detail-582112.html

到了这里,关于html通过web3JS 获取当前连接的区块链信息和账号信息的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【跟乐乐学web3开发】一.使用IDE工具webstorm来编写web3js

    web3可以用java语言来编写,通过java的 web3j 依赖来编写,但是web3j对于abi的应用等支持库不太完整,所以还是多少有点局限性。 因此在当今的web3领域中,使用基于javaScript的 web3.js 库来编写web3应用是主流。 市面上大多的教材中,对于web3.js的编写是基于vscode这一款ide工具,这里

    2024年02月04日
    浏览(54)
  • 使用nodejs和web3js实现链接metamask钱包并实现合约交互

    在以太坊区块链上,metamask钱包是一个非常常用的钱包,用以管理以太币和其他以太坊资产。同时,它也是一个重要的以太坊智能合约交互工具。在本文中,我们将介绍如何使用nodejs和web3js实现链接metamask钱包并实现合约交互。 在开始之前,首先需要安装NodeJS和Web3JS。 NodeJS是

    2024年02月04日
    浏览(90)
  • 使用nodejs和web3js来实现链接MetaMask钱包并取消风险代币授权

    随着区块链技术的快速发展,数字货币资产在投资及交易市场中得到了广泛的应用。而在数字货币交易过程中,钱包是一个非常重要的环节。比如MetaMask就是一款非常流行的区块链钱包,它可以让用户在浏览器中安全地管理自己的数字资产。 然而,在数字货币交易过程中也存

    2024年01月23日
    浏览(50)
  • 使用Ganache,web3js和remix在个人区块链上部署并调用合约

    Ganache是一个运行在本地的个人区块链,适用于以太坊的开发者。 首先我们需要下载Ganache web3js的中文文档 remix英文版的网址 有以上的准备之后我们就可以开始了 首先启动Ganache 这就是Ganache的主页面,下面有10个供我们使用的账号,上面有他们的地址以及余额,我们暂时需要

    2024年01月19日
    浏览(77)
  • web3Js(干货)(多签的流程原理)看完这一篇就懂了(波场网络-请勿用于除学习外其他用途)

    连接波场网络: 其中APIKEY可以在官网获取; 可以使用tronWeb.isConnected()判断是否连接成功 创建离线波场地址: 该地址未激活,如果需要激活, 通常需要一定数量的 TRX(TRON 的本地代币)用于支付激活费用; 等待区块确定 就可以查看激活信息; 创建随机助记词与私钥: 如何让

    2024年02月04日
    浏览(89)
  • java通过web3j获取ETH交易明细

        我们在项目里面如果想要得到用户的ETH交易明细怎么做呢?有两种方式:    1、直接获取ETH最新块的交易明细。    2、通过块获取用户的交易明细。 废话不多说,直接贴代码看了          下面是项目的相关依赖:

    2024年02月05日
    浏览(52)
  • 【web3j】java通过web3j监听并解析合约中的事件(event/emit)

    ① 查询链上数据用的rpc(本示例是binance的,测试网可以使用:https://data-seed-prebsc-2-s2.binance.org:8545) ② 自己还要有一个测试链上部署好的合约,合约中要有一个方法emit了事件。 ③ java依赖 一、 通过自己合约的abi和bin生成一个java文件,abi和bin可以在remix的compiler模块中获取,

    2024年02月09日
    浏览(50)
  • Java Web3j nonce 获取

    Web3j 获取 nonce 的参考代码 获取一个 address nonce 值的时候,其中有一个参数为 DefaultBlockParameter,上面代码中采用的是 DefaultBlockParameterName 类,它有 3 个值,分别为 EARLIEST ( \\\"earliest\\\" ) LATEST ( \\\"latest\\\" ) PENDING ( \\\"pending\\\" ) earliest:创世区块 latest:最新区块 (区块链的头号区块) pending:

    2024年02月14日
    浏览(66)
  • 记录分享vue3通过web3.js连接MetaMask的流程及签名、验签方法

    记录下web3.js连接,希望对像我一样的小白有帮助。废话不多说,开整! 一、先在浏览器上面下载 小狐狸MetaMask插件,然后创建账户,创建成功之后默认连接的是以太坊 Ethereum 主网络,如果有相关网络的信息(如RPC URL和和链id等,可以自己添加,没有就先不管)。  二、本地项

    2024年02月06日
    浏览(58)
  • Java Web3J :使用web3j监听、查询、订阅智能合约的事件

    前面有文章写如何使用Docker-compose方式部署blockscout浏览器+charts图表,区块链浏览器已经部署成功了,同时我们在链上增加了治理投票流程,如何实时的把治理事件快速同步到浏览器呢?这时就想到了Web3J来监听智能合约的事件,来达到同步事件的效果

    2024年02月09日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包