Efectos especiales de la página web de JavaScript: pico de tiempo limitado

La venta flash por tiempo limitado es un negocio en línea que reduce considerablemente el precio del producto activo dentro de un cierto tiempo predeterminado. Siempre que el comprador haga una oferta exitosa por este producto dentro de este tiempo, puede comprar el artículo original muy costoso a un precio súper bajo precio actividades de marketing. La limitación a corto plazo de las muertes repentinas por tiempo limitado dará a los usuarios un mayor sentido de urgencia y creará una atmósfera de "no se puede perder la oportunidad, y el momento nunca volverá". la cantidad puede despertar el deseo de comprar de los usuarios.

Como consumidor, no sea impulsivo y no se deje deslumbrar por el lenguaje incendiario del anfitrión y palabras como "pico de tiempo limitado", mantenga la calma cuando compre y evite comportamientos de consumo impulsivos.

1. Presentación del caso

La página muestra la imagen del producto del seckill y el tiempo restante del seckill. El tiempo restante se reduce cada 1 segundo. Cuando el tiempo restante es 0, la actividad del seckill finaliza. El efecto de ejecución del caso en el navegador Chrome se muestra en la Figura 8-10.

Figura 8-10 Efecto de caso

2. Análisis de casos

En el ejemplo, la duración de la actividad seckill es de 1 minuto. Después de cargar la página, primero calcule la hora de finalización del seckill en función de la hora actual del sistema, luego inicie el temporizador, reste la hora de finalización de la hora actual y conviértala en los segundos restantes del seckill; luego determine si el el tiempo de seckill ha expirado, si no, calcula los segundos restantes; si ha expirado, detén la cuenta regresiva del seckill. Finalmente, el tiempo restante se muestra en la posición correspondiente en un formato de dos dígitos.

3. Realización de casos

   1 <div class="box">      
   2   <div id="s"></div>       
   3 </div>
   4 <script>      
   5   var endtime = new Date(), endseconds = endtime.getTime() + 60 * 1000; 
   6   var s = 0; 
   7   var id = setInterval(function () {
   8             var nowtime = new Date();      
   9             var remaining = parseInt((endseconds - nowtime.getTime()) / 1000);    
   10            if (remaining > 0) {       
   11                s = parseInt(remaining % 60);          
   12                s = s < 10 ? '0' + s : s;
   13             } else {
   14               clearInterval(id);       
   15                s = '00';
   16             }       
   17             document.getElementById('s').innerHTML = '距离本场秒杀结束还剩:'+ s + '秒';
   18         }, 1000);   
   19  </script>  

En el código anterior, la quinta línea de código calcula la hora de finalización del seckill en función de la hora actual del sistema; la séptima línea de código inicia el temporizador; la octava y novena línea de código resta la hora de finalización de la hora actual y convierte en los segundos restantes del segundo; las líneas 11-12 obtienen los segundos restantes y los convierten a dos dígitos. La línea de código 14 se da cuenta de que cuando finaliza la actividad seckill, el temporizador se detiene y los segundos restantes se establecen en "00"; la línea de código 17 muestra los segundos restantes en la posición correspondiente. 


Explicación en video: efectos especiales de la página web de JavaScript - tiempo limitado spike_哔哩哔哩_bilibili

Código fuente: Tsinghua University Press-Book Details-"Desarrollo front-end de JavaScript y tutorial de ejemplo (versión de video de microclase)"

Supongo que te gusta

Origin blog.csdn.net/weixin_43396749/article/details/128037080
Recomendado
Clasificación