学习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. 键盘事件之keydown keypress keyup区别

    经过测试,显然事件执行的顺序是: keydown->keypress->keyup. 但是连续按一个按键的话,会一直触发:keydown keypress.直到你提起按键,会触发keyup ...

  2. android代码集锦

    调用root权限的应用: /** * 执行Command命令的函数 * * @param command 命令 * @return 执行结果 */ public static boolean runR ...

  3. Arduino周边模块：传感器部件(温敏、光敏、湿敏)

    Arduino周边模块:传感器部件(温敏.光敏.湿敏) Arduino周边模块:传感器部件(温敏.光敏.湿敏) Arduino的模数转换 对于Arduino来说,它只认识数字量,模拟量对其来说就是一门 ...

  4. Java-Poi 读取excel 数据

    一直想着使用java操作excel,但有时各种原因一直没有实现.由于工作无意间做了个其他demo,为了进一步发散就涉及到了使用excel,为此开始正式接触POI,虽然限制不是很了解POI,但是通过查阅 ...

  5. 算法分析-堆排序 HeapSort 优先级队列

    堆排序的是集合了插入排序的单数组操作,又有归并排序的时间复杂度,完美的结合了2者的优点. 堆的定义 n个元素的序列{k1,k2,…,kn}当且仅当满足下列关系之一时,称之为堆. 情形1:ki < ...

  6. Flex中如何通过设置GridLines对象的horizontalAlternateFill样式交错显示LineSeries图表背景颜色的例子

    原文 http://blog.minidx.com/2008/11/27/1652.html 接下来的例子演示了Flex中如何通过设置GridLines对象的horizontalAlternateFi ...

  7. GDOI模拟赛Round 1

    GDOI模拟赛Round 1 数据结构 题目描述:给出一个长度为\(n\)的序列,支持两种操作: 1.对某段区间都加上一个数 2.给出\(p.k\),求下面表示式对\((10^9+7)\)取模 \[\ ...

  8. 用Python写的一个多线程机器人聊天程序

    本人是从事php开发的, 近来想通过php实现即时通讯(兼容windows).后来发现实现起来特别麻烦, 就想到python.听说这家伙在什么地方都能发挥作用.所以想用python来做通讯模块...所 ...

  9. 杭电oj1326 Box of Bricks

    Tips:先求出平均数再分别计算各数与平均数的差相加,注意两个测试结果之间要空一行 #include<iostream> using namespace std; int main() { ...

  10. aix6.1 openssh安装

    环境: IBM AIX6.1 1.下载(可以直接从附件中下载): openssl IBM官方网站下载:https://www14.software.ibm.com/webapp/iwm/web/reg ...