Tema: cuenta regresiva script y php por inactividad
Ver Mensaje Individual
  #11 (permalink)  
Antiguo 21/11/2013, 18:19
Avatar de Dalam
Dalam
 
Fecha de Ingreso: septiembre-2010
Mensajes: 409
Antigüedad: 14 años, 3 meses
Puntos: 56
Respuesta: cuenta regresiva script y php por inactividad
Aqui lo tienes
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <script language="JavaScript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  5. <script type="text/javascript">if(typeof jQuery==='undefined'){document.write(unescape("<scri"+"pt src='js/jquery-1.3.2.min.js' type='text/javascript'></scri"+"pt>"));}</script>
  6. <style>
  7.  .alerta {
  8.  position: fixed; /* Le damos el valor Fixed para que flote */
  9.  background: #FFF; /* Color de fondo de la capa */
  10.  width: 100%;
  11.  height: 100%;
  12.  top: 0;
  13.  left: 0;
  14.  z-index: 999;
  15.  display:none;
  16. }
  17. .flota{
  18.  opacity:1.0; /* opacidad del 60% */
  19.  filter:alpha(opacity=100); /* Opacidad para IE8 y earlier */
  20.  background: white; /*Color de fondo del contenedor*/
  21.  border-radius: 8px; /* Redondeado */
  22.  box-shadow: 0px 0px 0px 1px black, 5px 5px 14px black; /* Sombra exterior */
  23.  position:absolute;
  24.  left:50%;
  25.  top:50%;
  26.  margin-left:-112px;
  27.  margin-top:-70px;
  28.  width:224px;
  29.  height:140px;
  30.  z-index:1;
  31.  color:#000;
  32. }
  33.  
  34. .flota h2 {
  35.     margin:auto;
  36.     text-align:center;
  37. }
  38. .flota span {
  39.     text-align:center;
  40.     width:100%;
  41.     position:inherit;
  42.     margin-top:20%;
  43.     font-size:36px;
  44. }
  45.  
  46. .close{
  47.  position: absolute;
  48.  display: block;
  49.  top: 0;
  50.  right: 2;
  51.  cursor: pointer;
  52.  background: url(images/eliminar.png) 0px 0px no-repeat; /* Imagen del boton */
  53.  width: auto;
  54.  height: 30px;
  55.  overflow: hidden;
  56. }
  57. </style>
  58. <script>
  59.     $(document).ready(function() {
  60.         $(".close").click(function(){ //Le decimos que al dar click en ".close"...
  61.             $(".alerta").hide("drop"); //Oculte el contenedor ".overlay" lentamente(slow) 
  62.             window.clearInterval(mytime); // Delete interval
  63.             display_c(600000); // Redefine time for new session expire
  64.             event.preventDefault(); // Anulamos el enlace...
  65.          });
  66.     });
  67. </script>
  68. <script type="text/javascript">
  69. function display_c(start){
  70. window.start = parseFloat(start);
  71. var end = 0 // change this to stop the counter at a higher value
  72. var refresh=1000; // Refresh rate in milli seconds
  73. var timeShow = 119;
  74. if(window.start >= end ){
  75.     if(window.start <= timeShow){
  76.         $(".alerta").show();
  77.     }
  78.     mytime=setTimeout('display_ct()',refresh)
  79. }
  80. else {
  81.     window.location="../login.html";
  82. }
  83. }
  84.  
  85. function display_ct() {
  86. // Calculate the number of days left
  87. var days=Math.floor(window.start / 86400);
  88. // After deducting the days calculate the number of hours left
  89. var hours = Math.floor((window.start - (days * 86400 ))/3600)
  90. // After days and hours , how many minutes are left
  91. var minutes = Math.floor((window.start - (days * 86400 ) - (hours *3600 ))/60)
  92. // Finally how many seconds left after removing days, hours and minutes.
  93. var secs = Math.floor((window.start - (days * 86400 ) - (hours *3600 ) - (minutes*60)))
  94.  
  95. var x = minutes + ":" + secs + " Minutos ";
  96.  
  97.  
  98. document.getElementById('ct').innerHTML = x;
  99. window.start = window.start - 1;
  100.  
  101. tt=display_c(window.start);
  102. }
  103. function wait(time) {
  104.     setTimeout('display_ct()',refresh);
  105. }
  106. </script>
  107. </head>
  108. <body onload="display_c(600000);">
  109. HOLA
  110. <div class="alerta" id="busca" ><!-- Mostrar div DURANTE 10 min de inactividad mientras este oculto-->
  111.     <div  class="flota" style=" width:397px; height:244px; "> 
  112.         <div class="close"> 
  113.             <a href="#">Cerrar</a> 
  114.         </div>
  115.         <h2>La sessi&oacute;n caducara en </h2>
  116. <span id='ct'></span>
  117.   </div>
  118. </div>
  119.  
  120. </body>
  121. </html>

Como veras e cambiado el evento onload de la etiqueta body, que ahora sera el tiempo total, osea la suma del tiempo que se muestra el div y el tiempo que espera para mostrarlo.

En la funcion display_c, e agragado la variable timeShow, que es el tiempo entre que se muestra el div y se realiza la redireccion a login.

E insertado un clearInterval en el codigo jquery y un relanzamiento de la funcion display_c() para cuando se pulse el vinculo cerrar
Última edición por Dalam; 22/11/2013 a las 07:36 Razón: mala escritura del codigo