2018/1/31 21:02:35当前位置推荐好文程序员浏览文章
1.gif

知识点:读心术原理算法独家揭秘,html5最新选择器,原生js动态dom生成,控制流程讲解,函数封装与模块化思维,定时器混合运用与帧动画,JavaScript知识体系分享。

文章分享之前小编推荐一下我的前端学习群:575308719,里面都是学习前端的,如果你想制作酷炫的网页,想学习前端知识,小编欢迎你的加入。小编会在群中不定期分享干货源码,包括我精心整理的一份前端教程。欢迎各位感兴趣的的小伙伴。

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

👇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; }    }<script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>

👇javascript代码:
/公式: 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="" alt="" 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);    };})()
网友评论