1703878574
1703878575
1703878576
1703878577
1703878578
1703878579
1703878580
1703878581
上述程序代码无须解释说明。现在开始编写主页的HTML代码。主页将显示三张表：第一张表部署投注合约，第二张表对投注合约投资，第三张表显示已投注合约的信息。
1703878582
1703878583
主页的HTML代码如下。把这段代码放入index.html页面：
1703878584
1703878585
1703878586
1703878587
1703878588
1703878589
1703878590
1703878591
1703878592
1703878593
1703878594
上述程序代码无须解释说明。现在开始编写JavaScript代码，以真正地部署合约、投资合约和显示合约信息。全部相关代码如下。将这段代码放入main.js文件：
1703878595
1703878596
1703878597
1703878598
1703878599
1703878600
1703878601
1703878602
1703878603
1703878604
1703878605
1703878606
1703878607
1703878608
上述代码的执行过程如下：
1703878609
1703878610
1）分别在投注合约ByteCode和投注合约ABI变量中存储合约、字节码和ABI。
1703878611
1703878612
2）创建一个Web3实例，它连接到测试网节点。
1703878613
1703878614
3）定义getAJAXobject函数（一个跨浏览器兼容的函数），它返回一个AJAX对象。
1703878615
1703878616
4）向第一张表添加submit事件监听器（event listener），用于部署合约。在事件监听器的回调函数中，通过传送matchId向getURL终点发出请求，获得加密的查询字符串。然后生成数据部署合约。接着找出gasRequired。使用函数对象的estimateGas方法计算所需的gas，也可以使用web3.eth.estimateGas方法（它们的实参不同），即在前面的方法里不需要传送交易数据。记住，如果函数调用引发异常，estimateGas将返回区块gas上限。随后计算随机数。这里使用getTransactionCount方法，而非我们之前学习的实际过程。这样做是为了简化代码。最后创建原始交易，签名并广播。一旦挖出交易，就显示合约地址。
1703878617
1703878618
5）接下来向第二张表添加submit事件监听器，用于投注合约。这里生成交易的数据部分，计算所需的gas，创建原始交易，签名并广播。在计算交易所需的gas时，从账户地址和value对象属性传送合约地址，因为它是函数调用，而且gas随着value、from地址和合约地址的变化而变化。记住，在计算合约函数调用所需的gas时，可以传送to、from和value属性，因为gas取决于这些数值。
1703878619
1703878620
6）最后让第三张表上有submit事件监听器，即显示已投注合约的信息。
1703878621
1703878622
1703878623