Question

在Google表格脚本编辑器中，我希望能够有一个范围滑块，因此当我输入数字时，它会根据该数字创建颜色。

我尝试了快速数值范围滑块，但我想我需要parseColor而不是当前的parseFloat。

<!DOCTYPE html>
 <html>
<head>
    <base target="_top">
</head>
<body>
    <script>
        function update() {
document.getElementById('val').innerText = document.getElementById ('input').
value;
        }
        function save() {
            // Call sheet function
google.script.run.saveSliderVal(parseColor(document.getElementById('input').
value, 10.00));
        }
    </script>
    <input id="input" type="color" onchange="update()" oninput="update()" value="0.00"
    step="0.25" />&nbsp<span id="val">0.00</span>
<br />
<button id="save" onclick="save()">Save Rating</button>
</body>
</html>

Answer 1

我认为您的代码基于this帖子

如果要在颜色输入函数中将单元格的背景更改为整数，则需要使用方法setBackground()，并使用函数将颜色转换为整数到十六进制。 / h2>

基于this颜色转换器功能的示例：

.gs文件

function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu('Dialog')
      .addItem('Open', 'openDialog')
      .addToUi();
}

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('index');
  SpreadsheetApp.getUi()
      .showModalDialog(html, 'Dialog title');
}

function saveSliderVal(updatedVal){
  var sheetToSaveTo = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Gantt');
  if (!sheetToSaveTo){
    sheetToSaveTo = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  } 
    var intnumber = updatedVal - 0;

    // isolate the colors - really not necessary
    var red, green, blue;

    // needed since toString does not zero fill on left
    var template = "#000000";

    // in the MS Windows world RGB colors
    // are 0xBBGGRR because of the way Intel chips store bytes
    red = (intnumber&0x0000ff) << 16;
    green = intnumber&0x00ff00;
    blue = (intnumber&0xff0000) >>> 16;

    // mask out each color and reverse the order
    intnumber = red|green|blue;

    // toString converts a number to a hexstring
    var HTMLcolor = intnumber.toString(16);

    //template adds # for standard HTML #RRGGBB
    HTMLcolor = template.substring(0,7 - HTMLcolor.length) + HTMLcolor;
  var cellToSaveTo = sheetToSaveTo.getRange('A1:A1');
  cellToSaveTo.setBackground(HTMLcolor)
}

html文件

<!DOCTYPE html>
<html>
<head>
    <base target="_top">
</head>
<body>
    <script>
        function update() {
            document.getElementById('val').innerText = document.getElementById('input').value;
        }
        function save() {
            // Call sheet function
            google.script.run.saveSliderVal(parseInt(document.getElementById('input').value, 10));
        }
    </script>
    <input id="input" type="range" min="0" max="16777215" onchange="update()" oninput="update()" value="0"
        step="1" />&nbsp<span id="val">0</span>
    <br />
    <button id="save" onclick="save()">Save to Gantt</button>
</body>
</html>

有没有一种方法可以基于数字输入创建渐变范围滑块？

1 个答案: