小刘同学的第二十九篇博文

很遗憾今天没有干货分享出来，不过明天就考试了，衷心希望SQL Server数据库可以过啊！！！

白天状态都不怎么好，也不知道是快考试了还是怎么，反正都不是很好。

下午自己找了很多鸡汤读，还打印出来了，希望能对自己有点帮助吧。

发现跟录播真是会漏掉很多知识点啊，上次那个小球随机移动的，老师给了一段很风骚的代码，大家可以看看。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #box{
            width: 50px;
            height: 50px;
            background-color: #abcdef;
            border-radius: 50%;
            position: fixed;
            left: 1px;
            top: 1px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var maxWidth = document.body.offsetWidth-50;
        var maxHeight = document.body.offsetHeight-50;
        function randomMove(){
            var box = document.getElementById("box");
            var left = parseInt(box.style.left)||0;
            var top = parseInt(box.style.top)||0;

            var nleft = (Math.ceil(Math.random()*1000)%maxWidth);
            var ntop = (Math.ceil(Math.random()*1000)%maxHeight);
            var leftInterval = setInterval(function(){
                if(left<nleft){
                    box.style.left = (++left)+"px";
                }else if(left>nleft){
                    box.style.left = (--left)+"px";
                }else{
                    clearInterval(leftInterval);
                    clearInterval(topInterval);
                    randomMove();
                }
            },10);
            var topInterval = setInterval(function(){
                if(top<ntop){
                    box.style.top = (++top)+"px";
                }else if(top>ntop){
                    box.style.top = (--top)+"px";
                }else{
                    clearInterval(topInterval);
                    clearInterval(leftInterval);
                    randomMove();
                }
            },10);
        }
        randomMove();
        // setInterval(randomMove,1000);
    </script>
</body>
</html>

这个缓慢移动的动画效果的确很厉害，不过没录播上没有细讲，现在也只能根据代码来理解了。

这个|| 0 有点意思，要是我应该会写更复杂的逻辑。

还用到了递归，有点复杂，分析一下又觉得还好，明天自己再实现一下吧。还是要多敲才行，自己不敲，完全看老师敲没啥软用。。。╮(╯▽╰)╭

posted @ 2018-01-21 23:12  小刘-  阅读(145)  评论(0)    收藏  举报