学习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. 基本文件的I/O

    System.IO命名空间包含允许在数据流和文件上进行同步,异步及写入的类型.文件是一些永久存储及具有特定顺序的字节组成的一个有序的,具有名称的集合.与文件有关的概念是目录路径和磁盘存储等.流提供了一 ...

  2. 在CSDN上看到的一个过滤方法，感觉还不错

    /// <summary> /// 把字符串中包含的敏感词替换成别的关键字 /// </summary> /// <param name="s"> ...

  3. 浏览器的重绘(repaints)与重排(reflows)

    转:http://www.css88.com/archives/4991#more-4991 在项目的交互或视觉评审中,前端同学常常会对一些交互效果质疑,提出这样做不好那样做不好.主要原因是这些效果通 ...

  4. Jquery实现鼠标hover图片遮罩弹出提示层特效

    1.引入JS文件和所需要的样式文件 2.简单的写上以下18行代码就可以实现了 $(document).ready(function() { $("div.tip_trigger a.img& ...

  5. 解决水晶报表在IIS7下的权限问题。

    http://52live.blog.sohu.com/69025059.html 解决水晶报表在IIS7下的权限问题. 有些事情真是“踏破铁鞋无觅处,得来全不费功夫”!困扰了我一段时间的水晶报表在I ...

  6. 整数转字符与字符转整数的C系统函数

    atoi (表示 alphanumeric to integer)是把字符串转换成整型数的一个函数 http://baike.baidu.com/link?url=VTP54JT5-EY5TL0GFf ...

  7. visual assist常用快捷键

    转自http://my.oschina.net/u/211101/blog/127822 一些打开啊新建就不说了…… //先来个我自己最喜欢的,经常不用,老忘记,以前eclipse最喜欢这个快捷键了 ...

  8. Qt标题栏图标和运行程序图标设置

    一.标题栏图标 1.*.qrc资源文件中添加图片 2.添加代码 setWindowIcon(QIcon(":/images/paste.png")); //设置窗口上的图标,需要在 ...

  9. Binder的非正常消亡时的重置方法

    一.原理 当Binder非正常消亡的时候,会导致远程调用失败,这样客户端功能就会受到影响. 解决:给Binder设置一个死亡代理,当Binder死亡时,我们就会收到通知,这个时候可以重新发起连接. 二 ...

  10. 修改vim默认tab为4个空格与显示行号

    添加一个.vimrc配置文件即可. 在home目录下 vim .vimrc # 添加如下内容 set ts=4 set expandtab set nu 然后再次用vim打开任意文件,就看见效果啦!