首页 前端知识 面向初学者JS和HTML实现的抽奖程序

面向初学者JS和HTML实现的抽奖程序

2024-01-26 10:01:25 前端知识 前端哥 495 979 我要收藏

以下是抽奖游戏的JS代码和步骤:

步骤:

1.定义一个数组,里面存储不同的奖品。 2.定义一个函数,用于生成随机数来表示抽中的奖品。 3.定义一个按钮,点击按钮触发抽奖函数。 4.利用DOM操作,将随机抽中的奖品输出到网页中。

代码:

HTML代码:

<!DOCTYPE html>
<html>
    <head>
        <title>抽奖游戏</title>
    </head>
    <body>
        <h1>抽奖游戏</h1>
        <p>点击下面的按钮参加抽奖</p>
        <button onclick="drawLottery()">抽奖</button>
        <p>抽奖结果:<span id="result"></span></p>
    </body>
    <script src="抽奖游戏.js"></script>
</html>

JS代码:

// 定义奖品数组
var prizes = ["Iphone X", "Apple Watch", "50元优惠券", "免单一次", "再来一次", "谢谢参与"];

// 定义抽奖函数
function drawLottery() {
  // 生成随机数
  var randomNumber = Math.floor(Math.random() * prizes.length);
  // 将抽中的奖品输出到页面上
  document.getElementById("result").innerHTML = prizes[randomNumber];
}

其中,Math.random()函数返回一个[0, 1)之间的随机数。由于prizes数组的长度为6,因此需要将随机数乘以6(即prizes.length)并向下取整,来生成0~5之间的随机整数,以表示抽中了哪个奖品。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/415.html
标签
服务器
评论
发布的文章

CSS3新增样式

2024-02-05 11:02:24

jQuery的介绍

2024-02-05 11:02:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!