“Web3”指的是“基于区块链的去中心化在线生态系统”。 2021 年，Web3 的想法开始风行。到 2021 年底，特地趣味激增，这次要是因为加密货币爱好者的趣味以及出名技术专家和公司的投资
Web3 的外围显着特色是商业模式的去中心化。从这个意义上说，它标记着互联网的第三阶段（因而称为“Web3”）和用户以后现状的逆转。
Web3 是下一次迭代，它可能会颠覆这种势力构造，将其转移回用户。凋谢规范和协定能够回归。其目标是管制不再集中在大型平台和聚合器中，而是通过“无需许可”的去中心化区块链和智能合约宽泛散布。
这在实践中意味着什么？从实质上讲，它能够开发I34-合约I633-部署53I9通过将去中介化作为外围因素，标记着数字利用商业模式的范式转变。在数据、性能和价值方面可能不再须要中介。用户和创作者能够占据下风，并且通过开源而不是专有应用程序，将有能源进行翻新、测试、构建和扩大。
HTML的代码如下：
<html><head> <title>Hello World DApp</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'></head><body class="container"><h1>A Simple Voting Application</h1><div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>Candidate</th> <th>Votes</th> </tr> </thead> <tbody> <tr> <td>Alice</td> <td id="candidate-1"></td> </tr> <tr> <td>Bob</td> <td id="candidate-2"></td> </tr> <tr> <td>Cary</td> <td id="candidate-3"></td> </tr> </tbody> </table></div><input type="text" id="candidate" /><a href="#" onclick="voteForCandidate()" class="btn btn-primary">Vote</a></body><script src="https://cdn.jsdelivr.net/npm/web3@0.20.1/dist/web3.js"></script><script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script><script src="./app.js"></script></html>再新建一个js文件命名为app.js，js代码如下：
abi = JSON.parse('[{"constant":true,"inputs":[{"name":"candidate","type":"bytes32"}],"name":"totalVotesFor","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"candidate","type":"bytes32"}],"name":"validCandidate","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"bytes32"}],"name":"votesReceived","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"candidateList","outputs":[{"name":"","type":"bytes32"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"candidate","type":"bytes32"}],"name":"voteForCandidate","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"inputs":[{"name":"candidateNames","type":"bytes32[]"}],"payable":false,"stateMutability":"nonpayable","type":"constructor"}]')VotingContract = web3.eth.contract(abi);//部署的合约地址contractInstance = VotingContract.at('0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');candidates = {"Alice": "candidate-1","Bob": "candidate-2","Cary":"candidate-3"}function voteForCandidate() { console.log(candidate); candidateName = $("#candidate").val(); console.log(candidateName); contractInstance.voteForCandidate(candidateName, {from: web3.eth.accounts[0]}, function() { let div_id = candidates[candidateName]; console.log(contractInstance.totalVotesFor.call(candidateName).toString()); $("#" + div_id).html(contractInstance.totalVotesFor.call(candidateName).toString()); }); console.log(contractInstance.totalVotesFor.call(candidateName).toString());}$(document).ready(function() { candidateNames = Object.keys(candidates); for (var i = 0; i < candidateNames.length; i++) { let name = candidateNames[i]; let val = contractInstance.totalVotesFor.call(name).toString() $("#" + candidates[name]).html(val); }});