Native JavaScript takes you through the story behind a mind-reading game

Knowledge Point: Mind-reading principle algorithm exclusive disclosure, HTML5 the latest selector, native JS dynamic dom generation, control flow explanation, function encapsulation and modular thinking, timer mixed use and frame animation, JavaScript knowledge system sharing.

HTML code:

<div class="cont">    <div class="wrap"></div>    <div class="box">        <div class="explain">            <strong>游戏规则:</strong><br>任意选择一个两位数（或者说，从10~99之间任意选择一个数），把这个数的十位与个位相加，再把任意选择的数减去这个和。并把这个图形牢记心中，然后点击水晶球。<br>你会发现，水晶球所显示出来的图形就是你刚刚心里记下的那个图形。<br>例如：你选的数是23，然后2+3=5，然后23-5=18,在图表中找出与最后得出的数所相应的图形        </div>        <div class="showbox"></div>        <div class="btnRe">刷 新</div>    </div></div>

CSS code:

    <style type= ' text/css ' > * {margin:0; padding:0;}        Body {Background-color:rgba (52, 52, 53, 0.82);} . cont {width:880px; height:auto; margin:20px auto; Background-color:rgba (255, 205, 156, 0.64); Overflow:hidden; bord er-radius:30px}. Wrap {width:480px; margin:20px; overflow:hidden; float:left; box-shadow:0 0 4px Rgba (59, 4 4, 49, 0.8); padding:10px 0 10px 10px; border-radius:20px; }. Wrap div {width:30px; height:30px; float:left; margin:0 10px 30px 0; text-align:center; box-shadow:0 0 1p x #aa64c8;  border-radius:100%}. Wrap div img {display:block; overflow:hidden; border-radius:100%}. Wrap Div span {font-size:20px; font-family:andalus; color: #000000; text-shadow:0 1px 0px #000000; line-height:10px}. Box        {width:310px; margin:0 auto; float:left;} . box. Explain {padding:10px; margin:0 auto; width:300px; font-size:16px; line-height:25px; color: #000000; font-fami Ly: ' MiCrosoft Jhenghei '; Font-weight:bold;  }. Box. btnre {width:100px; margin:20px auto; text-align:center; line-height:40px; Background-color:rgba (255, 205, 156, 0.64); font-size:16px; Color: #000000; Cursor:pointer; padding:3px; border-radius:10px; font-weight:300;  }. Box. btnre:hover {border:3px solid Rgba (255, 205, 156, 0.64); Background-color: #6c85c8; Color:rgba (255, 205, 156, 0.64); padding:0; }. Box Showbox {width:120px; height:120px; Background-color:rgba (255, N, 207, 0.64); margin:10px auto; bord er-radius:50%; Overflow:hidden; box-shadow:0 0 10px #aa64c8;        }. Box. showbox img {opacity:0.3;}        . cont. box. on {animation:active 2s;-webkit-animation:active 2s;}            @keyframes acitve {0% {box-shadow:0 0 50px #c789c8;}            50% {box-shadow:0 0 30px #aa64c8;}        100% {box-shadow:0 0 10px #aa64c8;} } @-webkit-keyframes Active {0% {box-shadow:0 0 50px #c789c8; } 50% {box-shadow:0 0 30px #aa64c8;}        100% {box-shadow:0 0 10px #aa64c8;} } </style>

JavaScript code:

   <script type= "Text/javascript" src= "js/jquery-2.2.0.min.js" ></script> <script>/* Formula: AB 10a+b-        a-b=9a OR 10a-a=9a */(function () {var $wrap = $ ('. Wrap '), $show = $ ('. Showbox ');        var str = ';        var timer = null;        var timerout = null; for (var i = 1; i <=; i++) {str + = ' <div><span> ' + i + ' </span></div> ' $wrap. Append (str);        Init ();            $ ('. Btnre '). Click (function () {reset ();            $show. Removeclass (' on '). FIND (' img '). attr (' src ', '). Stop (). Animate ({opacity:0.3,}, 1000);            Timer = setinterval (init, 10);        Timerout = SetTimeout (function () {Clearinterval (timer)}, 1000);            }) $ ('. Showbox '). Click (function () {reset ();            Timer = setinterval (start, 10);        Timerout = SetTimeout (end, 1000);    })    function init () {var ran = Math.floor (Math.random () * 99) + 1;                $ ('. Wrap '). Find (' div '). each (function (i) {var ran1 = Math.floor (Math.random () * 99) + 1;                if (i% 9 = = 0) {$ ('. Wrap '). Find (' div '). EQ (i-1). FIND (' img '). attr (' src ', ' img/' + (RAN) + '. png '); else {$ ('. Wrap '). Find (' div '). EQ (i-1). FIND (' img '). attr (' src ', ' img/' + (ran1) + '. png                ‘);            };        });        };            function Reset () {cleartimeout (timerout);        Clearinterval (timer);        };            function Start () {var x = Math.floor (Math.random () * 99) + 1;        $show. addclass (' on '). FIND (' img '). attr (' src ', ' img/' + x + '. png '). css ({opacity:0.3})}; Function End () {clearinterval (timer) cleartimeout (timerout) var img = $wrap. Find (' div ').            EQ (8). FIND (' img '). attr (' src '); $show. addclass (' on '). FIND (' img '). attr(' src ', img). Stop (). Animate ({opacity:1,}, 3000);    }; }) () </script>

Interested in learning to learn the Web front end can come to the Web front end Qun "189394454" can get 2018 of the latest web front-end learning materials for free.

Native JavaScript takes you through the story behind a mind-reading game