Skip to content

Instantly share code, notes, and snippets.

@Nasirinezhad

Nasirinezhad/admin.html

Created October 27, 2017 18:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Nasirinezhad/b3cf9c3773c1eee3b53650ca922babe3 to your computer and use it in GitHub Desktop.
Save Nasirinezhad/b3cf9c3773c1eee3b53650ca922babe3 to your computer and use it in GitHub Desktop.
Download ZIP
cronometro and timer online, avable to control clients by admin
Raw
admin.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Cronómetro</title>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" />
<!-- <script src="jquery.js"></script> -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="timer">
<button id="btn-upper">Count Upper</button>
<div class="bottuns">
<div class="spac"> </div>
<div class="btup" id="upminute"> </div>
<div class="spac"> </div><div class="spac"> </div><div class="spac"> </div>
<div class="btup" id="upsecond"> </div>
<div class="spac"> </div><div class="spac"> </div><div class="spac"> </div>
<div class="btup" id="upmili"> </div>
<div class="spac"> </div>
</div>
<div class="container">
<div id="minute">00</div>
<div class="divider">:</div>
<div id="second">00</div>
<div class="divider">.</div>
<div id="milisecond">00</div>
</div>
<div class="bottuns">
<div class="spac"> </div>
<div class="btdn" id="dnminute"> </div>
<div class="spac"> </div><div class="spac"> </div><div class="spac"> </div>
<div class="btdn" id="dnsecond"> </div>
<div class="spac"> </div><div class="spac"> </div><div class="spac"> </div>
<div class="btdn" id="dnmili"> </div>
<div class="spac"> </div>
</div>
<button id="btn-downer">Count Downer</button>
<button id="btn-stop">Reset</button>
</div>
<script>
var tiempo = {
minuto: 0,
segundo: 0,
mili: 0,
countto: 1,
stime: 0,
focestop: 0
};
var tiempo_corriendo = null;
function shower(){
$("#minute").text(tiempo.minuto < 10 ? '0' + tiempo.minuto : tiempo.minuto);
$("#second").text(tiempo.segundo < 10 ? '0' + tiempo.segundo : tiempo.segundo);
$("#milisecond").text(tiempo.mili < 10 ? '0' + tiempo.mili : tiempo.mili);
}
$(document).ready(function(){
var tiempo_loader = null;
$('#dnmili').click(function(){
if(tiempo.mili > 0){
tiempo.mili--;
tiempo.stime--;
shower();
}
});
$('#dnsecond').click(function(){
if(tiempo.segundo > 0){
tiempo.segundo--;
tiempo.stime -= 100;
shower();
}
});
$('#dnminute').click(function(){
if(tiempo.minuto > 0){
tiempo.minuto--;
tiempo.stime -= 6000;
shower();
}
});
$('#upmili').click(function(){
if(tiempo.mili < 100){
tiempo.mili++;
tiempo.stime++;
shower();
}
});
$('#upsecond').click(function(){
if(tiempo.segundo < 60){
tiempo.segundo++;
tiempo.stime += 100;
shower();
}
});
$('#upminute').click(function(){
tiempo.minuto++;
tiempo.stime += 6000;
shower();
});
$('#btn-downer').click(function(){
$.ajax({
type: "POST",
url: './ajax.php',
data: {
'start': '{"minuto":'+tiempo.minuto
+',"segundo":'+tiempo.segundo
+',"mili":'+tiempo.mili
+',"countto":0,"stime":'+tiempo.stime
+',"focestop":'+tiempo.focestop+'}'
},
success: function() {
if(tiempo.focestop == 0){
tiempo.focestop = 1;
downcounting();
}else{
tiempo.focestop = 0;
$("#btn-downer").text('Count Downer');
$("#btn-upper").text('Count Upper');
clearInterval(tiempo_corriendo);
}
}
});
});
$('#btn-upper').click(function(){
$.ajax({
type: "POST",
url: './ajax.php',
data: {
'start': '{"minuto":'+tiempo.minuto
+',"segundo":'+tiempo.segundo
+',"mili":'+tiempo.mili
+',"countto":1,"stime":'+tiempo.stime
+',"focestop":'+tiempo.focestop+'}'
},
success: function() {
if(tiempo.focestop == 0){
tiempo.focestop = 1;
upcounting();
}else{
tiempo.focestop = 0;
$("#btn-upper").text('Count Upper');
$("#btn-downer").text('Count Downer');
clearInterval(tiempo_corriendo);
}
}
});
});
$('#btn-stop').click(function(){
finished();
});
});
function finished(){
tiempo = {
minuto: 0,
segundo: 0,
mili: 0,
countto: 1,
stime: 0,
focestop: 2
};
$("#btn-upper").text('Count Upper');
$("#btn-downer").text('Count Downer');
clearInterval(tiempo_corriendo);
$.ajax({
type: "POST",
url: './ajax.php',
data: {
'start': '{"minuto":'+tiempo.minuto
+',"segundo":'+tiempo.segundo
+',"mili":'+tiempo.mili
+',"countto":1,"stime":'+tiempo.stime
+',"focestop":'+tiempo.focestop+'}'
}
});
shower();
}
function upcounting(){
$("#btn-upper").text('Pause');
tiempo_corriendo = setInterval(function(){
if(tiempo.stime >= 360000){
finished();
return;
}
tiempo.mili++;
tiempo.stime++;
if(tiempo.mili >= 100)
{
tiempo.mili = 0;
tiempo.segundo++;
}
// Minutos
if(tiempo.segundo >= 60)
{
tiempo.segundo = 0;
tiempo.minuto++;
}
shower();
},10);
}
function downcounting(){
$("#btn-downer").text('Pause');
tiempo_corriendo = setInterval(function(){
if(tiempo.stime <= 0){
finished();
return;
}
if(tiempo.segundo == 0 && tiempo.minuto > 0)
{
tiempo.segundo = 59;
tiempo.minuto--;
}
if(tiempo.mili == 0 && tiempo.segundo > 0)
{
tiempo.mili = 100;
tiempo.segundo--;
}
tiempo.mili--;
tiempo.stime--;
shower();
},10);
}
</script>
</body>
</html>
Raw
ajax.php
<?php
header("Content-type:application/json");
if(isset($_POST['start'])){
$fh = fopen('data.json', 'w');
fwrite($fh, $_POST['start']);
fclose($fh);
}
include('data.json');
Raw
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Cronómetro</title>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" />
<!-- <script src="jquery.js"></script> -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="timer">
<div class="container">
<div id="minute">00</div>
<div class="divider">:</div>
<div id="second">00</div>
<div class="divider">.</div>
<div id="milisecond">00</div>
</div>
<button id="btn-comenzar">Comenzar</button>
</div>
<script>
var tiempo = {
minuto: 0,
segundo: 0,
mili: 0,
countto: 1,
stime: 0,
focestop: 2
};
var tiempo_corriendo = null;
function shower(){
$("#minute").text(tiempo.minuto < 10 ? '0' + tiempo.minuto : tiempo.minuto);
$("#second").text(tiempo.segundo < 10 ? '0' + tiempo.segundo : tiempo.segundo);
$("#milisecond").text(tiempo.mili < 10 ? '0' + tiempo.mili : tiempo.mili);
}
$(document).ready(function(){
var tiempo_loader = null;
tiempo_loader = setInterval(function(){
$.ajax({
type: "POST",
url: './ajax.php',
data: {
'load': 1
},
success: function(data) {
if(tiempo.focestop != data.focestop){
if(data.focestop == 0){
tiempo = data;
if(tiempo.countto){
upcounting();
}else{
downcounting();
}
}else if(data.focestop == 1){
tiempo.focestop = data.focestop;
$("#btn-comenzar").text('Comenzar');
clearInterval(tiempo_corriendo);
}else{
tiempo = {
minuto: 0,
segundo: 0,
mili: 0,
countto: 1,
stime: 0,
focestop: 2
};
$("#btn-comenzar").text('Comenzar');
clearInterval(tiempo_corriendo);
shower();
}
}
}
});
}, 10);
})
function upcounting(){
$("#btn-comenzar").text('Detener');
tiempo_corriendo = setInterval(function(){
if(tiempo.stime >= 360000){
$("#btn-comenzar").text('Comenzar');
clearInterval(tiempo_corriendo);
tiempo = {
minuto: 0,
segundo: 0,
mili: 0,
countto: 1,
stime: 0,
focestop: 2
};
return;
}
tiempo.mili++;
tiempo.stime++;
if(tiempo.mili >= 100)
{
tiempo.mili = 0;
tiempo.segundo++;
}
// Minutos
if(tiempo.segundo >= 60)
{
tiempo.segundo = 0;
tiempo.minuto++;
}
shower();
},10);
}
function downcounting(){
$("#btn-comenzar").text('Detener');
tiempo_corriendo = setInterval(function(){
if(tiempo.stime <= 0){
$("#btn-comenzar").text('Comenzar');
clearInterval(tiempo_corriendo);
tiempo = {
minuto: 0,
segundo: 0,
mili: 0,
countto: 1,
stime: 0,
focestop: 2
};
return;
}
if(tiempo.segundo == 0 && tiempo.minuto > 0)
{
tiempo.segundo = 59;
tiempo.minuto--;
}
if(tiempo.mili == 0 && tiempo.segundo > 0)
{
tiempo.mili = 100;
tiempo.segundo--;
}
tiempo.mili--;
tiempo.stime--;
shower();
},10);
}
</script>
</body>
</html>
Raw
style.scc
/*@import url(http://fonts.googleapis.com/css?family=Open+Sans);*/
body{background:#ddd;font-family:Open Sans;}
#timer{margin:12% auto 0;width:90%;}
#timer .container{display:table;background:#777;color:#eee;font-weight:bold;width:100%;text-align:center;text-shadow:1px 1px 4px #999;}
#timer .container div{display:table-cell;font-size:130px;padding:1%;width:auto;}
#milisecond{font-size:50px !important; padding-right: 60px !important;}
#timer .container .divider{width:auto;color:#ddd;}
button{box-sizing:border-box;background:#eee;border:none;margin:0 auto;padding:20px;width:100%;font-size:30px;color:#777;}
button:hover{background:#fff;cursor: pointer;}
.bottuns{display:table;background:#555;color:#eee;font-weight:bold;width:100%;text-align:center;text-shadow:1px 1px 4px #999;}
.bottuns div{display:table-cell;padding:1%;width:auto;}
.spac{width: 25px !important;}
.btdn{
/*width: 2px !important;*/
height: 0;
border-top: 20px solid #AAA;
border-right: 50px solid transparent;
border-bottom: 0px solid transparent;
border-left: 50px solid transparent;
border-radius: 4px;
cursor: pointer;
}
.btup{
/*width: 2px !important;*/
height: 0;
border-bottom: 20px solid #AAA;
border-right: 50px solid transparent;
border-top: 0px solid transparent;
border-left: 50px solid transparent;
border-radius: 4px;
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment