Javascript Prototype + HTML呈现

Question

Noobie在这里：我正在尝试为骰子（6个面）创建一个原型，每个骰子对象都存储它的当前值（当前面值）和HTML对应的表示形式。 我想要的是在滚动骰子时更新表示和值。

我有以下三个功能，我无法实现：

function rollD(){
  this.val = randomInt(1,6) //random integer function to choose between 1 - 6
  this.icons = ; //dice icons

}


rollD.prototype.render = function(){
     //how does HTMY rendering work?
   }


rollD.prototype.roll(){

//使用jQuery掷骰子}

我在理解如何更新图像以及渲染如何工作以及想要学习Javascript OOP方面遇到了很多麻烦，所以没有捷径会很好。 谢谢

Answer 1

尝试

(function ($) {
    $.fn.rollDice = function () {
        // `dice` array
        var dice = ["\u2680"
                    , "\u2681"
                    , "\u2682"
                    , "\u2683"
                    , "\u2684"
                    , "\u2685"];
        // return _two_ `dice` items,
        // remove `+ dice[
        // 1 + Math.floor(Math.random() * dice.length - 1)
        // ]` , to return _one_ die
        // `1 + Math.floor(Math.random() * dice.length - 1)
        // ]` returns "pseudo" random number,
        // utilized to reference an `index` within `dice` array
        return $(this).text(dice[
            1 + Math.floor(Math.random() * dice.length - 1)
        ] + dice[
            1 + Math.floor(Math.random() * dice.length - 1)
        ])
    }
}(jQuery));

// call `$.fn.rollDice` on `.dice` selector 
$(".dice").rollDice();

 (function ($) { $.fn.rollDice = function () { var dice = ["\⚀" , "\⚁" , "\⚂" , "\⚃" , "\⚄" , "\⚅"]; return $(this).text(dice[ 1 + Math.floor(Math.random() * dice.length - 1) ] + dice[ 1 + Math.floor(Math.random() * dice.length - 1) ]) } }(jQuery)); $(".dice").rollDice() 

 .dice { font-size:72px; margin:0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="dice"></div> 

Answer 2

您可以通过在构造函数（函数）中访问this关键字来为原型创建方法。 我只建议使用prototype成员修改已创建的（本机）原型，如Array，String或Math（数学使用__proto__而不是prototype ）

我在这里创建了一个快速骰子示例：（此示例使用jQuery ）

http://codepen.io/anon/pen/emyjpz

HTML

<button id='d1' class='dice'>ROLE ME</button>
<button id='d2' class='dice'>ROLE ME</button>
<button id='d3' class='dice'>ROLE ME</button>
<button id='d4' class='dice'>ROLE ME</button>
<button id='d5' class='dice'>ROLE ME</button>
<br>
<button onclick='$(".dice").trigger("click");'>Roll All</button>

CSS

.dice {
  display: inline-block;
  border: 1px solid black;
  background: transparent;
  width: 50px;
  height: 50px;
  margin: 16px;
}

JavaScript （使用jQuery）

Math.randInt = function(min, max){
  return Math.floor((Math.random()*((max+1)-min))+min);
}
function Dice(htmlID){
  this.id = htmlID;
  this.value = false;
  this.roll = function(){
    this.value = Math.randInt(1,6);
    $("#"+this.id).html(this.value);
  }
  $("#"+this.id).on("click",this.roll);
}
$(document).ready(function(){
  new Dice("d1");
  new Dice("d2");
  new Dice("d3");
  new Dice("d4");
  new Dice("d5");
});

---

编辑：使用.prototype

这是相同的示例，但它使用prototype成员。

http://codepen.io/dustinpoissant/pen/KwZBGN

JavaScript （使用jQuery）

Math.randInt = function(min, max){
  return Math.floor((Math.random()*((max+1)-min))+min);
}
function Dice(htmlID){
  this.id = htmlID;
  this.value = false;
  $("#"+this.id).on("click",this.roll);
}
Dice.prototype.roll = function(){
    this.value = Math.randInt(1,6);
    $("#"+this.id).html(this.value);
  }
$(document).ready(function(){
  new Dice("d1");
  new Dice("d2");
  new Dice("d3");
  new Dice("d4");
  new Dice("d5");
});

希望这能使事情顺利进行。