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

標籤：前端   javascript   讀心術   html5   DOM   

知識點：讀心術原理演算法獨家揭秘,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帶你解密讀心術小遊戲的背後故事