最近我家兔小白要转行学javascript了,不过又懒得抱着大本的书死啃语法,因而只好为兔宝写篇教程了。javascript
生物书上讲,大段的文字对兔子有催眠效果,所以本教程争取以有趣的示例为主,防止兔子睡着。没有兔子基因的物种以及高手们请绕道,由于本教程真的不会写出什么新鲜东西来,嘿嘿。html
先上个小游戏吧,名字叫“追逐兔小白的兔小灰”,游戏中移动鼠标就能移动兔小白,而兔小灰会不停的追兔小白:java
上代码喽,兔小白请认真阅读,不要睡着:浏览器
- <html>
- <head>
- <title>
- 追逐兔小白的兔小灰
- </title>
- <style>
- .bunny{
- position:absolute;
- width:91px;
- height:152px;
- }
- </style>
- <script>
- /*
- * 定义一个名叫init的方法
- * 在body的onload时调用它,咱们用它来初始化一些东西
- */
- function init(){
- //setInterval方法用于设定一个定时器,它会每隔必定时间执行你指定的方法
- //第一个参数是一个function,它就是每次定时器触发时须要执行的代码
- //第二个参数50表示每50毫秒执行一次
- window.setInterval(function(){
- //document.getElementById表示按id获取文档中的指定元素
- var white = document.getElementById("white"),
- gray = document.getElementById("gray");
- //为了让兔小灰追着兔小白,咱们要判断二者的位置
- //若是兔小灰当前的x坐标(offsetLeft)大于兔小白的,就把兔小灰向左移动一点(减5个像素),反之就向右移动
- if(gray.offsetLeft > white.offsetLeft)
- gray.style.left = gray.offsetLeft - 5;
- else if(gray.offsetLeft < white.offsetLeft)
- gray.style.left = gray.offsetLeft + 5;
- //同理处理纵坐标
- if(gray.offsetTop > white.offsetTop)
- gray.style.top = gray.offsetTop - 5;
- else if(gray.offsetTop < white.offsetTop)
- gray.style.top = gray.offsetTop + 5;
- }, 50);
- }
- /*
- * 定义一个名叫bunnyRun的方法
- * 在body的onmousemove时调用它,咱们用它来移动兔小白
- */
- function bunnyRun(){
- //把兔小白的x与y坐标设定成与鼠标当前位置一致,这样就能用鼠标移动兔小白了
- var white = document.getElementById("white");
- white.style.left = event.clientX;
- white.style.top = event.clientY;
- }
- </script>
- </head>
- <!-- onload事件在文档加载完成时触发,onmousemove事件在鼠标于body上移动时触发 -->
- <body onload="init()" onmousemove="bunnyRun()">
- <!-- 这两张图片分别表明兔小白和兔小灰 -->
- <img class="bunny" id="white" src="white.gif" />
- <img class="bunny" id="gray" src="gray.gif" />
- </body>
- </html>
若是兔宝看不太懂也没有关系,第一篇教程只是让你有个直观的概念,下节课开始才正式讲语法。ide
从这个例子中咱们能够看出如下几点:spa
一、javascript和html结合得比较紧密,事实上,能够说javascript就是为了增长网页表现力而专门发明的语言,虽然在其它领域它也颇有用武之地,不过仍是html中用得最多;xml
二、javascript不须要编译,上面的文件扔到浏览器里就能跑了,由于javascript是解释型的语言,浏览器都内嵌了js解释器;htm
三、javascript中用var定义变量(不区分类型),用function定义方法;blog
四、javascript中有事件的概念,在指定事件发生时能够触发用户指定的方法;教程
OK,第一讲就到这里了,给兔小白留个做业:示例中兔小灰靠近兔小白的时间常常会抖啊抖的,想一想是为何呢?