Estamos tratando de mostrar / ocultar un número de teléfono en un sitio en la vista móvil solo dado el horario comercial de nuestro cliente.
Ex. Están abiertos de 9 a.m. a 5 p.m., de lunes a jueves, y el número debe mostrarse en todos los tamaños de navegador, sin embargo, cuando están cerrados por el resto del tiempo, el número no debe mostrarse en la vista móvil, sino que debe mostrarse en las ventanas gráficas de la tableta y el escritorio .
Aquí está el javascript que estamos utilizando, no formateado por días y horas todavía.
¿Cómo debemos hacer que esto funcione?
var d = new Date();
var dayOfWeek = d.getDay();
var hour = d.getHours();
var status = 'open';
if (dayOfWeek > 2 && dayOfWeek < 6 && hour > 9 && hour < 20) {
status='open';
} else {
status='closed';
}
if (status==='open') {
document.getElementById("mobile-number-hide").style.display =
'block';
} else {
document.getElementById("mobile-number-hide").style.display =
'none';
}
3 respuestas
Hemos resuelto nuestra pregunta de codificación. Aquí están los resultados:
var d = new Date();
var central_d = d.toLocaleString("en-US", {timeZone: "America/Chicago"});
if (central_d.includes("PM")){
var add_time = 12;
} else {
var add_time = 0;
}
var dayOfWeek = d.getDay();
var hour = parseFloat(central_d.split(', ')[1].split(':')[0]);
var hour = hour + add_time;
var status = 'open';
if (dayOfWeek > 0 && dayOfWeek < 5 && hour >= 8 && hour <= 20 || dayOfWeek == 5 && hour >= 8 && hour <= 17 || dayOfWeek == 6 && hour >= 9 && hour <= 13){
status='open';
} else {
status='closed';
}
if (status==='open') {
vwo_$("#mobile-number-hide").vwoCss({"visibility":"show"});
} else {
vwo_$("#mobile-number-hide").vwoCss({"display":"none !important"});
}
La última declaración if else es JavaScript específico de VWO
El problema con el uso de Javascript es que el tiempo se basa en el navegador / zona horaria del visitante. Por lo tanto, las 9 p.m. en Australia no es lo mismo que las 9 p.m. en las Américas. En su lugar, podría usar PHP, lo que le tomará tiempo a su servidor. Asegúrese de que la zona horaria de su servidor esté configurada de acuerdo con la ubicación de la empresa.
Php:
<?php
function hideOnTime(){
$hideOnTime = '';
if (strtotime(date('H:i')) >= strtotime('06:00') && strtotime(date('H:i')) <= strtotime('20:00')){
$hideOnTime = 'none';
} else {
$hideOnTime = 'block';
}
return $hideOnTime;
}
?>
Y este podría ser tu CSS en línea:
<style>
@media (max-width: 860px) {
.closed {
display: <?php echo hideOnTime();?>;
}}
</style>
cuando están cerrados por el resto del tiempo, el número no debe mostrarse en la vista móvil, sino que debe mostrarse en las ventanas de tabletas y computadoras de escritorio.
if (status==='open') {
document.getElementById("mobile-number-hide").style.display =
'block';
} else {
if ( window.innerWidth < 640 ) {
document.getElementById("mobile-number-hide").style.display =
'none';
}
}
La forma más sencilla en tu caso.
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.