码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-01-22 01:11:52      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:自己   实现   没有   --   mat   今天   意思   random   move   

很遗憾今天没有干货分享出来,不过明天就考试了,衷心希望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 有点意思,要是我应该会写更复杂的逻辑。

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

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

标签:自己   实现   没有   --   mat   今天   意思   random   move   

原文地址:https://www.cnblogs.com/xiaoliutongxue/p/8326024.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!