用于从电子表格收集数据的Javascript计时器

Question

我在Google表格上有一些关于倒计时器以及启动/停止/重置命令按钮的问题。如何使用谷歌应用程序脚本为其编写脚本，并使用启动/停止/重置按钮放入谷歌工作表，命令。

Answer 1

用于从电子表格收集数据的Javascript计时器

我将其构建为我的一个项目的测试设置。这是datatimer.html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.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:5px 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"></div>
        <br />Timer Duration(minutes):
        <br /><input id="txt1" type="text" size="4" class="action"/>
        <select id="sel1" onChange="loadTxt('sel1','txt1');">
          <option value="90000">1.5</option>
          <option value="96000">1.6</option>
          <option value="102000">1.7</option>
          <option value="108000">1.8</option>
          <option value="114000">1.9</option>
          <option value="120000" selected>2.0</option>
          <option value="126000">2.1</option>
          <option value="132000">2.2</option>
          <option value="138000">2.3</option>
          <option value="144000">2.4</option>
        </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();" 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>
      <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() {
        $('#startTimer').click(startmytimer);
        $('#stopTimer').click(stopTimer);
        $('#txt1').val('120000');
        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 changeData(){
        $('#txt1').css('background','#ffffcc');
        google.script.run
        .withSuccessHandler(updateDisplay)
        .changeData();
      }

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

     console.log('My Code');
   </script>
  </body>
</html>

这是datachanger.gs文件：

function changeData(){
  var ss=SpreadsheetApp.getActive();
  var sho=ss.getSheetByName('TradingTimes')
  var tmr=Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "HH:mm:ss");
  var col2=Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "E MMM dd,yyyy HH:mm:ss");
  var col3=new Date(col2).getTime();
  var col4=new Date(col2).getTime();
  var dA=[[col2,col3,col4]];
  sho.getRange('B2:D2').setValues(dA);
  return tmr;
}

function showTimerSideBar()
{
  var ui=HtmlService.createHtmlOutputFromFile('datatimer').setTitle('Javascript Trigger Generator');
  SpreadsheetApp.getUi().showSidebar(ui);
}

我正在观看其中包含Google财经单元功能的工作表的输出。但是你可以随意拨打你想要的任何东西。

这是对话框的样子：

Answer 2

您可以在Google表格中attach actions to images。这样，您可以将启动，停止和重置按钮作为图像。单击时，图像可以链接到appscript中的功能，以更新单个单元格中的时间。

以下是代码，这里是sample sheet。请参阅＆＃34;将操作附加到图像＆＃34;有关如何在需要时触发按钮的文档。

var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName('Sheet1');

function  countDownSeconds(seconds, minutes){
  while (minutes >=0){   
     sheet.getRange(2,1).setValue(minutes);     
    while (seconds >= 0 ){     
      var m = sheet.getRange(2,1).getValue()
      var s = sheet.getRange(2,2).getValue()
      if (m === 'pausing' || s === 'pausing'|| m === 'reset' || s === 'reset' ) {
       return
      }      
      sheet.getRange(2,2).setValue(seconds); 
      SpreadsheetApp.flush();
      Utilities.sleep(1000)
      seconds --
    }    
    seconds = 59;
    minutes = sheet.getRange(2,1).getValue();
    minutes --
  }
}

function startTimer(){
   var minutes = sheet.getRange(2,1).getValue()
   var seconds = sheet.getRange(2,2).getValue()
   countDownSeconds(seconds, minutes)

}

function pause(){
   var minutes = sheet.getRange(2,1).getValue()
   var seconds = sheet.getRange(2,2).getValue()
   sheet.getRange(2,1).setValue('pausing');  
   sheet.getRange(2,2).setValue('pausing');   
   SpreadsheetApp.flush();
   Utilities.sleep(1000);
   sheet.getRange(2,1).setValue(minutes)
   sheet.getRange(2,2).setValue(seconds)
}

function reset(){
   sheet.getRange(2,1).setValue('reset');  
   sheet.getRange(2,2).setValue('reset');   
   SpreadsheetApp.flush();
   Utilities.sleep(1000);
   sheet.getRange(2,1).setValue(0)
   sheet.getRange(2,2).setValue(0)
}

使用Apps脚本到Google表格的倒数计时器启动/停止/重置按钮

2 个答案:

用于从电子表格收集数据的Javascript计时器