如何在Javascript中创建一个类?

前端之家收集整理的这篇文章主要介绍了如何在Javascript中创建一个类?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我到目前为止所得到的,它根本不起作用:(我的播放器类中的所有变量都为null,并且永远不会调用更新.

我的意思是编程类,而不是css类. I.E.不是(.movi​​ngdiv {color:#ff0000;})

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Class Test</title>
  5. <Meta charset="utf-8" />
  6. <style>
  7. body { text-align: center; background-color: #ffffff;}
  8. #Box { position: absolute; left: 610px; top: 80px; height: 50px; width: 50px; background-color: #ff0000; color: #000000;}
  9. </style>
  10.  
  11. <script type="text/javascript">
  12. document.onkeydown=function(event){keyDown(event)};
  13. document.onkeyup=function(event){keyUp(event)};
  14. var Box = 0;
  15.  
  16. function Player () {
  17. var speed = 5;
  18. var x = 50;
  19. var y = 50;
  20. }
  21.  
  22. function update() {
  23. Box.style.left = this.x + "px";
  24. Box.style.top = this.y + "px";
  25. Box.innerHTML = "<h6 style=\"margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;\">X: "+ this.x + "<br /> Y: " + this.y + "</h6>";
  26. }
  27.  
  28. var player = new Player();
  29. var keys = new Array(256);
  30. var i = 0;
  31. for (i = 0;i <= 256; i++){
  32. keys[i] = false;
  33. }
  34.  
  35. function keyDown(event){
  36. keys[event.keyCode] = true;
  37. }
  38.  
  39. function keyUp(event){
  40. keys[event.keyCode] = false;
  41. }
  42.  
  43. function update(){
  44. if(keys[37]) player.x -= player.speed;
  45. if(keys[39]) player.x += player.speed;
  46.  
  47. player.update();
  48. }
  49.  
  50. setInterval(update,1000/60);
  51. </script>
  52. </head>
  53.  
  54. <body>
  55. <div id="Box" ></div>
  56. <script type="text/javascript">
  57. Box = document.getElementById('Box');
  58. Box.innerHTML = "<h6 style=\"margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;\">X: "+ player.x + "<br /> Y: " + player.y + "</h6>";
  59. </script>
  60.  
  61. </body>
  62. </html>

编辑:好吧,我想我搞砸了.我第一次尝试上课时似乎搞砸了.重试后,我似乎能够在Meders帖子中使用“1 Using a function”.

真正的问题似乎是javascript在我的实际代码中到达这一行时不知道该怎么做:

  1. Box.style.background-position = "" + -(this.frame * this.width) + "px " + -(this.state * this.height) + "px";

我放的时候似乎也会窒息

Box.style.background色

所以我现在需要回答的问题是如何在javascript中设置一个样式变量,名称中带有“ – ”.我会在一秒钟内发布测试

解决方法

根据 this文章,有三种方法可以在JavaScript中定义类:

1使用功能

例:

  1. function Apple (type) {
  2. this.type = type;
  3. this.color = "red";
  4. this.getInfo = getAppleInfo;
  5. }
  6.  
  7. function getAppleInfo() {
  8. return this.color + ' ' + this.type + ' apple';
  9. }
  10.  
  11.  
  12. var apple = new Apple('macintosh');
  13. apple.color = "reddish";
  14. alert(apple.getInfo());

2使用JSON

  1. var apple = {
  2. type: "macintosh",color: "red",getInfo: function () {
  3. return this.color + ' ' + this.type + ' apple';
  4. }
  5. }
  6.  
  7.  
  8. apple.color = "reddish";
  9. alert(apple.getInfo());

3单身使用功能

  1. var apple = new function() {
  2. this.type = "macintosh";
  3. this.color = "red";
  4. this.getInfo = function () {
  5. return this.color + ' ' + this.type + ' apple';
  6. };
  7. }
  8.  
  9.  
  10. apple.color = "reddish";
  11. alert(apple.getInfo());

猜你在找的JavaScript相关文章