Javascript HTML5片段颜色？

我正在使用本文中的代码创建一个命运之轮类型的游戏。我想做的是让用户选择自己的颜色，而不是生成随机的颜色

我在HTML代码中添加了以下内容：

<select id="colour" name="colour" class="colour">
    <option value=""></option>
    <option value="db0000">Red</option>
    <option value="171515">Black</option>
    <option value="008c0a">Green</option>
</select>

红色
黑色
绿色

我只编辑了Javascript的这一部分：

 for (i = 0; i < 1; i++) {
     digit[i] = colors[Math.round(Math.random() * 1)];
     //color = color+digit[i];
     color = document.getElementById("colour").value;
     //color = color+digit[i];     
 }

（i=0；i<1；i++）的

{
数字[i]=颜色[Math.round（Math.random（）*1）]；
//颜色=颜色+数字[i]；
颜色=document.getElementById（“颜色”）.value；
//颜色=颜色+数字[i]；
}

我添加了

color=document.getElementById（“color”）.value

问题是颜色不能正常工作。它将使用正确选择的颜色创建第一段和第二段，但从第三段开始，它将在控制盘中添加额外的黑色段

我几乎改变了Javascript中的每一个数字来找出问题所在，但仍然无法解决这个问题

编辑：

为了确保我没有造成任何混乱，我正在尝试的是，对于添加到轮子上的每个新段，我需要选择一种新的颜色。
这段代码是一个很好的例子，说明了为什么原型模式比功能模式好得多。这个插件被定义为一个事实上的工厂函数，它声明了各种各样的函数本地状态变量（
startAngle
，
arc
，
pplArray
，等等），这些变量被实现插件的各种方法所包围，除此之外，一些方法被定义为函数本地的expressionized函数文本（
方法
），使用对象文本语法，一个方法被定义为expressionized函数文本并分配给一个一次性函数本地（
var rotateWheel
）提升到作用域顶部并通过各种其他方法关闭的，其余（
genHex（）
，
stopRotateWheel（）
等）定义为提升到作用域顶部并通过各种其他方法关闭的函数语句。真是一团糟

此外，并非所有闭包变量都需要闭包，因为它们实际上不需要在方法调用之间维护状态<代码>弧

就是一个很好的例子

这里可以提出的另一个批评是，某些状态实际上存储在DOM树中，这是荒谬和不必要的。我特别指的是

params.participants

，它是一个jQuery选择器，用于在DOM中的某个位置定位

元素（实际上在哪里并不重要），其子元素

元素被迭代以从其内部HTML构建轮子段文本。这些数据不需要存储在DOM上；它可以很容易地存储在类实例的数组中

当然，还有对函数模式的经典批评，即它导致为构造函数/工厂函数的每次调用定义新的函数对象（

$.fn.spinwheel（）

），然而，当定义类时，原型模式将涉及类原型上每个函数的单个定义

无论如何，我用原型模式重写了整个插件。小部件现在被定义为

window.SpinWheel

上的全局构造函数（当然，如果需要，可以将其移动到命名空间中）。所有实例方法都是使用统一语法定义的，通过将expressionized函数文本分配给类prototype，

SpinWheel.prototype

就状态数据而言，构造函数中静态定义了一点默认配置数据（基本上我在原始代码中使用了

$.fn.spinwheel.default_options

对象，并将其分配给

spinwheel.config

，但修复了拼写错误并删除了

参数参与者

），然后，作为参数传递给构造函数的config对象（连同canvas节点的

$canvas

jQuery包装器及其上下文对象）在实例本身上被捕获为

this.config

。最后，实际的可变实例状态存储为实例上的属性，例如

this.segmentText

（每个段的文本）、

this.colors

（当前选定的段颜色）和

this.curAngle

（车轮的当前角度）。就是这样，实际上只有三种数据：静态默认（回退）配置、实例配置和实例属性。所有方法的定义样式都是统一的，并且对所有对象数据具有相同的访问权限

jQuery插件现在只是

SpinWheel

类的薄薄包装；基本上，它实例化它，将它附加到目标画布（除非外部代码希望在创建后访问它，否则实际上不需要），并初始化它。插件接口与原始代码相同，但在新代码中，如果您愿意，还可以独立于jQuery插件框架实例化

SpinWheel

（当然，应该说，实现仍然取决于jQuery的加载）

另外，为了方便起见，我添加了

Delete

、

Clear

和

Reset

按钮，以演示对车轮的更多控制。现在，您可以通过regex匹配文本来删除段，清除整个控制盘，以便从头开始构建它，并将其重置为初始配置（虽然如果您没有通过初始配置配置颜色，它们将再次随机生成，这肯定与初始显示中的颜色不同；但是如果需要，您可以配置初始颜色）

以下是新的HTML：

<div id="main">

    <div id="left-column">
        <form class="iform" action="#" method="get">
            <label for="joiner"></label>
            <input id="joiner" name="joiner" class="joiner" placeholder="Please Enter your name" />
            <select id="colorer" name="colorer" class="colorer">
                <option value="">auto</option>
                <option value="db0000">Red</option>
                <option value="171515">Black</option>
                <option value="008c0a">Green</option>
            </select>
            <button class="add">Add</button>
            <button class="delete">Delete</button>
            <button class="spin-trigger">Spin</button>
            <button class="clear">Clear</button>
            <button class="reset">Reset</button>
        </form>
        <canvas class="canvas" width="500" height="500"></canvas>
    </div>

    <div id="right-column">
        <p class="winner">The Winner is ... <span>&nbsp;</span></p>
    </div>

    <div style="clear:both"></div>

</div>

下面是提供jQuery插件接口的瘦包装：

(function($) {

    // spinwheel() jQuery plugin loader
    $.fn.spinwheel = function(config) {

        var $canvas = this; // the "this" object is the jQuery object that wraps the canvas HTML DOM object

        // create a new SpinWheel instance and store it on the canvas DOM object, which is attached to the DOM tree, so it will be accessible by external code
        var spinWheel = new SpinWheel($canvas, config );
        $canvas[0].spinWheel = spinWheel;

        // initialize it
        spinWheel.init();

    }; // end $.fn.spinwheel()

})(jQuery);

jQuery插件代码的实例化没有改变（除非我重命名了主配置参数）：

(function($) {

    // spinwheel() jQuery plugin loader
    $.fn.spinwheel = function(config) {

        var $canvas = this; // the "this" object is the jQuery object that wraps the canvas HTML DOM object

        // create a new SpinWheel instance and store it on the canvas DOM object, which is attached to the DOM tree, so it will be accessible by external code
        var spinWheel = new SpinWheel($canvas, config );
        $canvas[0].spinWheel = spinWheel;

        // initialize it
        spinWheel.init();

    }; // end $.fn.spinwheel()

})(jQuery);

$(document).ready(function() {
    $('.canvas').spinwheel({'segmentTexts':['♈','♉','♊','♋','♌','♍','♎','♏','♐','♑','♒','♓']});
});

 function genHex(){
        // change #colorcode to the id of your input field
        var value = $('#colorcode').val();
        // if no code has been selected by user return a generated colour code
        if(value === '') {
            var colors=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"], color = "", digit = [], i;

            for (i=0;i<6;i++){
                digit[i]=colors[Math.round(Math.random()*14)];             
                color = color+digit[i];     
            }   

            if($.inArray(color, colorCache) > -1){
                genHex();
            } else {
                colorCache.push('#'+color);
                return '#'+color;
            }
        }
        else {
            return value;
        }