zoukankan      html  css  js  c++  java
  • 小刘同学的第二十九篇博文

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

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

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

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            html,body{
                 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #box{
                 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 有点意思,要是我应该会写更复杂的逻辑。

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

  • 相关阅读:
    点击事件在label标签执行2次解决办法
    关于有偿提供拼图响应式后台的通知.
    jquery鼠标悬停导航下划线滑出效果
    javascript深层解释。
    创业者靠什么成功?
    怎么样才是理想的程序员?
    web总结。
    深入认识盒子模型 display:inline-block BFC 和haslayout !
    25种用户十秒离开你网站的原因!
    JavaScript 引用类型数组!
  • 原文地址:https://www.cnblogs.com/xiaoliutongxue/p/8326024.html
Copyright © 2011-2022 走看看