javascript - 通过 HTML/CSS/JavaScript 实现 5 种可能的颜色？

Question

我的电子商店有一个模块，它允许用户选择一个项目并使用可以移动的彩色文本对其进行个性化设置。文本在文本字段中输入，文本的颜色通过由 JScolor.js 交互的元素选择。选择颜色后，文本会自动更改颜色。

问题是我的物理个性化机器只支持 5 种基本颜色的打印。因此，有没有办法将调色板限制为这 5 种颜色或以其他方式/.js/html/css 实现该效果？

Answer 1

如果你想使用 HTML5 调色板，你必须对这 5 种颜色的字段进行标准输入验证，这对用户来说可能是一个巨大的可用性问题，否则，真的没有办法说'嘿调色板，只显示这些颜色”。你可以做的是用允许的颜色制作 5 个样本，然后让用户以这种方式选择它。您可以设置一些单选按钮的样式来执行此操作，以及完成包含 5 个选项的可选字段的许多其他方法。

Answer 2

感谢您的建议。最后，我创建了一个下拉菜单并将五种颜色分配为值：

<select id="tcolor" class="color">
    <option value="0000FF">Blue</option>
    <option value="000000">Black</option>
    <option value="FF0000">Red</option>
    <option value="C0C0C0">Silver</option>
    <option value="FFD700">Gold</option>
 </select>

不确定后台的编码，但按要求工作。

Answer 3

具有 5 种颜色选项的范围滑块

html

<div id="results"></div>

<div data-role="rangeslider">
    <label for="range-1a">color slider (<i></i>): <span></span></label> 
    <input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range" />
    <label for="range-1b">Rangeslider:</label>
    <input name="range-1b" id="range-1b" min="0" max="100" value="100" type="range" />
</div>

js

$(function () {
    $("#results").css({
        "display" : "block",
        "width" : "99%",
        "height" : "50px",
        "border" : "1px solid gold"
    });
    $("[data-role='rangeslider'] a")
        .filter(":last")
        .css("display", "none")
        .addBack()
        .filter(":first")
        .css({
        "border": "1px solid gold",
        "backgroundColor": "grey"
    }).attr("tabindex", 1).focus();
    $("input[name='range-1a']").on("change", function (e) {
        var color = $(this).val();
        var results = $("#results");
        if (color < 20) {       
          results.css("backgroundColor", "red");
        };       
        if (color >= 20 && color < 40) { 
          results.css("backgroundColor", "blue"); 
        };
        if (color >= 40 && color < 60) {
          results.css("backgroundColor", "green")
        };
        if (color >= 60 && color < 80) { 
          results.css("backgroundColor", "yellow")
        };  
        if (color >= 80) {
          results.css("backgroundColor", "orange") 
        };
        $("label[for=range-1a] i")
        .text($("#results")[0].style.backgroundColor);                    
        $("span")
        .text($("#results").css("background-color"))
    });
});

jsfiddle http://jsfiddle.net/guest271314/z3z7bnbd/

部门：

http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js

http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.3.min.css

http://api.jquerymobile.com/jquery-wp-content/themes/api.jquerymobile.com/style.css