JS 实现简易老虎机

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <meta name="format-detection"content="telephone=no, email=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
        <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话,忽略email识别 -->
        <!-- 启用360浏览器的极速模式(webkit) -->
        <meta name="renderer" content="webkit">
        <!-- 避免IE使用兼容模式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
        <meta name="HandheldFriendly" content="true">
        <!-- 微软的老式浏览器 -->
        <meta name="MobileOptimized" content="320">
        <!-- uc强制竖屏 -->
        <meta name="screen-orientation" content="portrait">
        <!-- QQ强制竖屏 -->
        <meta name="x5-orientation" content="portrait">
        <!-- UC强制全屏 -->
        <meta name="full-screen" content="yes">
        <!-- QQ强制全屏 -->
        <meta name="x5-fullscreen" content="true">
        <!-- UC应用模式 -->
        <meta name="browsermode" content="application">
        <!-- QQ应用模式 -->
        <meta name="x5-page-mode" content="app">
        <!-- windows phone 点击无高光 -->
        <meta name="msapplication-tap-highlight" content="no">
        <style>
          *{
             margin:0;
             padding:0;
          }
          ul{
            text-align: center;
            margin: 100px auto;
            overflow: hidden;
          }
          ul li{
             width:40px;
             height:20px;
             overflow: hidden;
             background: #ff00ff;
             text-align: center;
             line-height: 20px;
             display: inline-block;
             margin:0 20px;
             color: #fff;
             position: relative;
          }
          dl{
            position: absolute;
            top: 0;
            left:0;
            width:40px;
            height:20px;
          }
          dd{
            display: block;
            width:40px;
            height:20px;

          }
          .btn{
            background: #333;
            text-align: center;
            color: #ff00ff;
            margin: 0 auto;
            display: block;
            border: none;
            padding: 10px;
            font-size: 18px;
          }
          .panel{
            text-align: center;
            margin: 50px auto;
          }
          .reset{
            -webkit-animation:flip 1s .2s ease both;
            display: none;
          }
          .flash{
            -webkit-animation:flash 1s .2s ease both;
          }
          .contant{
            -webkit-animation:wobble 3s .2s ease  both;
          }
          @-webkit-keyframes wobble{
            0%{-webkit-transform:translateX(0%)}
            15%{-webkit-transform:translateX(-25%) rotate(-5deg)}
            30%{-webkit-transform:translateX(20%) rotate(3deg)}
            45%{-webkit-transform:translateX(-15%) rotate(-3deg)}
            60%{-webkit-transform:translateX(10%) rotate(2deg)}
            75%{-webkit-transform:translateX(-5%) rotate(-1deg)}
            100%{-webkit-transform:translateX(0%)}
          }
          @-webkit-keyframes flip{
            0%{-webkit-transform:perspective(400px) rotateY(0);
            -webkit-animation-timing-function:ease-out}
            40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);
            -webkit-animation-timing-function:ease-out}
            50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
            -webkit-animation-timing-function:ease-in}
            80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(.95);
            -webkit-animation-timing-function:ease-in}
            100%{-webkit-transform:perspective(400px) scale(1);
            -webkit-animation-timing-function:ease-in}
           }
          @-webkit-keyframes flash{
            0%,50%,100%{opacity: 1;}
            25%,75%{opacity: 0;}
          }      
        </style>
    </head>
    <body>
        <ul>
            <li>
                <dl class="dl">
                    <dd>0</dd>
                    <dd>1</dd>
                    <dd>2</dd>
                    <dd>3</dd>
                    <dd>4</dd>
                    <dd>5</dd>
                    <dd>6</dd>
                    <dd>7</dd>
                    <dd>8</dd>
                    <dd>9</dd>
               </dl>
            </li>
            <li>
                <dl class="dl">
                    <dd>0</dd>
                    <dd>1</dd>
                    <dd>2</dd>
                    <dd>3</dd>
                    <dd>4</dd>
                    <dd>5</dd>
                    <dd>6</dd>
                    <dd>7</dd>
                    <dd>8</dd>
                    <dd>9</dd>
               </dl>
            </li>
            <li>
                <dl class="dl">
                    <dd>0</dd>
                    <dd>1</dd>
                    <dd>2</dd>
                    <dd>3</dd>
                    <dd>4</dd>
                    <dd>5</dd>
                    <dd>6</dd>
                    <dd>7</dd>
                    <dd>8</dd>
                    <dd>9</dd>
               </dl>
            </li>
            <li>
                <dl class="dl">
                    <dd>0</dd>
                    <dd>1</dd>
                    <dd>2</dd>
                    <dd>3</dd>
                    <dd>4</dd>
                    <dd>5</dd>
                    <dd>6</dd>
                    <dd>7</dd>
                    <dd>8</dd>
                    <dd>9</dd>
               </dl>
            </li>
            <li>
               <dl class="dl">
                    <dd>0</dd>
                    <dd>1</dd>
                    <dd>2</dd>
                    <dd>3</dd>
                    <dd>4</dd>
                    <dd>5</dd>
                    <dd>6</dd>
                    <dd>7</dd>
                    <dd>8</dd>
                    <dd>9</dd>
               </dl>
            </li>
        </ul>
        <button class="btn">点击老虎机</button>
        <div class="panel">
            <p class="reset"></p>
        </div>
        <div class="contant">好消息!!!凡是在没有抽中的给我转账100元红包的人,满40个我随机抽取一个人奖励2000元!100变2000超级划算!搏一搏,单车变摩托!赌一赌,摩托变路虎!现在开始,5.1当晚公布结果。拿起你们的手机参与活动吧!注:手机QQ5.4和微信6.1版本才能参与发红包活动,请升级版本。qq:295989501。</div>
        <audio preload="load" loop="loop" id="audio1">
          <source src="style.mp3">
        </audio>
    </body>
    <script> 
     var oli=document.getElementsByTagName("li"),
         reset=document.querySelector(".reset"),
         btn=document.querySelector(".btn"),
         odl=document.querySelectorAll(".dl"),
         Let=10,H=20,first=3,second=5,
         third=8,cf=cs=ct=0,timer=null,str="";
         document.getElementById("audio1").play();
        for (var i = 0; i < odl.length; i++) {
            var html=odl[i].innerHTML;
                odl[i].innerHTML="";
                ck=stradd(html,2);
                odl[i].innerHTML=ck;
         }; 
        function stradd(str,size){
            if(Object.prototype.toString.call(str)
                =="[object String]"){
                for (var i = 0; i < size; i++) {
                    str+=str;
                }; 
            }else{
                return "数据类型错误";
            }
             return str;
        }
        function getStyle(obj,name){
           return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name];
        }
        function starmove(obj,json,funEnd){
            clearInterval(obj.timer);
            var Bstop=true;
            obj.timer=setInterval(function(){
                for(var attr in json){
                   var speed=0;
                   if(attr=="opacity"){
                       var cur=Math.round(parseFloat(getStyle(obj,attr)*100));
                   }else{
                       var cur=parseInt(getStyle(obj,attr));
                   }
                   speed=(json[attr]-cur)/20;
                   speed=speed>0?Math.ceil(speed):Math.floor(speed); 
                   if(cur!=json[attr]){
                        Bstop=false;
                   }else{
                        Bstop=true;
                   }

                   if(attr=="opacity"){
                       obj.style.opacity=(cur+speed)/100;
                   }else{
                       obj.style[attr]=cur+speed+"px";
                   }
                }
              
                if(Bstop){
                      clearInterval(obj.timer);
                      if(funEnd)funEnd();
                }
            },30)
         }
         function run(){
            for (var i = 0; i < oli.length; i++) {
                oli[i].value=Math.floor(Math.random()*10);
            var Num=parseInt(oli[i].value),
                odl=oli[i].getElementsByTagName("dl")[0],
                odd=odl.getElementsByTagName("dd"),
                size=odd.length,
                height=odl.offsetHeight,
                tops=odd[Num+(size-Let)].offsetTop;
                odl.style.top=0;
                str+=Num; 
                starmove(odl,{"top":-(tops)},function(){
                    var Result=parseInt(str);
                        console.log(Result);
                        reset.innerText="";
                        if(Result<97000){
                           reset.innerText="上公交,一定记得买票!!";
                        }else if(Result>97000&&Result<98000){
                          ct++;
                          if(ct>third){
                            reset.innerText="上公交,一定记得买票!!";
                          }
                          reset.innerText="恭喜获得了3等奖";
                        }else if(Result>98000&&Result<99500){
                          cs++;
                          if(cs>second){
                            reset.innerText="上公交,一定记得买票!!";
                          }
                          reset.innerText="恭喜获得了2等奖";
                        }else{
                          cf++;
                          if(cf>first){
                            reset.innerText="上公交,一定记得买票!!";
                          }
                          reset.innerText="恭喜获得了1等奖"; 
                        }
                        reset.style.display="block";
                        btn.className="btn";
                });  
              

           };
            
         }
         btn.onclick=function(){
            str="";
            reset.style.display="none";
            this.className="flash btn";
            run()
            console.log()
         }
    </script>
</html>
demo地址:http://sandbox.runjs.cn/show/ad1u5kos

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。