学习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. linq to sql简单使用

    1.新建一个winform项目. 2.添加一个Linq to Sql 类,命名为Northwind 3.打开服务器资源管理器,将表拖动到linq to sql 类,实体类就由Vs生成了 4.实例化Da ...

  2. Array数组方法的总结

    添加元素: 1. push(arg1,arg2,arg3....)  向数组的尾部添加元素,返回值是数组的长度. 2.unshift(arg1,arg2,arg3....) 向数组的头部添加元素,返回 ...

  3. SQL语句优化(转摘)

    (1) 选择最有效率的表名顺序(只在基于规则的seo/' target='_blank'>优化器中有效): ORACLE 的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最 ...

  4. 【JS】导出table到excel，同时兼容FF和IE

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HDU 1829 - A Bug's Life

    Problem Description Background Professor Hopper is researching the sexual behavior of a rare species ...

  6. 【noip2012提高组】国王游戏

    恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右 手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这 n 位大臣排 成一排,国王站在队伍的最前面. ...

  7. juce Justification 分析

    很简单的一个类,一个rect放置在另一个rect中如何放置.只是没有考虑边距等,估且认为是在外层作考虑吧.然后认为是外框比内框大,所以外层怕是要进行检查才行 #ifndef JUCE_JUSTIFIC ...

  8. Prim算法（普里姆算法）

    描述: 一个连通图的生成树是指一个极小连通子图,它含有图中的全部顶点,但只有足以构成一棵树的 n-1 条边.我们把构造连通网的最小代价生成树成为最小生成树.而Prim算法就是构造最小生成树的一种算法. ...

  9. Mysql安全机制

    在mysql下mysql库中有6个权限表 mysql.user 用户字段,权限字段,安全字段,资源控制字段 mysql.db . mysql.host 用户字段,权限字段 mysql.tables_p ...

  10. 基于TcpDump和pcap文件分析的Android平台网络抓包程序设计与实现【随便】

    一.考虑使用Tcpdump,将抓到的包保存到cap文件中,然后手动分析.参考资料:1. http://www.cnblogs.com/tt-0411/archive/2012/09/23/269936 ...