当前位置：首页 > 行业动态 > 正文

如何用html制作抽奖

admin
行业动态
2024-04-04
1

要用HTML制作抽奖，你可以使用<table>标签创建一个表格，然后使用<tr>和<td>标签创建行和单元格，以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>抽奖页面</title>
    <style>
        table {
            bordercollapse: collapse;
            width: 50%;
            margin: 0 auto;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            textalign: center;
        }
        th {
            backgroundcolor: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1 >抽奖活动</h1>
    <p >点击按钮进行抽奖</p>
    <button onclick="draw()">开始抽奖</button>
    <br><br>
    <table id="lotteryTable">
        <tr>
            <th>奖品名称</th>
            <th>中奖者</th>
        </tr>
        <!在这里添加奖品和中奖者信息 >
    </table>
    <script>
        function draw() {
            // 在这里编写抽奖逻辑
            // 从一组奖品中随机选择一个
            var prizes = ['一等奖', '二等奖', '三等奖'];
            var winner = prizes[Math.floor(Math.random() * prizes.length)];
            // 将中奖者信息添加到表格中
            var table = document.getElementById('lotteryTable');
            var row = table.insertRow(1);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = winner;
            cell2.innerHTML = '未中奖';
        }
    </script>
</body>
</html>

这个示例中，我们创建了一个简单的抽奖页面，包括一个标题、一个按钮和一个表格，当用户点击按钮时，会调用draw()函数进行抽奖，在这个函数中，我们从一组奖品中随机选择一个作为中奖者，并将中奖者信息添加到表格中，你可以根据需要修改这个示例，以适应你的具体需求。