htmlcssJavaScript网页开发：年会手机号抽奖案例

最新推荐文章于 2026-01-04 11:46:20 发布

原创最新推荐文章于 2026-01-04 11:46:20 发布 · 2.1k 阅读

22 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

常用代码片段专栏收录该内容

44 篇文章

订阅专栏

见过不少人、经过不少事、也吃过不少苦，感悟世事无常、人心多变，靠着回忆将往事串珠成链，聊聊感情、谈谈发展，我慢慢写、你一点一点看......

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>抽奖</title>
       <style>
           #choujiang{
               display:block;
               width: 400px;
               margin: 0 auto;
               border:1px solid black;
               padding: 0;
               text-align: center;

           }
           #choujiang form .contents{
               display: block;
               width: 400px;
               height: 70px;
               background: #ff3435;
               color:black;
               font-weight: bold;
               text-align: center;
               line-height: 70px;
               cursor: pointer;
           }
           #choujiang form input{
               display:inline-block;
               width: 100px;
               height: 30px;
               border:0;
               border-radius: 15px;
               background: #34f4e4;
               line-height: 30px;
               color:red;
               font-family: 黑体;
               font-size:15px;
               font-weight: bold;
               margin-bottom: 15px;
               cursor: pointer;
           }
           #choujiang form label{
               display: block;
               width: 400px;
               margin: 0 auto;
               background: #ffffff;
               color:red;

           }

       </style>
   </head>
   <body>
       
       <div id="choujiang">
           <form action="">
               <div id="contents" class="contents" onclick="start_cj();">
                   点击开始滚动手机号码
               </div>
               <br>
               <input id="cj" type="button" value="抽1次" onclick="choujiang(1);">
               <input id="cj" type="button" value="抽3次" onclick="choujiang(3);">
               <input id="cj" type="button" value="抽10次" onclick="choujiang(10);">
               <label id="show" class="show"></label>
           </form>
       </div>
       <script>
           //抽奖
           function choujiang(number) {
               var tel = "";
               for (var i = 0; i < number; i++) {
                   tel = tel + get_tel() + " <br> ";
               }
               //将抽奖结果放入到指定位置显示
               var show = document.getElementById("show");
               show.innerHTML = "<h1>恭喜以下手机用户获奖</h1>" + tel;
           }
           //启动抽奖
           function start_cj() {
               var tel = get_tel();
               document.getElementById("contents").innerHTML = tel;
               setTimeout("start_cj()", 10); //设置计时器,循环
           }
           //获取手机号码
           function get_tel() {
               var prefixArray = new Array("130", "131", "132", "133", "135", "137", "138", "170", "187", "189");
               var i = parseInt(Math.random() * 10);
               var prefix = prefixArray[i];
               for (var j = 0; j < 8; j++) {
                   prefix = prefix + parseInt(Math.random() * 10);
               }
               return prefix;
           }
       </script>
   </body>
</html>