如何使单元格每隔x秒变色一次?

时间:2019-06-08 17:56:04

标签: google-apps-script google-sheets

所以我正在研究Google表格上的文档,我希望它看起来不错,这段代码确实无关紧要,但是很高兴知道该怎么做,因为无论如何我学到的每一点都可以在将来对您有所帮助。

更多技术性的事情可能是1个单元格更改为某种颜色,然后另一个单元格确定该单元格已经更改了颜色,因此它也更改了颜色,并且一直持续到在最后一个单元格上循环(某种创建彩虹效果)。

但是请记住,谷歌文档中没有很多条件格式,并且您不能使用宏,而必须使用Google Sheet脚本。

1 个答案:

答案 0 :(得分:1)

每x秒更改颜色

Code.gs:

function onOpen(){
  SpreadsheetApp.getUi().createMenu('MyTools')
  .addItem('Show Sidebar', 'showTimerSideBar')
  .addToUi();
}

function showTimerSideBar()
{
  var ui=HtmlService.createHtmlOutputFromFile('datatimer').setTitle('Color Timer');
  SpreadsheetApp.getUi().showSidebar(ui);
}

function changeData(){
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('ColorChange');
  var rg=sh.getRange('A1:A10');
  var colorA=rg.getBackgrounds();
  var n=new Date();
  var tmr=Utilities.formatDate(n, Session.getScriptTimeZone(), "HH:mm:ss")
  var rObj={color:colorA[Math.floor(Math.random()*colorA.length)][0],timer:tmr};
  ss.toast(Utilities.formatString('timer: %s color: %s', rObj.timer,rObj.color));
  return rObj;
}

function saveData(dObj) {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Data');
  var lr=sh.getLastRow();
  sh.getRange(lr+1,1).setValue(dObj.timer);
  sh.getRange(lr+1,2).setBackground(dObj.color);
}

function setA1(color) {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('ColorChange');
  var rg=sh.getRange('A1');
  rg.setBackground(color);
}

datatimer.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <style>
      #my_block{border:2px solid black;background-color:rgba(0,150,255,0.2);padding:10px 10px 10px 10px;}
      #conv_block{border: 1px solid black;padding:10px 10px 10px 10px;}
      .bttn_block{padding:2px 5px 0px 0px;}
      .sndr_block {border:1px solid rgba(0,150,0,0.5);background-color:rgba(150,150,0,0.2);margin-bottom:2px;}
    </style>
  </head>
  <body>
  <form>
    <div id="my_block" class="block form-group">
      <div class="sndr_block">
        <div id="myClock" style="font-size:20px;font-weight:bold;"></div>
        <br />Timer Duration(seconds):
        <br /><input id="txt1" type="text" size="4" class="action"/>
        <select id="sel1" onChange="loadTxt('sel1','txt1');">
        </select>
        <div id="cntdiv"></div>
        <br /><strong>Timer Controls</strong>
        <div class="bttn_block"><input type="button" value="Start" name="startShow" id="startShow" onClick="startmytimer();changeData();" class="red" /></div>
        <div class="bttn_block"><input type="button" value="Stop" name="stopTimer" id="stopTimer" class="red" /></div>
        <div class="bttn_block"><input type="button" value="Single Ping" name="changedata" id="chgData" class="red" onClick="changeData();" /></div>
        <div class="bttn_block"><input type="button" value="Red" name="setA1Red" id="setRed" class="red" onClick="setA1('#ff0000');" /></div>
        <div class="bttn_block"><input type="button" value="Green" name="setA1Green" id="setGreen" class="green" onClick="setA1('#00ff00');" /></div>
      </div>
      <div id="btn-bar">
        <br /><input type="button" value="Exit" onClick="google.script.host.close();" class="green" />
      </div>
    </div>
  </form>
    <script>
    var idx=1;
    var myInterval='';
    var cnt=0;
      $(function() {
        var select = document.getElementById('sel1');
        select.options.length = 0; 
        for(var i=1;i<61;i++)
        {
          select.options[i-1] = new Option(i,i * 1000);
        }
        select.selectedIndex=4;
        $('#startTimer').click(startmytimer);
        $('#stopTimer').click(stopTimer);
        $('#txt1').val(String(select.options[select.selectedIndex].value));
        startTime();
      });

      function startTime(){
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        m = checkTime(m);
        s = checkTime(s);
        document.getElementById('myClock').innerHTML =
        h + ":" + m + ":" + s;
        var t = setTimeout(startTime, 500);
      }

      function checkTime(i){
        if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
        return i;
      }

      function startmytimer(){
        document.getElementById('cntdiv').innerHTML='<strong>Timer Started:</strong> ' + document.getElementById('myClock').innerHTML;
        myInterval=setInterval(changeData, Number($('#txt1').val()));
      }

      function stopTimer(){
        document.getElementById('cntdiv').innerHTML='Timer Stopped';
        clearInterval(myInterval);
      }

      function loadTxt(from,to){
        document.getElementById(to).value = document.getElementById(from).value;
      }

      function exportData() {
        google.script.run.saveData(cA);
      }

      function changeData(){
        $('#txt1').css('background','#ffffcc');
        google.script.run
        .withSuccessHandler(function(rObj){
          updateDisplay(rObj.timer);
          saveData({timer:rObj.timer,color:rObj.color});
          $('#txt1').css('background','#ffffff');
        })
        .changeData();
      }

      function updateDisplay(t){
        $('#txt1').css('background','#ffffff');
        document.getElementById('cntdiv').innerHTML='<strong>Timer Running:</strong> Count= ' + ++cnt + ' <strong>Time:</strong> ' + t;
      }

      function setA1(color) {
        console.log(color);
        google.script.run.setA1(color);
      }

      function saveData(dObj) {
        google.script.run.saveData(dObj);
      }
     console.log('My Code');
   </script>
  </body>
</html>

当前颜色:(颜色更改表)

enter image description here

数据表:

enter image description here

计时器补充工具栏:

enter image description here

我修改了一个现有脚本为您提供此示例。因此,这里可能还有其他不相关的脚本。可以根据自己的特定需求进行修改。