初识JavaScript,感觉整个人都不好了。。。

  学习web前端的开发已经将近一个月了,开发中的三个大兄弟——“html”、“css”、“JavaScript”,小哥我已经深入接触了前两位,并与他俩建立的深厚的友谊。在编写过程中,不能说达到各位大神的程度,但是对各个标签、若干属性也用得比较熟练了。而这最后一位姓J的大哥,却是怎么也得不到他的欣赏。对于变量的定义,函数的定义,还有各种调用,感觉自己写的命令就是人类看不懂,计算机看不明白。经过几天的深入交流,互诉衷肠。总算把彼此的距离拉近了几分,但是相对于温柔的“html”和“css”而言,“JS”依旧冷酷到底啊。

  今天写了第一个比较成功的js效果,虽然过程磕磕绊绊,不停地报错,但还是顺利完成。为了记下属于我人生的伟大时刻。决定把这简陋不堪的代码上传上来。一为需要用到此类效果时留个参考,二为将来技术提高时,嘲笑当年自己代码的幼稚~请各位大神见证。。。

  

<!doctype html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>动态广告是什么鬼</title>
  <style>
  #div_auto{
    100px;
    height:100px;
    position:absolute;
    background-color:#33ccff;
    }
  #div_main{
    1000px;
    height:600px;
    position:relative;
    border:1px #dc0000 solid;
    }
  button{
    margin-left:400px;
    }
  </style>
  </head>
  <body>
    <div id="div_main">我是一个少儿不宜的网站
      <div id="div_auto">我是那种羞羞的动态广告</div>
    </div>
    <button onclick="clickA()">动起来/停下来</button>
  <script type="text/javascript">
    var divs = document.getElementById("div_auto");
    var main = document.getElementById("div_main");
    var posX = 200;
    var posY = 300;
    var time = null;
    var moveX = true;
    var moveY = true;
    var a = true;
    window.onload = pos;
    function pos(){
      divs.style.left=posX+'px';
      divs.style.top=posY+'px';
    }
    function move(){
      if(moveX){
        if(posX>0){
          posX--;
          divs.style.left=posX+'px';
        }
        else{
          moveX = false;
        }
      }
      else{
        if(posX<main.offsetWidth-divs.offsetWidth){
          posX++;
          divs.style.left=posX+'px';
        }
        else{
          moveX = true;
        }
      }
      if(moveY){
        if(posY>0){
          posY--;
          divs.style.top=posY+'px';
        }
        else{
          moveY = false;
        }
      }
      else{
        if(posY<main.offsetHeight-divs.offsetHeight){
          posY++;
          divs.style.top=posY+'px';
        }
        else{
          moveY = true;
        }
      }
    }
    function clickA(){
      clearInterval(time);
      if((a==true)&&(time)){
        clearInterval(time);
        a=false;
      }

      else{
        time=setInterval(move,10);
        a=true;
      }
    }
  </script>
  </body>
</html>

不会放demo...还想请教园中各位大神,小哥跪谢!!!!

原文地址:https://www.cnblogs.com/skyloveanna/p/4079595.html