注意：代码需要在服务端运行！！！切勿双击html文件运行，点击下载源文件

web3.eth.sendTransaction

web3.eth.sendTransaction(transactionObject [, callback])参数：Object - 要发送的交易对象。from: String - 指定的发送者的地址。如果不指定，使用web3.eth.defaultAccount。to: String - （可选）交易消息的目标地址，如果是合约创建，则不填.value: Number|String|BigNumber - （可选）交易携带的货币量，以wei为单位。如果合约创建交易，则为初始的基金。gas: Number|String|BigNumber - （可选）默认是自动，交易可使用的gas，未使用的gas会退回。gasPrice: Number|String|BigNumber - （可选）默认是自动确定，交易的gas价格，默认是网络gas价格的平均值 。data: String - （可选）或者包含相关数据的字节字符串，如果是合约创建，则是初始化要用到的代码。nonce: Number - （可选）整数，使用此值，可以允许你覆盖你自己的相同nonce的，正在pending中的交易11。Function - 回调函数，用于支持异步的方式执行[async]。
返回值：String - 32字节的交易哈希串。用16进制表示

获取个人账户信息

async function getAccount() {// 请求用户授权 解决web3js无法直接唤起Meta Mask获取用户身份const enable = await ethereum.enable();console.log(enable,11)// 授权获取账户// let accounts = await ethereum.request({ method: 'eth_requestAccounts' });let accounts = await web3.eth.getAccounts();AccountValue = accounts[0];console.log(AccountValue,1);// 返回指定地址账户的余额let balance = await web3.eth.getBalance(AccountValue);BalanceValue = web3.utils.fromWei(balance, 'ether');console.log(balance,BalanceValue,2);showAccount.innerHTML = AccountValue;showBalance.innerHTML = `wei:${balance}, ether:${BalanceValue}`;
}

转账交易

async function toPay() {showCont();// 转账var r = confirm("确认转账吗？");if (r == true) {// const res = await web3.eth.sendTransaction({//     from:AccountValue,//     to:toAccountValue,//     value:toBalanceValue,// });// console.log(res);web3.eth.sendTransaction({from: AccountValue,to: toAccountValue,value: toBalanceValue,}, (err, address) => {if (!err) {console.log(address);alert("转账成功！");} else {console.log(err);}});}else {alert("您已经取消转账！");}}

附源码

<div id="app"><h5>转账</h5><button class="Web3Button">获取我信息</button><h2>我账户: <span class="showAccount"></span></h2><h2>余&nbsp;&nbsp;&nbsp;额: <span class="showBalance"></span></h2><hr><p class="cont"></p><hr><input type="text" class="account" value="" placeholder="填写被转账的账户"><input type="text" class="balance" value="" placeholder="转账金额，单位ETH"><br><button class="btnPay">确认转账</button><script src="./node_modules/web3/dist/web3.min.js"></script>
</div>

操作流程

const ethereumButton = document.querySelector('.Web3Button');
const showAccount = document.querySelector('.showAccount');
const showBalance = document.querySelector('.showBalance');const cont = document.querySelector('.cont');const toAccount = document.querySelector('.account');
const toBalance = document.querySelector('.balance');
const btnPay = document.querySelector('.btnPay');// 我的账户余额，对方账户余额
let AccountValue, BalanceValue, toAccountValue, toBalanceValue;// 页面显示转账内容
function showCont() {// 我的账户余额，对方账户余额// AccountValue,BalanceValue,toAccountValue,toBalanceValuecont.innerHTML = `我的账户:${AccountValue}-->对方账户:${toAccountValue},余额:${BalanceValue},转账金额:${web3.utils.fromWei(toBalanceValue, 'ether')}`;
}
// 获取内容
toAccount.onblur = () => {toAccountValue = toAccount.value;console.log(toAccount.value);
}
toBalance.onblur = () => {if (toBalance.value) {// eth转wei 转账 web3.utils.toWei('1', 'ether')toBalanceValue = web3.utils.toWei(toBalance.value, 'ether');showCont();}console.log(toBalance.value, toBalanceValue);
}// Web3浏览器检测
if (typeof window.ethereum !== 'undefined') {console.log('MetaMask is installed!');
}// 实例化
window.web3 = new Web3(ethereum);
var web3 = window.web3;// 检测MetaMask
if (web3.currentProvider.isMetaMask == true) {console.log('metamask 可用');
} else {console.log('metamask 不可用');
}// 获取账户信息
ethereumButton.addEventListener('click', () => {getAccount();
});async function getAccount() {// 请求用户授权 解决web3js无法直接唤起Meta Mask获取用户身份const enable = await ethereum.enable();console.log(enable,11)// 授权获取账户// let accounts = await ethereum.request({ method: 'eth_requestAccounts' });let accounts = await web3.eth.getAccounts();AccountValue = accounts[0];console.log(AccountValue,1);// 返回指定地址账户的余额let balance = await web3.eth.getBalance(AccountValue);BalanceValue = web3.utils.fromWei(balance, 'ether');console.log(balance,BalanceValue,2);showAccount.innerHTML = AccountValue;showBalance.innerHTML = `wei:${balance}, ether:${BalanceValue}`;console.log(AccountValue, balance, BalanceValue);
}// 转账
btnPay.addEventListener('click', () => {toPay();
});async function toPay() {showCont();// 转账var r = confirm("确认转账吗？");if (r == true) {// const res = await web3.eth.sendTransaction({//     from:AccountValue,//     to:toAccountValue,//     value:toBalanceValue,// });// console.log(res);web3.eth.sendTransaction({from: AccountValue,to: toAccountValue,value: toBalanceValue,}, (err, address) => {if (!err) {console.log(address);alert("转账成功！");} else {console.log(err);}});}else {alert("您已经取消转账！");}}

使用Web3JS的API在页面中进行转账交易-案例相关推荐

html5页面中添加腾讯地图api
html5页面中添加腾讯地图api: 点击地图出现详细的地图: 这是一个基于微信端的地图处理方案. 先看看html架构: <a id="aToMap" href=" ...
微信小程序——API promise化，全局数据共享，MobX，将Stroe中的成员绑定到页面中，在页面上使用Strore中的成员
一.API promise化 1．基于回调函数的异步 API 的缺点默认情况下,小程序官方提供的异步 API 都是基于回调函数实现的,例如,网络请求的 API 需要按照如下的方式调用: 缺点:容易造 ...
通过带Flask的REST API在Python中部署PyTorch
通过带Flask的REST API在Python中部署PyTorch 在本文中,将使用Flask来部署PyTorch模型,并用讲解用于模型推断的 REST API.特别是,将部署一个预训练的Dense ...
Bootstrap：关于bootstrap单页面中多Modal的问题
2019独角兽企业重金招聘Python工程师标准>>> 在单页面中新建用户采用modal而判断添加成功后还采用modal提示成功后右边的滚动条会出来俩条,覆盖整个body的阴影瞬间变 ...
如何在HTML页面中插入百度地图
在网页制作时,如果想要把企业地址以地图的形式插入HTML页面中,可以通过百度地图轻松实现,当然,前提是注册百度账号并且通过实名认证网址:http://api.map.baidu.com/lbsapi ...
ajax 与php页面取值,在同一页面中使用PHP和AJAX的最佳方法
在同一页面上,我有几种类型的代码:PHP,JS和HTML.我想从HTML表单中获取信息并进行PHP处理,而无需在单击"发送"按钮后重新加载页面. PHP获取它通过API发送的值(来 ...
php 离线 gis,在 Web 页面中使用离线地图
1. 所需工具&插件: 1. MapDownloader (提取码: spx6) 2. 操作: 1. 参考:java离线地图web GIS制作下载好所需地图瓦片,本文以百度地图/深圳为例 2 ...
弹出框页面中使用jquery.validate验证控件
弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...
如何添加地图控件到Windows Phone 8的页面中
原文如何添加地图控件到Windows Phone 8的页面中本主题介绍了各种方法来添加一个地图控件到Windows Phone 8的项目.该地图控件在Windows Phone的SDK 8.0的库 ...

使用Web3JS的API在页面中进行转账交易-案例

web3.eth.sendTransaction

获取个人账户信息

转账交易

附源码

操作流程

使用Web3JS的API在页面中进行转账交易-案例相关推荐

最新文章

热门文章