学习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 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...还想请教园中各位大神，小哥跪谢！！！！

初识JavaScript，感觉整个人都不好了。。。的更多相关文章

  1. 自从升级到macOS后，整个人都不好了

    电脑一直莫名的随机卡死,各种软件都出现了一些崩溃和不稳定的情况. Siri就是个笑话,启用后就开始索引本地硬盘,不管你有没有正在工作:直到你启动Siri,会暂停一下,然后就算是你开在哪不动,过两分钟, ...

  2. 《前端之路》之 初识 JavaScript

    01 初识 JavaScript 作为在码农圈混迹了 四五年的老码畜来说,学习一门新的语言,就仿佛是老司机开新车一样 轻车熟路. 为什么会这么快呢? 因为各种套路啊- 任何一种计算机语言的最开始都是和 ...

  3. 前端笔记知识点整合之JavaScript（一）初识JavaScript

    一.JavaScript简介 1.1网页分层 web前端一共分三层: 结构层 HTML         : 负责搭建页面结构 样式层 CSS          : 负责页面的美观 行为层 JavaSc ...

  4. 前端笔记之JavaScript（一）初识JavaScript

    一.JavaScript简介 1.1网页分层 web前端一共分三层: 结构层 HTML         : 负责搭建页面结构 样式层 CSS          : 负责页面的美观 行为层 JavaSc ...

  5. .Net程序员面试 每个人都应知道篇 (回答Scott Hanselman的问题)

    昨天回答了Scott Hanselman在他清单上关于C#那部分的题目,.Net 程序员面试 C# 语言篇 (回答Scott Hanselman的问题),今天接着回答他在清单上列出的"每个写 ...

  6. 所有人都说Python 简单易学，为何我觉得难？

    来谈谈心 记得刚学Python的时候,几乎所有人都说Python 简单易学,而对于编程零基础,只掌握Word和Excel的人来说,感觉真的好难. 学习之前网上的教材看了,Python的书也看了,包括& ...

  7. 身处IT的你对身边人都有哪些影响

    前不久,跟外甥一起吃饭:他明年就要中考了,我就想,这马上就到人生的关键路口了,看他自己对将来有什么想法没:就问了句:勇勇,你以后想学习哪些方面的东西或者想从事什么工作呢?他简单的说了句:我要跟你一样学 ...

  8. 笔记一、初识 Javascript

    一.初识 Javascript javascript是一种专为与网页交互儿设计的脚本语言.由三部分组成:ECMAScript  (ECMA-262定义) : 提供核心语言功能文档对象模型(DOM): ...

  9. Day15 HTML补充、初识JavaScript

    一.上节回顾 上节回顾: HTML 头部信息:编码.title.style.link(导入css文件) 身体: 内联 块级 --->inline-block(既有内联效果又有块级效果) a标签: ...

随机推荐

  1. iOS开发之性能优化

    1.避免过于庞大的XIB 当加载XIB的时候把所有的东西都放在了内存里,包括任何的图片:如果有一个不会即刻用到的view,就会浪费宝贵的内存资源了. 当加载一个引用了图片或者声音资源的nib时,nib ...

  2. Java和PHP在Web开发方面的比较

    比较 PHP和JSP这两个Web开发技术,在目前的情况是其实是比较PHP和Java的Web开发.以下是我就几个主要方面进行的比较: 一. 语言比较 PHP是解释执行的服务器脚本语言,首先php有简单容 ...

  3. 自写Date工具类

    以前写项目的时候总是在使用到了时间的转换的时候才在工具类中添加一个方法,这样很容易导致代码冗余以及转换的方法注释不清晰导致每次使用都要重新看一遍工具类.因此整理出经常使用的一些转换,用作记录,以便以后 ...

  4. codeforces 几道题目

    BZOJ挂了....明天就要出发去GDKOI了....不能弃疗. 于是在cf水了几道题, 写写详(jian)细(dan)题解, 攒攒RP, 希望GDKOI能好好发挥.......  620E. New ...

  5. sffs

    因为微软收购了Skype,就减少了对linux版软件的支持,官方下载页面已找不到了.只有这一个地址了.要下的尽早.http://download.skype.com/linux/skype-ubunt ...

  6. ZRender源码分析6：Shape对象详解之路径

    开始 说到这里,就不得不提SVG的路径操作了,因为ZRender完全的模拟了SVG原生的path元素的用法,很是强大. 关于SVG的Path,请看这里: Path (英文版) 或者 [MDN]SVG教 ...

  7. web 之MVC

    MVC 把一个应用的输入.处理.输出流程按照Model, View, Controller 的方式进行分离,这样一个应用被分为三层:模型层.视图层.控制层. 1.View 2.Controller 在 ...

  8. modbus rtu 协议转DLT645-2007和DLT645-1997电表协议转换器定制，

    现场会碰到现场数据为Modbus协议,但是后台系统为DLT645协议系统,本模块支持将工业ModbusRtu协议转换为电表国标协议DLT645协议,支持1997和2007俩种标准,只需要进行简单的配置 ...

  9. jquery.lazyload.js图片延迟加载(懒加载)--转载

    一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...

  10. 可爱的 Python : Python中函数式编程，第一部分

    英文原文:Charming Python: Functional programming in Python, Part 1 摘要:虽然人们总把Python当作过程化的,面向对象的语言,但是他实际上包 ...