游戏的分析：
（1）.看看如何通过按钮来控制mario的位置
（2）.设计相关的对象那个（Mario x,y）
要求：
1.mario碰到边界给一个提示；
2.mario可以去找另外一个物体
代码如下：（只实现上下左右移动功能）
html:
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="mario.css"></link>
<script languange="javascript" type="text/javascript" src="Mario.js"></script>
</head>
<body>
<table border="1px" class="ControlCenter">
<tr><td colspan="3">控制栏</td></tr>
<tr><td></td><td><input type="button" value="↑" οnclick="mario1.move(4)"/></td><td></td></tr>
<tr><td><input type="button" value="←" οnclick="mario1.move(3)"/></td><td>**</td><td><input type="button" value="→" οnclick="mario1.move(1)"/></td></tr>
<tr><td></td><td><input type="button" value="↓" οnclick="mario1.move(2)"/></td><td></td></tr>
</table>
<div class="gamediv">
<img src="Mario.PNG" id="mario" style="left:20px;
top:20px;"/>
</div>
</body>
</html>
***********************************************************************************************************8
css代码:
.ControlCenter{
border:1px solid red;
text-align:center;/*字对齐属性*/
}
.ControlCenter tr td{
border:1px solid yellow;
width:20px;
height:10px;
}
.gamediv{
width:300px;
height:300px;
background:blue;
position:absolute;/*这边记得要用absolute绝对定位，不然在其内的img会以body定位*/
}
#mario{
width:50px;
height:50px;
position:absolute;
left:20px;
top:20px;
}***********************************************************************************************************8
JS代码：
function mario(){
this.x=0;
this.y=0;
this.move=function(direct){
var mario=document.getElementById("mario");
switch(direct){
case 1:
//这时只能获取内联样式中的属性
var left=mario.style.left;
//获取的属性值是字符串类型，需要截取和转换
left=parseInt(left.substr(0,left.length-2));
//再转换回来
mario.style.left=(left+10)+"px";
break;
case 2:
var top=mario.style.top;
top=parseInt(top.substr(0,top.length-2));
mario.style.top=(top+10)+"px";
break;
case 3:
var left=mario.style.left;
left=parseInt(left.substr(0,left.length-2));
mario.style.left=(left-10)+"px";
break;
case 4:
var top=mario.style.top;
top=parseInt(top.substr(0,top.length-2));
mario.style.top=(top-10)+"px";
break;
}
}
}
var mario1=new mario();*构造函数：
基本用法：
function 类名（参数列表）{
this.属性值=参数值
}
举例：
//JSd代码：
function person(name,age){
this.name=name;
this.age=age;
}
//即在创建对象的时候直接就可以给名字和年龄
var p1=new person("小明",20);
window.alert(p1.name);
var p2=new person("小王",19);
window.alert(p2.age);2.在给一个对象初始化属性值的时候，也可以指定函数属性
举例：
//JSd代码：
function jisuan(a,b,opr){
if(opr=="+"){
return a+b;
}else if(opr=="-"){
return a-b;
}else if(opr=="*"){
return a*b;
}else{
return a/b;
}
}
function person(name,age,fun){
this.name=name;
this.age=age;
this.myfun=fun;
}
var p1=new person("小王",20,jisuan);
window.alert(p1.age);
window.alert(p1.myfun(2,3,"+"));
3.创建对象的有一种形式
如果一个对象比较简单，我们可以直接创建：
如：
var dog={name:'小明',age:8};
举例：
//JSd代码：
var dog={
name:'xiaoming',
age:8,
fun1:function(){window.alert("nihao");},
fun2:function(){window.alert("OK");}
};
window.alert(dog.constructor);
window.alert(dog.name+dog.age);
dog.fun1();
dog.fun2();
4.面向对象的进一步理解：
//JSd代码：
var dog={
name:'xiaoming',
fun1:function(){window.alert("nihao");},
fun2:function(){window.alert("OK");}
};
//循环列出dog对象的所有属性和方法 对象名【‘属性名’】
for(var key in dog){
window.alert(dog[key]);
}
//另外一个运用：
document.write("************当前浏览器window对象有的属性和方法***************************<br/>");
for(var key in window){
document.write(key+":"+window[key]+"</br>");
}5.面向对象编程的三大特性：
（1）.封装：
js提供有以下几种控制方法和属性的访问权限：
一。公开级别：对外公开；
二。私有级别：类本身可以访问，不对外公开；
举例：
//JSd代码：
function person(name,agei,sali){
this.name=name;//私有属性
var age=agei;//公开属性
var sal=sali;//私有属性
//在类中我们如何定义公开的方法（特权方法），私有方法（内部方法）
//如果我们希望操作私有的属性，则可用公开的方法实现
this.show=function(){
window.alert(age+" "+sal);
};
//私有方法，可以访问对象内部属性
function show2(){
window.alert(age+" "+sal);
}
}
var p1=new person("xiaownag",18,5000);
window.alert(p1.name);
p1.show();//这个可以执行
//p1.show2();这个没法执行
**
前面我们学习过，通过prototype给所有的对象添加方法，但是这种方式，不能取访问
私有变量和方法；
（2）继承：解决代码冗余的问题
举例：
//JSd代码：
//抽象出一个学生类，（即把中学生和小学生的共性取出）
function Stu(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+this.age);
}
}
function MidStu(name,age){
this.stu=Stu;//这边类似于普通成员函数添加
/* this.stu=function (name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+this.age);
}
}
*/
this.stu(name,age);//js实际上是通过对象冒充，来实现继承的；
}
function pipStu(name,age){
this.stu=Stu;
this.stu(name,age);
}
var midStu=new MidStu("xiaoming",20);
window.alert(midStu.name);
var pipStu=new pipStu("xiaowang",20);
window.alert(pipStu.name);PS:由于JS是动态语言，如果不执行，则不能实现继承效果；
可以通过对象冒充实现多继承；
**JS的重载和重写：
重载：js中不支持重载（即，不可以通过参数的个数来决定调用的哪个函数），
但是因为js本身支持可变参数，所以，可以看成是天然支持重载：
例如：
function abc(){
if(arguments.length==````){
```````
}else if(){````}
}**重写：子类可以重新写函数，来覆盖父类中的某个方法；
例如：
//JSd代码：
//抽象出一个学生类，（即把中学生和小学生的共性取出）
function Stu(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+this.age);
}
}
function pipStu(name,age){
this.stu=Stu;
this.stu(name,age);
//实现重写
this.show=function(){
window.write("pipStu.show()");
}
}
var midStu=new MidStu("xiaoming",20);
window.alert(midStu.name);
var pipStu=new pipStu("xiaowang",20);
window.alert(pipStu.show());
(4)多态：
所谓多态，就是指一个引用类型在不同情况下的多种状态；
在JAVA中多态是通过指向父类的引用，来调用不同子类中实现的方法
JS实际上是无态的，是一种动态语言，一个变量的类型是在运行的
过程中由JS引擎来决定的，所以说JS天然支持多态；
举例：
//JSd代码：
function Food(name){
this.name=name;
}
function bone(name){
this.food=Food;
this.food(name);
}
function fish(name){
this.food=Food;
this.food(name);
}
function Animal(name){
this.name=name;
}
function cat(name){
this.animal=Animal;
this.animal(name);
}
function dog(name){
this.animal=Animal;
this.animal(name);
}
function Master(name){
this.name=name;
this.feed=function(animal,food){
window.alert(this.name+"给"+animal.name+"喂"+food.name);
}
}
var dog=new dog("小狗");
var cat=new cat("小猫");
var fish=new fish("小鱼");
var bone=new bone("骨头");
var master=new Master("小明");
master.feed(dog,bone);
master.feed(cat,fish);
解释：
1.闭包与gc有关联的；
2.闭包实际上是涉及到一个对象的属性，何时被gc的处理问题；
3.怎么样才能对对象的属性形成一个闭包呢：（如下）
举例：
function A(){
var i=0;
function b(){
window.alert(i++);
}
return b;
}
A();//此时内存中i空间需要被处理
var c=A();//由于返回b给C，则不确定i什么时候还会被用，则不进行处理
c();//输出0
c();//输出1，证明i变量被闭包；
6.JS中的内部类
((1).javascript中本身有提供的一些，可以直接使用的类 这种类就是内部类
主要有8种：
Object/number/String/Array/Math/Boolean/RegExp/Date
(2).内部类分类：
从使用上来看，分为静态类和动态类：
静态类：
类名.属性名/方法；
比如：Math.abs(-12);//表示绝对值
动态类：
var 对象名=new 动态类（）
对象名.属性/方法
比如：//显示当前日期
var nowdate=new Date();
window.alert(nowdate.toLocalString());
1.Math类：提供常用的数学函数和常数：
//Math
//返回绝对值
window.alert(Math.abs(-12));
//对一个数向下取整
window.alert(Math.floor(4.5));
//对一个数四舍五入
window.alert(Math.ceil(4.5));
//对一个数向上取整
window.alert(Math.round(4.77));
//返回一个大于0小于1的16位小数位的数字
window.alert(Math.random());
//返回一个0~100的数
window.alert(Math.round(Math.random()));
//求x,y中较小的数
window.alert(Math.min(4,5));
//求x,y中较大的数
window.alert(Math.max(5,6));2.Date类：
提供日期和时间操作：
//Date的常用方法
//
var date=new Date();
window.alert(date.toLocaleString());
//获得年份
//出现兼容性问题，用getYear()会出问题
document.write(date.getFullYear());
//获得月份要加1（0~11）
document.write(date.getMonth()+1);
//获得一个月的某一天
document.write(date.getDate());
//获得一周中的某一天（0~6）星期天开始；
document.write(date.getDay());
//时
document.write(date.getHours());
//分
document.write(date.getMinutes());
//秒
document.write(date.getSeconds());3.String类：
//JSd代码：
var str="abc12345";
//获得字符串长度
window.alert(str.length);
//split 用于分隔为字符串数组；
var str2="abc def oop";
var arr=str2.split(" ");
window.alert(arr);
//substr提取从start下标开始的指定书目的字符
var str3="abcdef";
window.alert(str3.substr(1,3));
//substring提取字符串中介于两个小标之间的字串，包括第一个数，但不包括最后面一个
window.alert(str3.substring(1,3));
//charAt（）返回指定位置的字符
var str4="abcef";
window.alert(str4.charAt(3));
//indexOf()返回某个字符串值在该字串中首次出现的位置
var str5="ab cd dd,tt";
window.alert(str5.indexOf("ab",0));
4.Array类：
对数组进行操作；
var myarr=new Array();
//动态添加数据
myarr[0]="sp";
myarr[1]=22；
//输出元素
window.alert(myarr.length+" "+myarr);
myarr.pop();//出栈；
window.alert(myarr.length+" "+myarr);
myarr.push("abc");//入栈；
window.alert(myarr.length+" "+myarr);5.boolean类：动态类：
1.toString();
2.valueOf();
6.Number类：动态类
1.toString(radix);//radix表示几进制
var a=100;
a=a.toString();
2.toFixed(num);//把数字转为字符串，并保留num位小数
***************************************************
JS事件驱动：
1.原理图：（附件图事件监听原理图）
2.事件分类：
（1）.鼠标事件
（2）.键盘事件
（3）.HTML事件
（4）.其他事件
举例：
1.点击事件（获取鼠标坐标和当前时间）
<!--HTML代码-->
<body οnclick="getMousePosition(event)">
<input type="button" value="点击获取时间" οnclick="getNowTime()"/>
</body>
//JSd代码：
function getNowTime(){
var date=new Date();
window.alert(date.toLocaleString());
}
function getMousePosition(e){
window.alert("x= "+e.clientX+"y= "+e.clientY);
}
2.通过修改内联style的属性来改变样式属性：
<!--HTML代码-->
<body>
<div class="colorDiv" id="colorDiv1" style="background-color:red;width:300px;height:300px;"></div>
<!--这边需要注意的是两个按钮绑定同一个事件处理函数-->
<!--通过传一个自身对象作为处理事件对象来判断当前事件对象-->
<input type="button" value="红色" οnclick="setcolor(this)"/>
<input type="button" value="黑色" οnclick="setcolor(this)"/>
</body>
//JSd代码：
function setcolor(e){
var div=document.getElementById("colorDiv1");
if(e.value=="红色"){
div.style.backgroundColor="red";
}else if(e.value=="黑色"){
div.style.backgroundColor="black";
}
}<!--HTML代码-->
<body>
<div class="colorDiv" id="colorDiv1"></div>
<!--这边需要注意的是两个按钮绑定同一个事件处理函数-->
<!--通过传一个自身对象作为处理事件对象来判断当前事件对象-->
<input type="button" value="红色" οnclick="setcolor(this),test(this)"/>
<input type="button" value="黑色" οnclick="setcolor(this),test(this)"/>
</body>
//JSd代码：
function setcolor(e){
//获取这个网页中的第几个css样式表文件（因为有可能引入多个CSS文件）（下标从0开始）
//但是注意在不同浏览器下获取的方式有些不同，一般采用这两种
//1：document.styleSheets[0].cssRules
//2:document.styleSheets[0].rules
//3：利用？ ：来实现兼容问题解决
var cssRules=document.styleSheets[0].cssRules?document.styleSheets[0].cssRules:document.styleSheets[0].rules;
//得到样式表后还需要通过遍历查找到对应选择器下的样式
var style1;
for(var i=0;i<cssRules.length;i++){
window.alert("aa");
//查找在样式表中通过selectorText来查找相应的选择器；
if(cssRules[i].selectorText==".colorDiv"){
style1=cssRules[i];
}
}
if(e.value=="红色"){
//根据具体选择器下的样式选择属性
style1.style.backgroundColor="red";
}else if(e.value=="黑色"){
style1.style.backgroundColor="black";
}
}
function test(e){
window.alert("一个事件可以被多个事件函数监听");
}
**
常用的几个事件：
window有三个小事件：
onload 页面打开；
onbeforeunload 关闭页面前
onunload 关闭页面
oncontexmenu 是否按右键跳出菜单
onselectstart 是否可选定页面信息
举例：
<!--HTML代码-->
<body οnlοad="testOnload()" onbeforeunLoad="testOnbeforeunload()" οncοntextmenu="return testOncontextmenu()" onselectstart="return testOnselectstart()">
<div>div</div>
<input type="text" οnfοcus="testOnfocus()" />
</body>
//JSd代码：
function testOnload(){
window.alert("测试onload方法");
}
function testOnfocus(){
window.alert("测试onfocus方法");
}
//在IE下有用，其他浏览器不兼容
function testOnbeforeunload(){
window.alert("测试testOnbeforeunload方法");
}
function testOncontextmenu(){
window.alert("测试testOncontextmenu方法");
return false;
}
function testOnselectstart(){
window.alert("测试testOnselectstart方法");
return false;
}
1266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
