Обновите часы в режиме реального времени, передав переменную из PHP в JavaScript
Я могу заставить часы показывать правильное время на основе $time_zone1. Все идет нормально. Единственная проблема в том, что часы обновляются не каждую секунду или вообще. Я боролся с решением, в котором время создается в javascript (вместо использования $current_time_formatted), но это не сработало, поскольку javascript всегда создавал часы, используя мое местное время вместо времени, установленного в $time_zone1.
Кроме того, я хочу иметь возможность изменить «Америку/Нью_Йорк» на другой часовой пояс. Итак, в PHP я получу определенный часовой пояс, скажем, сейчас $time_zone='Europe/London'. Итак, каким-то образом мне нужно указать javascript, чтобы он создавал часы для «Европы/Лондона» вместо «Америки/Нью_Йорка». То есть,
$time_zone1 = new DateTime('now', new DateTimeZone($time_zone))
<?php
// Create a DateTime object for the current time
// 'America/New_York', 'Europe/London', 'Asia/Tokyo'
$time_zone1 = new DateTime('now', new DateTimeZone('America/New_York'));
// Format the current time
$current_time_formatted = $time_zone1->format('H:i:s');
?>
<!-- Display the clock -->
<div id = "clock"><?php echo $current_time_formatted; ?> America/New_York</div>
<!-- JavaScript for updating the clock -->
<script>
function updateTime() {
// Get the clock element
var clock = document.getElementById('clock');
// Update the clock display using the PHP variable directly
clock.innerHTML = '<?php echo $current_time_formatted; ?>' + ' America/New_York';
}
// Update the clock every second
setInterval(updateTime, 1000);
</script>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете указать время в JavaScript для определенного часового пояса, используя Intl.DateTimeFormat
<?php
$time_zone = "America/New_York";
?>
<!-- Display the clock -->
<div id = "clock"> <?php echo $time_zone; ?></div>
<!-- JavaScript for updating the clock -->
<script src = "https://code.jquery.com/jquery-3.7.1.min.js" integrity = "sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo = " crossorigin = "anonymous"></script>
<script>
$(document).ready(function() {
function updateTime() {
let options = {
timeZone: "<?php echo $time_zone; ?>",
timeStyle: 'medium',
};
formatter = new Intl.DateTimeFormat([], options);
// Get the clock element
var clock = document.getElementById('clock');
// Update the clock display using the PHP variable directly
clock.innerHTML = formatter.format(new Date()) + ' <?php echo $time_zone; ?>';
}
// Update the clock every second
setInterval(updateTime, 1000);
})
</script>
Спасибо. Я обновил свой вопрос. Дело в том, что я не хочу, чтобы код был статическим только для timeZone: «Америка/Нью_Йорк». Я хочу иметь возможность получать часовой пояс в PHP и использовать его для JavaScript.
Обновлен код в соответствии с требованиями вопросов.
Большое спасибо!! Можно ли изменить clock.innerHTML = formatter.format(new Date()) + 'America/New_York'; также?
Проверьте, работает ли обновленный код... вы можете обновить $time_zone до «Азия/Токио», чтобы проверить
Вы можете расширить идею простых часов, используя простой custom-component, чтобы все функции часов были автономными и легко настраивались с помощью PHP для записи необходимого часового пояса в элемент HTML.
Класс пользовательского компонента использует Intl.DateTimeFormat для отображения времени в выбранном вами формате, который снова можно настроить путем редактирования атрибутов набора данных для компонента.
class SimpleClock extends HTMLElement{
static get observedAttributes(){
return [
'data-timeZone',
'data-timeStyle'
]
};
constructor(){
const self=super();
this.shadow=this.attachShadow( { mode:'open' } );
};
create(){
return new Promise( ( resolve, reject )=>{
let style=document.createElement('style');
style.textContent=`
div{
width: 150px;
border: 2px solid grey;
border-radius: 0.5rem;
padding: 0.5rem;
margin: 0.5rem 0.25rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: grey;
background: whitesmoke;
box-shadow: 0 0 0.5rem silver;
font-family: monospace;
font-size: 0.95rem;
}
div:after{
content: attr(data-timezone);
color: black;
font-size: smaller;
}
div:before{
content:attr(data-time)
}`;
this.shadow.appendChild( style );
this.node=this.shadow.appendChild( document.createElement('div') );
this.node.dataset.timezone=this.dataset.timezone;
resolve( true )
});
};
render(){
return new Promise( ( resolve, reject )=>{
const IntlDateFormatter=function( date, args = {} ){
let options=Object.assign(
{ timeStyle:'short', timeZone:'Europe/London' },
args
);
return new Intl.DateTimeFormat( [], options ).format( date )
};
let args = {
timeZone:this.dataset.timezone,
timeStyle:this.dataset.timestyle
}
this.node.dataset.time=IntlDateFormatter( new Date(), args );
resolve( true );
});
};
connectedCallback(){
this.create()
.then( bool=>setInterval( this.render.bind( this ), 1000 ) )
.catch( console.info )
};
}
window.customElements.define( 'simple-clock', SimpleClock );simple-clock{
display:inline-block;
margin:1rem 0.5rem;
}<simple-clock data-timeZone='Europe/London' data-timeStyle='long'></simple-clock>
<simple-clock data-timeZone='Europe/Paris' data-timeStyle='long'></simple-clock>
<simple-clock data-timeZone='Europe/Dublin' data-timeStyle='medium'></simple-clock>
<simple-clock data-timeZone='America/New_York' data-timeStyle='medium'></simple-clock>
<!--
<simple-clock data-timeZone='<?php echo $time_zone1;?>' data-timeStyle='medium'></simple-clock>
-->
echo $current_time_formattedзаполняется, когда код PHP запускается один раз на сервере, он не будет меняться каждый раз, когда вы вызываетеupdateTime(), если только вы не вызовете сервер снова. Ваш JS-код запускается в браузере, поэтому он показывает местное время, а не время сервера.