将 Javascript 翻译成 Google Apps 脚本

【问题标题】：Translate Javascript to Google Appscript将 Javascript 翻译成 Google Apps 脚本
【发布时间】：2021-01-15 08:24:16
【问题描述】：

我想在我的 Google Appscript 中使用 Javascript 代码。请帮忙。代码如下： 我已经单独保存了 Stylesheet.html 文件。请告诉我如何调用 html 文件中的函数。

<script>
  //google.script.run.updateColors();
  
  
  document.querySelectorAll("input[type='number'], input[type='range']").forEach(doStuff);
  
  function doStuff(){
    google.script.run.withSuccessHandler( {
    this.addEventListener("input", function() {
    if (this.type === "range") {
      this.nextElementSibling.value = this.value;
    } else if (this.type === "number") {
      this.previousElementSibling.value = this.value;
    }

  }
    }).updateColors();


  }

  

  
  function updateColors() {
 
  google.script.run.withSuccessHandler({ 
     const colorFront = [ 
    document.querySelector("#color-1-r").value,
    document.querySelector("#color-1-g").value,
    document.querySelector("#color-1-b").value
  ];
  const colorBack = [
    document.querySelector("#color-2-r").value,
    document.querySelector("#color-2-g").value,
    document.querySelector("#color-2-b").value
  ];
  } ).updateDemoColors(colorFront, colorBack).updateBoxesColors(colorFront, colorBack).updateHex(colorFront,colorBack);
  
  }

  function updateHex(colorFront, colorBack) {
    google.script.run.withSuccessHandler(  {
  const colorFrontHex = colorFront.map(function(el) { return Number(el).toString(16).padStart(2, "0").toUpperCase(); });
  const colorBackHex = colorBack.map(function(el) { return Number(el).toString(16).padStart(2, "0").toUpperCase(); });
  document.querySelector("#color-1-hex").value = `#${colorFrontHex.join('')}`;
  document.querySelector("#color-2-hex").value = `#${colorBackHex.join('')}`
  }); 
    
  }

  function updateBoxesColors(colorFront, colorBack) {

    google.script.run.withSuccessHandler(ratio => {
    const ratio = contrast(colorFront, colorBack);
    document.querySelector("#aa-normal").className  = ratio < 0.22222 ? "" : "fail";
    document.querySelector("#aa-large").className   = ratio < 0.33333 ? "" : "fail";
    document.querySelector("#aaa-normal").className = ratio < 0.14285 ? "" : "fail";
    document.querySelector("#aaa-large").className  = ratio < 0.22222 ? "" : "fail";

    const totalWrong = document.querySelectorAll(".fail").length;
    let mouth = document.querySelector("#mouth");
    let smile = document.querySelector("#smile");

    switch(totalWrong) {
      case 0:
        mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,149  125,149  116,149 109,142 106,132 Z");
        smile.setAttribute("d", "M125,144 C 140,144 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,144 125,144 Z");
        break;
      case 1:
      case 2:
        mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,146  125,146  116,146 109,142 106,132 Z");
        smile.setAttribute("d", "M125,141 C 140,141 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,141 125,141 Z");
        break;
      case 3: 
        mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,138  140,143  125,143  110,143 109,138 106,132 Z");
      smile.setAttribute("d", "M125,138 C 140,138 143.5,132 143.5,132 143.5,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,138 125,138 Z");
        break;
      case 4: 
        mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,138  134,142  125,142  116,142 109,138 106,132 Z");
        smile.setAttribute("d", "M125,135 C 140,135 143,132 143,132 143,135 125,136 125,136 125,136 106.5,135 106.5,132 106.5,132 110,135 125,135 Z");
        break;
    }


    });

}


function updateDemoColors(colorFront, colorBack) {

  google.run.script.withSuccessHandler({ 
    const demo = document.querySelector("#sample-text");
    demo.style.color = `rgb(${colorFront.toString()})`;
    demo.style.backgroundColor = `rgb(${colorBack.toString()})`; 
    });
  
}



document.querySelectorAll("input[type='text']").forEach(el.addEventListener("blur", el); 

function el()
{

google.script.run.withSuccessHandler({
let val = this.value;
    let wrongValue = false;
    if (val[0] === "#") val = val.substring(1);
    if (val.length === 3 || val.length === 6) {
      if (val.length === 3) {
        val = `${val[0]}${val[0]}${val[1]}${val[1]}${val[2]}${val[2]}`;
      }
      if (val.match(/[0-9A-Fa-f]{6}/)) {
        const red = parseInt(`${val[0]}${val[1]}`, 16);
        const green = parseInt(`${val[2]}${val[3]}`, 16);
        const blue = parseInt(`${val[4]}${val[5]}`, 16);
        const target = this.dataset.target;
        
        document.getElementById(`number-${target}-r`).value = red;
        document.getElementById(`number-${target}-g`).value = green;
        document.getElementById(`number-${target}-b`).value = blue;
        document.getElementById(`color-${target}-r`).value = red;
        document.getElementById(`color-${target}-g`).value = green;
        document.getElementById(`color-${target}-b`).value = blue;
        
        updateColors();
      } else {
        wrongValue = true;
      }
    } else {
      wrongValue = true;
    }
    
    if (wrongValue){
      const colorFront = [ 
        document.querySelector("#color-1-r").value,
        document.querySelector("#color-1-g").value,
        document.querySelector("#color-1-b").value
      ];
      const colorBack = [
        document.querySelector("#color-2-r").value,
        document.querySelector("#color-2-g").value,
        document.querySelector("#color-2-b").value
      ];
    
      }
}).updateHex(colorFront, colorBack);
  

</script>  
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    
    <section id="color-contrast">
  <h1>Google Color Contrast Checker</h1>
  <div class="character">
    <div id="jill">
    <svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title  desc">
    <title id="title">Contrast Checker</title>
    <desc id="desc">Cartoon of a Caucasian woman smiling, and wearing black glasses and a purple shirt with white collar.</desc>
    <defs>
      <clipPath id="scene">
        <circle cx="125" cy="125" r="115"/>
      </clipPath>
      <clipPath id="lips">
        <path d="M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,146  125,146  116,146 109,142 106,132 Z" />
      </clipPath>
    </defs>
    <g stroke="none" stroke-width="0" clip-path="url(#scene)">
      <rect x="0" y="0" width="250" height="250" fill="#b0d2e5" />
      <g id="head">
        <path fill="none" stroke="#111111" stroke-width="2" d="M 68,103 83,103.5" />
        <path class="hair" d="M 67,90 67,169 78,164 89,169 100,164 112,169 125,164 138,169 150,164 161,169 172,164 183,169 183,90 Z" />
        <circle cx="125" cy="100" r="55" class="skin" />
        <ellipse cx="102" cy="107" rx="5" ry="5" class="eyes" id="eye-left" />
        <ellipse cx="148" cy="107" rx="5" ry="5" class="eyes" id="eye-right" />
        <rect x="119" y="140" width="12" height="40" class="skin" />
        <path class="line eyebrow" d="M 90,98 C 93,90 103,89 110,94" id="eyebrow-left" />
        <path class="line eyebrow" d="M 160,98 C 157,90 147,89 140,94" id="eyebrow-right"/>
        <path stroke="#111111" stroke-width="4" d="M 68,103 83,102.5" />
        <path stroke="#111111" stroke-width="4" d="M 182,103 167,102.5" />
        <path stroke="#050505" stroke-width="3" fill="none" d="M 119,102 C 123,99 127,99 131,102" />
        <path fill="#050505" d="M 92,97 C 85,97 79,98 80,101 81,104 84,104 85,102" />
        <path fill="#050505" d="M 158,97 C 165,97 171,98 170,101 169,104 166,104 165,102" />
        <path stroke="#050505" stroke-width="3" fill="rgba(240,240,255,0.4)" d="M 119,102 C 118,111 115,119 98,117 85,115 84,108 84,104 84,97 94,96 105,97 112,98 117,98 119,102 Z" />
        <path stroke="#050505" stroke-width="3" fill="rgba(240,240,255,0.4)" d="M 131,102 C 132,111 135,119 152,117 165,115 166,108 166,104 166,97 156,96 145,97 138,98 133,98 131,102 Z" />
        <path class="hair" d="M 60,109 C 59,39 118,40 129,40 139,40 187,43 189,99 135,98 115,67 115,67 115,67 108,90 80,109 86,101 91,92 92,87 85,99 65,108 60,109" />
        <path id="mouth" fill="#d73e3e" d="M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,149  125,149  116,149 109,142 106,132 Z" /> 
        <path id="smile" fill="white" d="M125,144 C 140,144 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,144 125,144 Z"  />
      </g>
      <g id="shirt">
        <path fill="#8665c2" d="M 132,170 C 146,170 154,200 154,200 154,200 158,245 158,245 158,245 92,245 92,245 92,245 96,200 96,200 96,200 104,170 118,170 118,170 125,172 125,172 125,172 132,170 132,170 Z"/>
        <path id="arm-left" class="arm" stroke="#8665c2" fill="none" stroke-width="14" d="M 118,178 C 94,179 66,220 65,254" />
        <path id="arm-right" class="arm" stroke="#8665c2" fill="none" stroke-width="14" d="M 132,178 C 156,179 184,220 185,254" />
        <path fill="white" d="M 117,166 C 117,166 125,172 125,172 125,182 115,182 109,170 Z" />
        <path fill="white" d="M 133,166 C 133,166 125,172 125,172 125,182 135,182 141,170 Z" />
        <circle cx="125" cy="188" r="4" fill="#5a487b" />
        <circle cx="125" cy="202" r="4" fill="#5a487b" />
        <circle cx="125" cy="216" r="4" fill="#5a487b" />
        <circle cx="125" cy="230" r="4" fill="#5a487b" />
        <circle cx="125" cy="244" r="4" fill="#5a487b" />
        <path stroke="#daa37f" stroke-width="1" class="skin hand" id="hand-left" d="M 51,270 C 46,263 60,243 63,246 65,247 66,248 61,255 72,243 76,238 79,240 82,243 72,254 69,257 72,254 82,241 86,244 89,247 75,261 73,263 77,258 84,251 86,253 89,256 70,287 59,278" /> 
        <path stroke="#daa37f" stroke-width="1" class="skin hand" id="hand-right" d="M 199,270 C 204,263 190,243 187,246 185,247 184,248 189,255 178,243 174,238 171,240 168,243 178,254 181,257 178,254 168,241 164,244 161,247 175,261 177,263 173,258 166,251 164,253 161,256 180,287 191,278"/> 
      </g>
    </g>
  </svg>
    </div>
  </div>
  <div id="boxes">
    <div id="aa-large">
      <span>Large Text</span>
      <span>WCAG AA</span>
    </div>
    <div id="aa-normal">
      <span>Normal Text</span>
      <span>WCAG AA</span>
    </div>
    <div id="aaa-large">
      <span>Large Text</span>
      <span>WCAG AAA</span>
    </div>
    <div id="aaa-normal">
      <span>Normal Text</span>
      <span>WCAG AAA</span>
    </div>
  </div>
  <div id="sample">
    <div contenteditable id="sample-text" style="color:rgb(0,0,0);background:rgb(255,255,255)">
      Click to change demo text
    </div>
  </div>
  <div id="ratioContainer" class="pass">
        <span>
            Contrast Ratio
            <span id="ratio" aria-live="polite" aria-atomic="false"><b>4.76</b>:1</span>
        </span>
        
    </div>

  <div id="bars">
    <div>
      
      <input id="color-1-hex" data-target="1" type="text" value="#000000" maxlength="7" />
      <h2>Foreground</h2>
      <div>
        <label for="color-1-r" class="red">R</label> 
        <input id="color-1-r" type="range" min="0" max="255" value="0" />
        <input id="number-1-r" type="number" min="0" max="255" value="0" />
      </div>
      <div>
        <label for="color-1-g" class="green">G</label> 
        <input id="color-1-g" type="range" min="0" max="255" value="0" />
        <input id="number-1-g" type="number" min="0" max="255" value="0" />
      </div>
      <div>
        <label for="color-1-b" class="blue">B</label> 
        <input id="color-1-b" type="range" min="0" max="255" value="0" />
        <input id="number-1-b" type="number" min="0" max="255" value="0" />
      </div>
      
    </div>
    <div>
      <input id="color-2-hex" data-target="2" type="text" value="#FFFFFF" maxlength="7" />
      <h2>Background</h2>
      <div>
        <label for="color-2-r" class="red">R</label> 
        <input id="color-2-r" type="range" min="0" max="255" value="255" />
        <input id="number-2-r" type="number" min="0" max="255" value="255" />
      </div>
      <div>
        <label for="color-2-g" class="green">G</label> 
        <input id="color-2-g" type="range" min="0" max="255" value="255" />
        <input id="number-2-g" type="number"min="0" max="255" value="255" />
      </div>
      <div>
        <label for="color-2-b" class="blue">B</label> 
        <input id="color-2-b" type="range" min="0" max="255" value="255" />
        <input id="number-2-b" type="number" min="0" max="255" value="255" />
      </div>
      
    </div>
  </div>
</section>


<?!= include('JavaScript'); ?>



  </body>
</html>

我想在我的 Google Appscript 中使用 Javascript 代码。请帮忙。代码如下： 我已经单独保存了 Stylesheet.html 文件。请告诉我如何调用 html 文件中的函数。

所以，如果有人能建议我如何将其修改为 google appscript，我将不胜感激。

【问题讨论】：

    标签： javascript html jquery css google-apps-script


    【解决方案1】：

    TL;DR

    为了在 HTML 文件中调用 Apps 脚本函数，您必须使用 google.script.run 客户端 JavaScript API 调用。

    假设您想从 Code.gs 调用 contrast 函数，则必须将其添加到您的 Page.html 文件中：

    <script>
    google.script.run.contrast();
</script>

    说明

    但是，请记住，客户端（在您的情况下也称为 Code.gs）将必须使用符合 Apps 脚本的方法 - 也就是说，您 不能调用 DOM 元素，例如 document。

    如果您想继续使用已有的功能，则必须将它们集成到您的 HTML 文件中，并保留 Apps 脚本代码以严格调用 doGet 函数。

    参考

    【讨论】：

    • 谢谢@ale13 我正在编辑我的问题。请让我知道问题出在哪里
    • @tanaike 如果您知道我在功能上哪里出错的解决方案，您能否回答一下？
    猜你喜欢
    • 2015-04-09
    • 1970-01-01
    • 1970-01-01
    • 2014-04-25
    • 2020-02-10
    • 2013-07-24
    • 1970-01-01
    • 2017-10-31
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode