• 初识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...还想请教园中各位大神,小哥跪谢!!!!

  • 相关阅读:
    整合ssm
    卸载,安装JDK
    基本的Dos命令
    基本的Dos命令
    Typora软件操作教程(简单的编写文档,方便,美观,有效的 HTML 文档)
    Vuex 第6节 module模块组
    Vuex 第5节 actions异步修改状态
    Vuex 第4节 getters计算过滤操作
    Vuex 第3节 Mutations修改状态
    Vuex 第2节 state访问状态对象
  • 原文地址:https://www.cnblogs.com/skyloveanna/p/4079595.html
Copyright © 2020-2023  润新知