Skip to content

Instantly share code, notes, and snippets.

@quentin-aslan

quentin-aslan/timer.php

Last active September 19, 2015 01:17
Show Gist options
  • Save quentin-aslan/c25f32f36fef18cec327 to your computer and use it in GitHub Desktop.
Save quentin-aslan/c25f32f36fef18cec327 to your computer and use it in GitHub Desktop.
Download ZIP
Il est pas trop commenter mais bon... un timer en JQUERY, mise en page avec BOOTSTRAP et un tout petit peu de php pour le compteur.txt => http://petitbonhomme.co/timer.php
Raw
timer.php
<?php
/**
* Petit timer en jquery, le php est la pour établir un petit compteur
* @author Quentin Aslan <[email protected]>
* @since 18/09/2015
*/
$compteur = fopen('timerTools/compteur.txt', 'r+');
$nbVues = fgets($compteur);
$nbVues++;
fseek($compteur, 0);
fputs($compteur, $nbVues);
fclose($compteur);
?>
<!-- LOUIS, le compteur c'est un mini code php -->
<!DOCTYPE html>
<html>
<head>
<title>TIMER</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <!-- JQUERY -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- BOOTSTRAP -->
<!-- <meta charset="UTF-8" /> -->
<meta name="author" content="Quentin Aslan" />
<meta name="Since" content="18/09/2015" /> <!-- Date de création -->
</head>
<body background="timerTools/bg.jpeg">
<div class="container">
<h1 id="title" class="text-info">Timer</h1>
<div style="text-align: center;" id="divTimer">
<select class="form-control" id="valTimer">
<option>5 secondes</option>
<option>10 secondes</option>
<option>15 secondes</option>
<option>30 secondes</option>
<option>1 minutes</option>
<option>5 minutes</option>
</select>
<br /><br />
<button id="btnTimer" class="btn btn-success btn-lg">LANCER LE TIMER</button>
<h1 id="timer"></h1>
</div>
<div style="text-align: center;" id="divStop">
<a href="http://petitbonhomme.co/timer.php"><img src="http://corigif.free.fr/reveil/img/rev_013.gif" width="450" height="400" alt="C'est l'heure !!" /></a>
</div>
<footer>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<b class="text-info">Created by Quentin Aslan</b>
<b class="nav navbar-nav navbar-right text-danger">Le timer a été utiliser <i><?php echo $nbVues; ?></i> fois</b>
</div>
</nav>
</footer>
</div>
<!-- Ici le script a utiliser (C'est du JQUERY) -->
<script type="text/javascript">
$(function(){
$("#divStop").hide();
$("#btnTimer").click(function(){
var valTimer = $("#valTimer").val();
var time = 0;
switch(valTimer) {
case '5 secondes':
time = 5;
break;
case '10 secondes':
time = 10;
break;
case '15 secondes':
time = 15;
break;
case '30 secondes':
time = 30;
break;
case '1 minutes':
time = 60;
break;
case '5 minutes':
time = 300;
break;
}
$("#timer").replaceWith('<h1 id="timer">Il reste <b class="text-info">' + time + '</b> secondes</h1>');
$('#btnTimer').replaceWith('<a href="timer.html" id="btnStop" class="btn btn-danger btn-lg">Stoper le timer</a>')
var refreshTimer = setInterval(function(){
time--;
if(time == 0){
clearInterval(refreshTimer);
$("#timer").replaceWith('<h1 id="timer"><b>C\'EST L\'HEURE !!!</b></h1>');
alert("C'est l'heure !");
$("#divTimer").hide();
$("#divStop").show();
$("#title").replaceWith('<a href="timer.html"><h1 class="text-primary"><b>Le Temps et écouler !! cliquer sur l\'image pour rafaichir</b></h1></a>');
// $(location).attr('href',"timer.html"); // J'actualise la page
}else if(time <= 5){
$("#timer").replaceWith('<h1 id="timer">Il reste <b class="text-danger">' + time + '</b> secondes</h1>');
}else{
$("#timer").replaceWith('<h1 id="timer">Il reste <b class="text-info">' + time + '</b> secondes</h1>');
}
}, 1000);
});
});
</script>
</body>
</html>
@quentin-aslan
Copy link
Author

quentin-aslan commented Sep 19, 2015

Naturellement, faut crée le compteur.txt si vous reprenez le code, et faut juste changer son emplacement et donner au compteur .txt (en l'éditant) une valeur par defaut genre 1 ou 0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment