Ci sono alcune circostanze in cui è utile visualizzare il tempo che scorre ad esempio per mostrare un' approssimativo tempo residuo prima che la sessione scada, oppure mostrare il tempo rimanente per dare una risposta ad un videogioco. In questi casi può risultare utile il sottostante script.
<HTML>
<HEAD>
<style type="text/css">
#container
{
margin: 5px;
padding: 5px;
height:400px;
width:100%;
display:inline;
}
p.title
{
padding: 0px;
border: 0px;
margin: 0px;
text-align: center;
background-color:blue;
color:white;
font-weight:bold;
}
p.timer
{
padding: 0px;
border: 0px;
margin: 0px;
text-align: justify;
}
#container #divTimer #divTextTimer
{
font-size: 11pt;
padding-right: 8px;
padding-left: 8px;
padding-top: 5px;
}
body
{
font-family: Arial, Tahoma, sans-serif;
font-size: 13px;
margin: 0;
padding: 10px;
}
#container #divMessage
{
border-right: black 2px solid;
padding-right: 8px;
border-top: white 2px solid;
display: none;
padding-left: 8px;
font-size: 11pt;
z-index: 10;
background: silver;
padding-bottom: 8px;
border-left: white 2px solid;
width: 400px;
color: black;
padding-top: 8px;
border-bottom: black 2px solid;
font-style: normal;
font-family: Arial;
position: absolute;
height: 130px;
}
#container #divInfo
{
border-right: black 1px solid;
padding-right: 5px;
border-top: black 1px solid;
display: none;
padding-left: 5px;
z-index: 100;
right: 0px;
padding-bottom: 5px;
border-left: black 1px solid;
width: 150px;
padding-top: 5px;
border-bottom: black 1px solid;
position: absolute;
top: 50px;
background-color: lemonchiffon;
}
#container #divTimer
{
border-right: white 1px solid;
border-top: white 1px solid;
font-size: 11pt;
z-index: 1000;
right: 0px;
background: navy;
overflow: hidden;
border-left: white 1px solid;
width: 55px;
color: aqua;
border-bottom: white 1px solid;
font-style: normal;
font-family: Arial;
position: absolute;
top: 0px;
height: 30px;
text-align: right;
cursor:default;
}
@media screen
{
#container > #divMessage
{
position: fixed;
}
#container > #divTimer
{
position: fixed;
}
#container > #divTimer > #divTextTimer
{
position: fixed;
}
}
#container #divMessage #counter
{
border-top-width: 2px;
display: block;
font-weight: normal;
border-left-width: 2px;
font-size: 13pt;
border-bottom-width: 2px;
color: black;
font-style: normal;
font-family: Arial;
text-align: justify;
border-right-width: 2px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function centerDiv(idDiv, heightDiv, widthDiv)
{
var frameWidth = 0;
var frameHeight = 0;
if (self.innerWidth)
{
/* Firefox */
frameWidth = self.innerWidth;
frameHeight = self.innerHeight;
document.getElementById(idDiv).style.top = (frameHeight - heightDiv) / 2;
document.getElementById(idDiv).style.left = (frameWidth - widthDiv) / 2;
}
else if (document.documentElement && document.documentElement.clientWidth)
{
frameWidth = document.documentElement.clientWidth;
frameHeight = document.documentElement.clientHeight;
document.getElementById(idDiv).style.top = document.body.scrollTop
+ (frameHeight - heightDiv) / 2;
document.getElementById(idDiv).style.left = document.body.scrollLeft
+ (frameWidth - widthDiv) / 2;
}
else if (document.body)
{
/* IE 6 */
frameWidth = document.body.clientWidth;
frameHeight = document.body.clientHeight;
document.getElementById(idDiv).style.top = document.body.scrollTop
+ (frameHeight - heightDiv) / 2;
document.getElementById(idDiv).style.left = document.body.scrollLeft
+ (frameWidth - widthDiv) / 2;
}
else
{
return;
}
}
function myTextContent(obj,s){
if(document.all)
obj.innerText = s;
else
obj.textContent = s;
}
function scrollDiv(idDiv){
//Funzione per visualizzare sempre l'elemento anche dopo essersi
//spostati in un altro punto della pagina
if (document.all){
document.getElementById(idDiv).style.top = document.body.scrollTop;
//alert(document.getElementById(idDiv).style.top);
}
return;
}
function elapsedLockTime(){
window.clearInterval(interval);
alert("il tempo è scaduto");
//Fare qualcosa quando il tempo è scaduto.
}
function checkTimeLock(){
centerDiv("divMessage", 130, 400);
document.getElementById("divMessage").style.display = 'block';
manageCounter();
}
function scrollMessage(){
if(document.all)
{
centerDiv("divMessage", 130, 400);
//alert(document.all);
scrollDiv('divTimer');
}
}
var xCount = 15;
function manageCounter(){
myTextContent(document.getElementById("counter"), 'Il timer verrà spento automaticamente fra '
+ sTimer / 1000 + ' secondi');
if (sTimer <= 0)
elapsedLockTime();
return
}
var sTimer = 0;
var showMessageDiv = 0;
var interval;
function showLockTimer(time){
sTimer = time + xCount * 1000;
showRemainingLockTime();
interval = window.setInterval(showRemainingLockTime, 1000);
}
function showRemainingLockTime(){
var s;
s = (sTimer/60000 < 10 ? '0':'') + parseInt(sTimer/60000,0) + ":"
+ (((sTimer / 1000) % 60) < 10 ? '0':'')
+ ((sTimer / 1000) % 60);
myTextContent(document.getElementById("divTextTimer"),s);
if (sTimer <= xCount * 1000)
{
if (showMessageDiv == 0)
{
centerDiv("divMessage", 130, 400);
document.getElementById("divMessage").style.display = 'block';
showMessageDiv = 1;
}
manageCounter();
}
sTimer -= 1000;
}
var x=0;
var scrollDir = 0;
var scrollWidth = 45;
function scrollTimer()
{
if (scrollDir==0)
{
x+=2;
if (x<scrollWidth)
{
document.getElementById('divTimer').style.width = 55-parseInt(x,0);
window.setTimeout("scrollTimer()",10);
}
}
else
{
x-=2;
if (x>0)
{
document.getElementById('divTimer').style.width = 55-parseInt(x,0);
window.setTimeout("scrollTimer()",10);
}
}
}
function setScrollDir()
{
if (x<scrollWidth)
{
scrollDir = 0;
}
else
{
scrollDir = 1;
}
scrollTimer();
}
function showInfo()
{
var n;
n = document.getElementById('divTimer').style.top.substring(
0,document.getElementById('divTimer').style.top.length-2);
if (n=="") n=0;
n = parseInt(n,0)+ 30;
document.getElementById('divInfo').style.top = n + 'px';
document.getElementById('divInfo').style.display='block';
}
function closeInfo(){
document.getElementById('divInfo').style.display='none';
}
//]]>
</script>
</HEAD>
<body onscroll="scrollMessage();scrollDiv('divTimer')" onload="showLockTimer((1 * 60000) - 30000)">
<div id="container">
<div id="divTimer" onmouseover="showInfo()" onclick="setScrollDir()" onmouseout="closeInfo()">
<div id="divTextTimer"></div>
</div>
<div id="divInfo">
<p class="timer">Tempo rimanente</p>
</div>
<div id="divMessage">
<p class="title">ATTENZIONE</p>
<p align="justify">
<strong>Il tempo a disposizione per compiere l'attività.</strong>
</p>
<span id="counter"> </span>
</div>
</div>
</body>
</html>
