html 年会抽奖代码

HTML年会抽奖代码

!DOCTYPE html>
    html>
    head>
    	meta charset="UTF-8">
    	title>
    HTML年会抽奖/title>
    	style>
.result {
     font-size: 30px;
     color: red;
 }
    	/style>
    /head>
    body>
    	h1>
    HTML年会抽奖/h1>
    	div id="lottery">
    button onclick="drawLottery()">
    点击抽奖/button>
    div id="result" class="result">
    /div>
    	/div>
    	script>
function drawLottery() {
    var maxNum = 100;
     // 最大数值var result = Math.ceil(Math.random() * maxNum);
     // 随机数document.getElementById("result").innerText = "恭喜您获得了第 " + result + " 号奖品！";
}
    	/script>
    /body>
    /html>
    

代码解释：

1. !DOCTYPE html> 用于声明文档类型为 HTML5。

2. meta charset="UTF-8"> 声明编码格式为 UTF-8。

3. title> HTML年会抽奖/title> 设置网页标题为 “HTML年会抽奖”。

4. style> .../style> 设置样式，result 类的字体大小为 30px，颜色为红色。

5. h1> HTML年会抽奖/h1> 设置网页标题为 “HTML年会抽奖”。

6. div id="lottery"> .../div> 创建一个抽奖的 div，包含一个抽奖按钮和一个结果显示区域。

7. button onclick="drawLottery()"> .../button> 创建一个点击事件，当点击抽奖按钮时，调用 drawLottery() 函数。

8. div id="result" class="result"> /div> 创建一个结果显示区域，它有一个 id 为 result，样式为 result。

9. script> .../script> 创建一个 JavaScript 脚本，实现抽奖功能。

10. function drawLottery() { ...} 是抽奖函数，使用 Math.random() 函数生成一个随机数并向上取整得到一个范围在 1 到 maxNum（此处 maxNum 为 100）之间的整数，然后在结果显示区域显示获奖信息。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！