Таймер JavaScript для сбора времени и цвета отдельной ячейки
Хотя это, вероятно, не совсем то, что вы хотите, я подозреваю, что у него есть все компоненты, чтобы вы могли понять, как получить то, что вы хотите.
datatimer.html
Это таймер Javascript, который я использовал несколько раз для разных целей, и я адаптировал его для этой функции, чтобы вы могли использовать его в качестве примера, чтобы помочь вам реализовать свою цель.
<!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(minutes):
<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 * 60000);
}
select.selectedIndex=0;
$('#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>
Code.gs:
function onOpen(){
SpreadsheetApp.getUi().createMenu('MyTools')
.addItem('Show Sidebar', 'showTimerSideBar')
.addToUi();
}
function showTimerSideBar()
{
var ui=HtmlService.createHtmlOutputFromFile('datatimer').setTitle('Exercise Timer');
SpreadsheetApp.getUi().showSidebar(ui);
}
function changeData(){
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('ColorChange');
var rg=sh.getRange('A1');
var color=rg.getBackground();
var n=new Date();
var tmr=Utilities.formatDate(n, Session.getScriptTimeZone(), "HH:mm:ss")
var rObj={color:color,timer:tmr};
ss.toast(Utilities.formatString('timer: %s color: %s', tmr,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);
}
Изображение модуля таймера на боковой панели:
Это просто небольшая тестовая установка, которая проверяет цвет ячейки A1 каждую минуту или что бы вы ни выбрали. Вы можете запустить таймер, остановить таймер, сделать один пинг в любое время. Таймеры вызывают функцию с именем changeData (), которая генерирует строку времени и считывает цвет фона ColorChange! A1. Он возвращает эту информацию клиенту и вызывает функцию на стороне клиента для сохранения данных на листе с именем «Данные».
Так выглядят таблицы данных после нескольких образцов и однократного пинга.
