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

相关推荐
遂心_3 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
遂心_4 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy4 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy4 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
一个不爱写代码的瘦子5 小时前
迭代器和生成器
前端·javascript
前端老鹰5 小时前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
墨渊君8 小时前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
芦苇Z8 小时前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
源猿人8 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin9 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js