学习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...还想请教园中各位大神，小哥跪谢！！！！
新闻热点
疑难解答
