Wil*_*iam 6 html javascript oop class
这是我到目前为止所得到的,它根本不起作用:(我的播放器类中的所有变量都为null,并且永远不会调用更新.
我的意思是编程类,而不是css类.IE不是(.movingdiv {color:#ff0000;})
<!DOCTYPE html>
<html lang="en">
<head>
<title>Class Test</title>
<meta charset="utf-8" />
<style>
body { text-align: center; background-color: #ffffff;}
#box { position: absolute; left: 610px; top: 80px; height: 50px; width: 50px; background-color: #ff0000; color: #000000;}
</style>
<script type="text/javascript">
document.onkeydown=function(event){keyDown(event)};
document.onkeyup=function(event){keyUp(event)};
var box = 0;
function Player () {
var speed = 5;
var x = 50;
var y = 50;
}
function update() {
box.style.left = this.x + "px";
box.style.top = this.y + "px";
box.innerHTML = "<h6 style=\"margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;\">X: "+ this.x + "<br /> Y: " + this.y + "</h6>";
}
var player = new Player();
var keys = new Array(256);
var i = 0;
for (i = 0;i <= 256; i++){
keys[i] = false;
}
function keyDown(event){
keys[event.keyCode] = true;
}
function keyUp(event){
keys[event.keyCode] = false;
}
function update(){
if(keys[37]) player.x -= player.speed;
if(keys[39]) player.x += player.speed;
player.update();
}
setInterval(update, 1000/60);
</script>
</head>
<body>
<div id="box" ></div>
<script type="text/javascript">
box = document.getElementById('box');
box.innerHTML = "<h6 style=\"margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;\">X: "+ player.x + "<br /> Y: " + player.y + "</h6>";
</script>
</body>
</html>
编辑:好吧,我想我搞砸了.我第一次尝试上课时似乎搞砸了.重试后,我似乎能够在Meders帖子中使用"1 Using a function".
真正的问题似乎是javascript在我的实际代码中到达这一行时不知道该怎么做:
box.style.background-position = "" + -(this.frame * this.width) + "px " + -(this.state * this.height) + "px";
我放的时候似乎也会窒息
box.style.background-color
所以我现在需要回答的问题是如何在javascript中设置一个样式变量,名称中带有" - ".我会在一秒钟内发布测试
Jan*_*hek 13
根据这篇文章,有三种方法可以在JavaScript中定义一个类:
1使用功能
例:
function Apple (type) {
this.type = type;
this.color = "red";
this.getInfo = getAppleInfo;
}
function getAppleInfo() {
return this.color + ' ' + this.type + ' apple';
}
var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());
2使用JSON
var apple = {
type: "macintosh",
color: "red",
getInfo: function () {
return this.color + ' ' + this.type + ' apple';
}
}
apple.color = "reddish";
alert(apple.getInfo());
3单身使用功能
var apple = new function() {
this.type = "macintosh";
this.color = "red";
this.getInfo = function () {
return this.color + ' ' + this.type + ' apple';
};
}
apple.color = "reddish";
alert(apple.getInfo());
将var使得私有变量,用做前缀this,而不是在构造函数:
function Player () {
this.speed = 5;
this.x = 50;
this.y = 50;
var pri = 'private';
this.update = function() {
if(keys[37]) this.x -= this.speed;
if(keys[39]) this.x += this.speed;
}
}
var player = new Player;
alert( player.speed ) // should alert 5
alert( player.pri ) // should fail or say undefined
你也可以......
var player = {
speed: 5,
x:50,
y:50,
update: function() {
// code
}
}
然后摆脱new Player和Player构造函数.