纵有疾风起
人生不言弃
首页 > 资讯 > 新闻 > 正文

HTML 学习笔记 May 11，2017 构造函数、成员函数详解、object类、闭包、成员函数再说明、聪明的猪小练习、js超级玛丽小游戏、js面向对象的进一步说明

2020-08-25 分类：新闻 阅读(258) 评论(0) 扫描二维码 隐藏侧边

HTML 学习笔记 May 11，2017 构造函数、成员函数详解、object类、闭包、成员函数再说明、聪明的猪小练习、js超级玛丽小游戏、js面向对象的进一步说明

function Person () {
this.name = “小明”;
this.age = 900;
}
var p1 = new Person();
p1.abc = function show1() {
window.alert(“hello”+this.name);
};
p1.abc(); // 打印出来 hello小明
window.alert(p1.abc); // 打印出来 function show1() {
//window.alert(“hello”+this.name);
//} this.name 不会直接赋值

第二种函数构造方法：
function 类名 （） {
this.属性；
}

var 对象名 = new 类名（）；
function 函数名 （）{
// 执行
}

对象名.属性名 = 函数名； // 这样就相当于把函数赋给 对象名.属性名，此时属性名就表示一个函数。

第二种：
对象名.属性名 = function （参数列表） {
// 代码
}；

调用
对象名.属性名（实际参数）；

function Person() {
this.name = “abc”;
this.age = 900;
this.abc = function (v1,v2) {
window.alert(this.name + ” ” + this.age + ” ” + v1 + ” ” + v2);
}
}
var p1 = new Person();
p1.abc(); // 打印出来 abc 900 undefined undefined
p1.abc(“北京”,”天津”); // 打印出来 abc 900 北京 天津
var p2 = new Person();
window.alert(p1.abc); // 打印出来 function () {window.alert(‘ok’);}
window.alert(p2.abc); // 打印出来 function (v1,v2) {
// window.alert(this.name + ” ” + this.age + ” ” + v1 + ” ” + v2);
//}

添加属性，调用是同一个地址
function Dog() {

}
// 使用prototype[类] 去绑定一个函数给shout
Dog.prototype.shout = function () {
window.alert(‘小狗’);
}
var dog1 = new Dog();

dog1.shout();
var dog2 = new Dog();
dog2.shout(); // 这里OK
window.alert(dog1.shout==dog2.shout); // 这里打印出来 true (比较的是地址)

// 扩展
var dog3 = new Dog();
var dog4 = new Dog();
var dog5 = dog4;
window.alert(“dog3==dog4″+(dog3==dog4)); // 打印出来 dog3==dog4false
window.alert(“dog4==dog5″+(dog4==dog5)); // 打印出来 dog4==dog5true

① 如果 == 号的两边都是字符串的时候，则比较内容是否相等
② 如果 == 两边是数字，则比较数字大小是否相等
③ 如果 == 两边是 对象 或者 对象函数，则比较地址是否相等

var i = new Number(10);
// 我们可以给类添加方法
Number.prototype.add = function (a) {
return this+a;
}
window.alert(i.add(10).add(30)); // 这里打印输出 50

var dog = {name:’小狗’,age:8};
window.alert(dog.constructor); // function Object() { [native code] }
window.alert(dog.name); // 小狗

● 超级玛丽
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>

<link href=”css/Mario.css” type=”text/css” rel=”stylesheet” />
<script language=”JavaScript” src=”js/Mario.js”></script>

<title>Mario小游戏</title><script language="javascript" type="text/javascript">    <!--

// –>

</script>

</head>
<body>
<div class=”gamediv”>

HTML 学习笔记 May 11，2017 构造函数、成员函数详解、object类、闭包、成员函数再说明、聪明的猪小练习、js超级玛丽小游戏、js面向对象的进一步说明插图

</div>
<table class=”controlcentes”>
<tr><td colspan=”3″>游戏键盘</td></tr>
<tr><td></td><td><input type=”button” value=”↑” onclick=”mario.move(0)”/></td><td></td></tr>
<tr><td><input type=”button” value=”←” onclick=”window.mario.move(3)” /></td><td></td><td><input type=”button” value=”→” onclick=”window.mario.move(1)” /></td></tr>
<tr><td><input type=”button” onclick=”test()” value=”测试” /></td><td><input type=”button” value=”↓” onclick=”window.mario.move(2)” /></td><td></td></tr>
</table>

<div id=”div6″ style=”width: 450px;”>
div2
</div>

</body>
</html>

● CSS 代码部分
/游戏区域/
.gamediv {
width: 500px;
height: 400px;
background-color: pink;
position: absolute;
top:0;
left:0;
}

/游戏控制中心 表格样式/
.controlcentes {
width: 200px;
height: 200px;
border: 1px solid red;
position: absolute;
top: 400px;
left:0;
}

mymario {

}

div6 {

width: 450px;height: 200px;background-color: green;left: 66px;top: 600px;position: absolute;

}
● JS 代码部分
/**

  • Created by konghuari on 5/11/17.
    */
    // 设计 Mario 类
    function Mario() {
    this.x = 50;
    this.y = 50;

    // 向上移动 0->上 1->右 2->下 3->左
    this.move = function (direct) {
    // 这里是为了改变 img 的 left 和 top, 我们需要得到 img 元素(元素)
    var mymario = document.getElementById(‘mymario’);

     switch (direct) {     case 0:         // 向上         var top = mymario.style.top;         top = parseInt(top.substr(0,top.length - 2));         mymario.style.top = (top - 10) + "px";         break;     case 1:         // 向右         // 这里是为了改变 img 的 left 和 top, 我们需要得到 img 元素(元素)         //var mymario = document.getElementById('mymario');         var left = mymario.style.left;         left = parseInt(left.substr(0,left.length - 2));         mymario.style.left = (left + 10) + "px";         break;     case 2:         // 向下         var top = mymario.style.top;         top = parseInt(top.substr(0,top.length - 2));         mymario.style.top = (top + 10) + "px";         break;     case 3:         // 向左         var left = mymario.style.left;         left = parseInt(left.substr(0,left.length - 2));         mymario.style.left = (left - 10) + "px";         break; }

    }
    }

//创建 Mario 对象
var mario = new Mario();

//测试 怎么拿到 css 里边的数据
function test() {
var divwidth = document.getElementById(“div6”);
window.alert(divwidth.offsetLeft);

}

添加属性新方法
var dog = {name:’小狗’,age:8,
fun1:function(){window.alert(‘hello word’)},
fun2:function(){window.alert(‘OK!’)}};
window.alert(dog.constructor); // function Object() { [native code] }
window.alert(dog.fun1); // function(){window.alert(‘hello word’)}
dog.fun2(); // OK!

var dog = {name:’hello’};
function test() {
window.alert(this.name);
}
test(); // 打印出 “”
window.test(); // 打印出 “”
test.call(dog); // 打印出 hello ==>dog.test();
var name = “doubi”;
test().call(window); // 打印出 doubi

函数名.call(对象实例);
// 这样调用,该函数的 this 就只是 对象实例.

var dog = {name:’小明’,sayHello: function (a,b) {window.alert(“结果=”+(a+b));}};
// 循环列出 dog 对象的所有属性和方法
for (var key in dog) {
window.alert(dog[key]);// 打印出 小明 function (a,b) {window.alert(“结果=”+(a+b));}
}

document.write(“当前浏览器 window 对象有 属性和方法
“);
for (var key in window) {
document.writeln(key + “:” + window[key] + “
“); // 打印出来的东东太多啦,O(∩_∩)O哈哈~
}

文章转载于:https://www.jianshu.com/p/24b8663c98a0

原著是一个有趣的人,若有侵权,请通知删除

AD：【更多看点】学生“冒死”偷拍老师，当看到最后一个，网友：这谁能顶得住

 收藏 (0)
未经允许不得转载：起风网 » HTML 学习笔记 May 11，2017 构造函数、成员函数详解、object类、闭包、成员函数再说明、聪明的猪小练习、js超级玛丽小游戏、js面向对象的进一步说明
分享到： 生成海报

vicky

相关推荐

评论 抢沙发

评论前必须登录！

立即登录