Embedded Files
mostrar reloj en google sheets.
mostrar reloj en google sheets.
Veremos 4 formas de mostrar un reloj en Google Sheets,
primero crearemos un menú personalizado para ejecutar el código desde la interfaz de Google Sheets y después los scripts que llamaran a cada ejemplo
como puede apreciarse los scripts prácticamente son lo mismo solo hace referencia a una hoja html distina , según el ejemplo de que trate
👆 Nótese los archivos Html a la izquierda de la imagen 👆
Consulta el código y los archivos HTML al final de este articulo 🔎
Vídeo
Vídeo
si el tema fue de utilidad comparte este articulo con otras personas, nos ayudarías mucho haciendo difusión de estas propuestas 😉
codigo para el archivo .gs
codigo para el archivo .gs
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Reloj Web')
.addItem('reloj 1', 'verRelojWeb')
.addItem('reloj 2', 'verRelojWeb2')
.addItem('reloj 3', 'verRelojWeb3')
.addItem('reloj 4', 'verRelojWeb4')
.addToUi();
}
function verRelojWeb(){
var html = HtmlService.createHtmlOutputFromFile('index')
.setHeight(65)
.setWidth(160);
SpreadsheetApp.getUi().showModelessDialog(html, 'Reloj web') //.showSidebar(html);
}
function verRelojWeb2(){
var html = HtmlService.createHtmlOutputFromFile('reloj2')
.setHeight(65)
.setWidth(280);
SpreadsheetApp.getUi().showModelessDialog(html, 'Reloj web 2') //.showSidebar(html);
}
function verRelojWeb3(){
var html = HtmlService.createHtmlOutputFromFile('reloj3')
.setHeight(65)
.setWidth(210);
SpreadsheetApp.getUi().showModelessDialog(html, 'Reloj web 3') //.showSidebar(html);
}
function verRelojWeb4(){
var html = HtmlService.createHtmlOutputFromFile('reloj4')
.setHeight(65)
.setWidth(160);
SpreadsheetApp.getUi().showModelessDialog(html, 'Reloj web') //.showSidebar(html);
}
html ejemplo 1
html ejemplo 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Reloj con segundero dinamico</title>
<!-- https://es.stackoverflow.com/questions/116194/como-mostrar-hora-con-minutos-y-segundos-cambiantes ----->
<style>
body{background-color:black;}
input{padding:10px;
border-radius:8px;
background-color:black;
color:#5CE502;
font-size: 20px;
font-weight:bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script language="JavaScript">
function mueveReloj(){
momentoActual = new Date()
hora = momentoActual.getHours()
minuto = momentoActual.getMinutes()
segundo = momentoActual.getSeconds()
horaImprimible = hora + " : " + minuto + " : " + segundo
document.form_reloj.reloj.value = horaImprimible
//La función se tendrá que llamar así misma para que sea dinámica,
//de esta forma:
setTimeout(mueveReloj,1000)
}
</script>
</head>
<body onload="mueveReloj()">
<form name="form_reloj">
<input type="text" name="reloj" size="7">
</form>
</body>
</html>
html ejemplo 2
html ejemplo 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Reloj con segundero dinamico</title>
<style>
/* falta pasarlo a español */
input{padding:10px;
border-radius:20px;
border:1px solid blue;
}
</style>
<script language="JavaScript">
//var today = new Date().toLocaleDateString(); //.format('MM/DD/YYYY');
//console.log(today);
function new_clock(){
fecha = new Date();
/* hora = fecha.getHours()
minutos = fecha.getMinutes()
segundos = fecha.getSeconds() */
print_clock = "📆 " + fecha.toLocaleDateString() + " -- ⏲ " + fecha.toLocaleTimeString() ;
//print_clock = fecha + " " + hora + ":" + minutos + ":" + segundos
//print_clock = hora + ":" + minutos + ":" + segundos
document.getElementById("fecha_registro").value = print_clock
//document.subida.hora.value = print_clock
setTimeout(new_clock, 1000)
}
setTimeout(new_clock, 1000)
</script>
</head>
<body >
<div class="form-group" name="subida" onload="new_clock()">
<input type="text" class="form-control" name="hora" id="fecha_registro" name="fecha_registro" size="28" >
</div>
</body>
</html>
html ejemplo 3
html ejemplo 3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Reloj con segundero dinamico</title>
<style>
/* falta pasarlo a español */
input{padding:10px;
border-radius:20px;
border:3px solid blue;
font-size:22px;
text-align:center;
font-weight:bold;
color:red;
<!--background-color:yellow; -->
}
</style>
<script language="JavaScript">
//var today = new Date().toLocaleDateString(); //.format('MM/DD/YYYY');
//console.log(today);
function new_clock(){
imprime_hora = new Date().toLocaleTimeString();
document.getElementById("fecha_registro").value = imprime_hora
setTimeout(new_clock, 1000)
}
setTimeout(new_clock, 1000)
</script>
</head>
<body >
<div class="form-group" name="subida" onload="new_clock()">
<input type="text" class="form-control" name="hora" id="fecha_registro" name="fecha_registro" size="10" >
</div>
</body>
</html>
html ejemplo 4
html ejemplo 4
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
div{padding:10px;
border-radius:8px;
background-color:blue;/*black;*/
color:white;/*#5CE502; */
font-size: 20px;
text-align:center;
font-family: verdana;
}
</style>
</head>
<body>
<!-- adaptado de: https://www.w3schools.com/jsref/met_win_setinterval.asp
y de https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_setinterval2 -->
<div id="tiempo"></div>
<script>
var myVar = setInterval(miTimer, 1000);
function miTimer() {
var hora = new Date().toLocaleTimeString();
document.getElementById("tiempo").innerHTML = hora;
}
</script>
</body>
</html>
Síguenos y suscríbete en:
Page updated
Google Sites
Report abuse