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

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

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

对于网页的 美观度 就不分享了 主要是分享 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

相关推荐
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风9 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端10 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧10 小时前
Promise 的使用
前端·javascript
天天扭码10 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户4582031531711 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
前端康师傅11 小时前
JavaScript 作用域
前端·javascript
云枫晖11 小时前
JS核心知识-事件循环
前端·javascript