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

相关推荐
那年窗外下的雪.2 分钟前
鸿蒙ArkUI布局与样式进阶(十二)——自定义TabBar + class类机制全解析(含手机商城底部导航案例)
开发语言·前端·javascript·华为·智能手机·harmonyos·arkui
Rysxt_30 分钟前
Electron 与 uni-app 区别教程:如何选择适合你的跨平台开发框架?
javascript·electron·uni-app·跨平台
前端架构师-老李35 分钟前
15、Electron专题:使用 electron-store 进行本地数据存储
前端·javascript·electron
小白学大数据36 分钟前
双管齐下:结合显式等待与Timeout处理复杂Ajax网页
前端·javascript·ajax
Rysxt_39 分钟前
Electron 教程:从背景到 Vue3 桌面应用开发
前端·javascript·electron
luckyPian1 小时前
前端+AI:CSS3(二)
前端·css·css3
吃饺子不吃馅1 小时前
了解微前端:为何 Web Component 是绕不开的关键技术?
前端·javascript·架构
muyouking111 小时前
Tailwind CSS 小白快速入门速查手册
前端·css·css3
colorFocus2 小时前
都25年了,快用?.替代&&,??替代||
javascript
Asort2 小时前
JavaScript设计模式(十八)——备忘录模式:状态保存与恢复的艺术
前端·javascript·设计模式