Html 是否有一种基于数字输入创建渐变范围滑块的方法？_Html_Google Apps Script_Google Sheets

Html 是否有一种基于数字输入创建渐变范围滑块的方法？

html google-apps-script google-sheets

Html 是否有一种基于数字输入创建渐变范围滑块的方法？,html,google-apps-script,google-sheets,Html,Google Apps Script,Google Sheets,在GoogleSheets脚本编辑器中，我希望能够有一个范围滑块，这样当我输入一个数字时，它会根据该数字创建一种颜色我尝试了一个快速的数值范围滑块，但我认为我需要解析颜色而不是当前的parseFloat <!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> <script> function upda

在GoogleSheets脚本编辑器中，我希望能够有一个范围滑块，这样当我输入一个数字时，它会根据该数字创建一种颜色

我尝试了一个快速的数值范围滑块，但我认为我需要解析颜色而不是当前的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>


函数更新（）{
document.getElementById（'val'）。innerText=document.getElementById（'input'）。
价值
}
函数save（）{
//调用表函数
google.script.run.saveSliderVal（parseColor（document.getElementById（'input'））。
价值,10.00);；
}
 0.00


储蓄率

我假设您的代码是基于post的

如果您想将颜色输入函数中的单元格背景更改为整数，则需要使用该方法并使用函数将颜色转换为整数到十六进制。基于颜色转换器功能的示例：

.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)
}

函数onOpen（）{ SpreadsheetApp.getUi（） .createMenu（'对话框'） .addItem（'打开'，'打开对话框'） .addToUi（）； } 函数openDialog（）{ var html=HtmlService.createHtmlOutputFromFile（'index'）； SpreadsheetApp.getUi（） .showmodaldiallog（html，“对话框标题”）； } 函数saveSliderVal（updatedVal）{ var sheetToSaveTo=SpreadsheetApp.getActiveSpreadsheet（）.getSheetByName（'Gantt'）；如果（！sheetToSaveTo）{ sheetToSaveTo=SpreadsheetApp.getActiveSpreadsheet（）.getActiveSheet（）； } var intnumber=updatedVal-0； //隔离颜色-真的没有必要红色、绿色、蓝色； //需要，因为toString不会在左侧填充零 var模板=“#000000”； //在MS Windows世界中，RGB颜色 //是0xBBGGRR，因为Intel芯片存储字节的方式红色=（intnumber&0x0000ff）>>16； //遮罩每种颜色并颠倒顺序 intnumber=红色|绿色|蓝色； //toString将数字转换为十六进制字符串 var HTMLcolor=intnumber.toString（16）； //模板添加了#用于标准HTML#RRGGBB HTMLcolor=template.substring（0,7-HTMLcolor.length）+HTMLcolor； var cellToSaveTo=sheetosaveto.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>


函数更新（）{
document.getElementById（'val'）。innerText=document.getElementById（'input'）。值；
}
函数save（）{
//调用表函数
google.script.run.saveSliderVal（parseInt（document.getElementById（'input'）.value，10））；
}
 0


保存到甘特图