html css js 编程简单实现随机抽奖练习小项目

Json____2024-09-09 11:48

我们经常在某些网站上看到一些抽奖的活动，比如大转盘随机抽奖

这种抽奖程序是怎么实现的呢？下面分享一个代码简单的实现了一下随机抽奖的逻辑

对于网页的美观度就不分享了主要是分享 js怎么随机的让奖品滚顶起来然后某个节点

停止滚动从而实现中奖奖品

bash 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
    <h1>随机抽奖小练习</h1>
<p id="a">奖品</p>
<button onclick="ad()">开始抽奖</button>
<button onclick="a()">停。。。</button>
</body>
<script type="text/javascript">
function add(){
        var dm=["一等奖：大彩电",'二等奖：小彩电','三等奖：吹风机','四等奖：小电风扇','五等奖：塑料杯','谢谢惠顾'];
        var dc=parseInt(Math.random()*dm.length);
        document.getElementById('a').innerHTML=dm[dc];
}
let td=null
function ad(){
   if(td){
    a(td)
   }
 td=window.setInterval(add,100);
}
function a(){
      window.clearInterval(td);
}
</script>
</html>

有刚刚学习编程的兄弟们可以尝试写一写

更多项目练习例子分享：https://wwwoop.com/?typeParam=2

html css js 编程简单实现 随机抽奖 练习小项目

html css js 编程简单实现随机抽奖练习小项目