知識點：讀心術原理算法獨家揭秘,html5最新選擇器，原生js動態dom生成，控制流程講解，函數封裝與模塊化思維，定時器混合運用與幀動畫，JavaScript知識體系分享。

html代碼：

<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"><img src="" ></div>
        <div class="btnRe">刷 新</div>
    </div>
</div>
 

css代碼：

    <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; border-radius: 30px }

        .wrap { width: 480px; margin: 20px; overflow: hidden; float: left; box-shadow: 0 0 4px rgba(59, 44, 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 1px #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-family: ‘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, 230, 207, 0.64); margin: 10px auto; border-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代碼：

   <script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
     <script>
    /*公式: 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 <= 96; i++) {
            str += ‘<div><img src=""  width="30" height="30" autocomplete="off"><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>
 

有興趣想學習web前端的可以來web前端qun“189394454”可以免費獲取2018最新web前端學習資料。

原生javascript帶你解密讀心術小遊戲的背後故事