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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.