学习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{
    width:100px;
    height:100px;
    position:absolute;
    background-color:#33ccff;
    }
  #div_main{
    width: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 οnclick="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

初识JavaScript,感觉整个人都不好了。。。相关推荐

  1. 我偷看了老板的微信分组,整个人都不好了…

    人生在世都是戏, 就连微信分组也入戏三分. 那天我不小心瞄了一眼老板的微信分组, 差点惊呆了-- 发现不加班的里面竟然有我的名字!Σ( ° △ °|||)︴ 吓得我赶紧把刚收拾好的书包放下了-- 随后 ...

  2. OSChina 周六乱弹 ——所以会魔法的人都是孤独的

    2019独角兽企业重金招聘Python工程师标准>>> [今日歌曲] @ 枯叶_听海 : <Hotel California>~ <Hotel California ...

  3. 我在快手总部的一天探访:发现所有人都变得紧张起来了

    来源:刺猬公社 | 作者:石灿 数据猿官网 | www.datayuan.cn 今日头条丨一点资讯丨腾讯丨搜狐丨网易丨凤凰丨阿里UC大鱼丨新浪微博丨新浪看点丨百度百家丨博客中国丨趣头条丨腾讯云·云+社 ...

  4. JavaScript权威Douglas Crockford:代码阅读和每个人都该学的编程

    作者:Peter Seibel 关于JavaScript Seibel:在程序学习之路上有哪些令你后悔的事情? Crockford:我了解一些语言,但却一直没有机会使用.我花了不少时间学习APL并了解 ...

  5. cesium three性能比较_硬金和千足金都是黄金,哪个比较好?为什么80%人都说硬金不好?...

    黄金是非常稳定的贵金属,自古到今,黄金都是富贵的象征,黄金也是非常稀有.珍贵的金属之一.由于原本黄金首饰是富贵人才干佩戴的首饰,现在生活水平提高了,很多人都购买得起黄金首饰.就在前几年,珠宝市场出现一 ...

  6. 总感觉自己什么都不会,做什么都做不好怎么办?

    明明做过很多事,明明会很多技能,为什么总感觉自己什么都不会?明明很认真做事,明明已经很仔细了,为什么做什么都做不好? 其实"什么都不会"和"什么都做不好"可以当 ...

  7. 从来不敷面膜的人_女人睡觉前,敷面膜洗还是不洗?很多人都做错了,难怪皮肤总不好...

    敷面膜是众多女孩子在晚上都会进行的一个护肤工作,大家都知道像一些明星几乎是每天都要敷一片面膜的,不过她们是因为长期话大浓妆才比较勤,我们一般工作的女孩子大约一周三次就可以了. 面膜可以让我们的皮肤迅速 ...

  8. 发现很多人的基础都不好

    加了一些C#的qq群,有一次提了一个很简单的问题,关于abstract class的(具体问题忘记了),很多人都搞不清楚.   还有一些所谓在做项目的,只是拖些控件,做个界面(界面还挺漂亮的),实际是 ...

  9. 每个人都能制作的简易版狂拍灰太狼小游戏(HTML+CSS+JavaScript)

    自制系列一完善版来了. 如果在制作过程中有任何问题你都可以私信我,我会一一答复你们的. 由于上一次发的进度条不是很完善,显得不美观,这次改进了进度条问题,使增强了游戏的体验感.制作过程很简单,每个人都 ...

最新文章

  1. 0x58 数据结构优化DP
  2. Python多线程学习(下)
  3. [转]卓越科技回应所谓的最牛,最受歧视的招聘
  4. 力扣 有序数组的平方
  5. 使用 MacBook Pro 的硬件重置功能解决故障
  6. 认真学习系列:《深入理解计算机系统》读书笔记
  7. 椭圆形画画简单图案_十招创意拯救不会画画的你
  8. AKKA:大数据下的并发编程模型
  9. FPGA实现cameralink解码
  10. 决策树生成算法流程图
  11. 手机型号云服务器,手机型号云服务器
  12. Window纯净系统安装详细教程
  13. 产品经理与工程师的换位思考
  14. Mysql RR级别下如何解决幻读
  15. maya中英文对照_Maya 2018 英汉速查手册
  16. SpannableString字体大小自适应
  17. 谷歌创始人拉里·佩奇不为人知的故事
  18. 银行网点服务认证_银行网点服务认证标准
  19. 关于成本核算方法、步骤、成本分析
  20. 技能兴鲁试题--可视化

热门文章

  1. 【python+selenium自动化】使用pytest+allure2完成自动化测试报告的输出
  2. PHP扩展开发(3)-config.m4
  3. 程序编译时书写Makefile注意事项一例
  4. Item 添加事件 list grally等
  5. Silverlight WCF RIA服务(十三)数据 3
  6. 小程序云开发搜索功能的实现正则_码code | 如何借助小程序云开发实现小程序支付功能...
  7. python 比赛成绩预测_大数据新研究:用六个月的跑步记录准确预测马拉松完赛成绩...
  8. SPU、SKU、ARPU
  9. 关于Loadrunner 错误解决
  10. svn redis和rabbitmq服务启动