html（抽奖计划）

梦见你的名字  金牌会员 | 2024-7-16 01:42:42 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 737|帖子 737|积分 2211


  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>抽奖</title>
  6.                 <style type="text/css">
  7.                         * {
  8.                                 margin: 0;
  9.                                 padding: 0;
  10.                         }
  11.                         .container {
  12.                                 width: 800px;
  13.                                 height: 800px;
  14.                                 border: 1px dashed red;
  15.                                 position: absolute;
  16.                                 left: 50%;
  17.                                 margin-left: -400px;
  18.                                 text-align: center;
  19.                                 line-height: 100px;
  20.                         }
  21.                         .container .box, .box2 {
  22.                                 width: 300px;
  23.                                 height: 300px;
  24.                                 background: red;
  25.                                 border-radius: 50%;
  26.                                 margin: auto;
  27.                                 margin-top: 50px;
  28.                                 text-align: center;
  29.                                 line-height: 300px;
  30.                         }
  31.                         .box2 {
  32.                                 background: deepskyblue;
  33.                         }
  34.                         #show {
  35.                                 font-size: 30px;
  36.                                 color: white;
  37.                                 font-weight: bold;
  38.                         }
  39.                         #start {
  40.                                 width: 300px;
  41.                                 height: 50px;
  42.                                 background: palevioletred;
  43.                         }
  44.                 </style>
  45.         </head>
  46.         <body>
  47.                 <div class="container">
  48.                         <div class="box" id="box">
  49.                                 <span id="show">
  50.                                         奖品
  51.                                 </span>
  52.                         </div>
  53.                         <button id="start" onclick="start()">开始抽奖</button>
  54.                        
  55.                 </div>
  56.                
  57.                 <script type="text/javascript">
  58.                        
  59.                         var flag = false;
  60.                         var goods = ["香蕉", "地狱火", "八宝粥", "宝马五元代金券", "联想电脑",
  61.                          "iPhoneX", "1QB", "黄钻",'练习册','谢谢惠顾'];
  62.                         var show = document.getElementById("show");
  63.                         var _start = document.getElementById("start");
  64.                         var _box = document.getElementById("box")
  65.                         var timer;
  66.                        
  67.                         function start() {
  68.                                 if (!flag) {
  69.                                         flag = true;
  70.                                         _start.innerHTML = "停止抽奖"
  71.                                         timer = setInterval(function() {
  72.                                                 var index = Math.floor(Math.random()*goods.length);
  73.                                                 var good = goods[index]
  74.                                                 show.innerText = good;
  75.                                                 _box.className = "box2";
  76.                                         }, 10)
  77.                                 } else {
  78.                                         flag = false;
  79.                                         _start.innerHTML = "开始抽奖";
  80.                                         clearInterval(timer);
  81. //                                        _box["className"] = "box";
  82.                                         _box.setAttribute("class", "box");
  83.                                 }                               
  84.                         }       
  85.                 </script>
  86.         </body>
  87. </html>
复制代码
可以根据自己的喜好计划抽奖内容，大概修改颜色。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

梦见你的名字

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表