我已经创建了Square作为一个对象,并给它提供了大小和旋转的原型,当我创建新的square1和square2并对它们调用rotate时,只有最后创建的div旋转是一个正方形,两者都需要旋转,"我认为这可能与className Square有关,但需要帮助修复它。两个Square都需要旋转。
谢谢
// global variables //
var angle = 0; //initialize angle
// Square Object //
var Square = function() {
square = document.createElement('div');
square.className = 'square';
document.body.appendChild(square); //div created div name class square
}
// prototype size of Square
Square.prototype.size = function(width,height,margin) {
square.style.width = width + 'px';
square.style.height = height + 'px';
square.style.margin = margin + 'px';
}
//prototype rotate of Square
Square.prototype.rotate = function rotA() {
angle = (angle + 1)%360;
square.style.transform = "rotate(" + angle + "deg)"
window.requestAnimationFrame(rotA);
}
// create new square -------------
var square1 = new Square();
square1.size(250,250,250);
var square2 = new Square();
square2.size(500,500,125)
square1.rotate();
square2.rotate();
请参阅此处的fiddle:https://jsfiddle.net/gustav1105/c41fLbh0/
您需要在函数中使用this
关键字。并且从window.requestAnimationFrame
调用时需要bind
rotate
函数
// Square Object //
var Square = function() {
this.angle = 0;
this.square = document.createElement('div');
this.square.className = 'square';
document.body.appendChild(this.square); //div created div name class square
}
// prototype size of Square
Square.prototype.size = function(width,height,margin) {
this.square.style.width = width + 'px';
this.square.style.height = height + 'px';
this.square.style.margin = margin + 'px';
}
//prototype rotate of Square
Square.prototype.rotate = function() {
this.angle = (this.angle + 1)%360;
this.square.style.transform = "rotate(" + this.angle + "deg)"
window.requestAnimationFrame(this.rotate.bind(this));
}
// create new square -------------
var square1 = new Square();
square1.size(250,250,250);
var square2 = new Square();
square2.size(500,500,125);
square1.rotate();
square2.rotate();
.square {
position: absolute;
left:0;
top:0;
border: 1px solid black;
}
检查一下这个fiddle,它不像你希望的那样面向对象,但如果你没有找到任何其他解决方案,你可以使用它
// global variables //
var angle = 0; //initialize angle
// Square Object //
var Square = function() {
var square = document.createElement('div');
square.className = 'square';
square.style.backgroundColor = "#000";
document.body.appendChild(square); //div created div name class square
return square;
}
// prototype size of Square
Square.size = function(square, width,height,margin) {
square.style.width = width + 'px';
square.style.height = height + 'px';
square.style.margin = margin + 'px';
}
//prototype rotate of Square
Square.rotate = function rotA(square) {
angle = (angle + 1)%360;
square.style.transform = "rotate(" + angle + "deg)"
window.requestAnimationFrame(function(){ rotA(square) });
}
// create new square -------------
var square1 = new Square();
console.log(square1);
Square.size(square1,25,25,25);
var square2 = new Square();
Square.size(square2,25,25,25)
Square.rotate(square1);
Square.rotate(square2);
正如@gurvinder372所建议的,正方形并不是为每个square对象本地定义的,代码只是"忘记"了第一个实例。
请使用this
关键字来引用原型扩展内部的实例变量。
这是一个JSFiddle