如何使用JavaScript從托管bean中顯示計時器？

Question

我目前正在研究如何將日期從托管bean傳遞到javascript，然后將其顯示為計時器，格式為"hh:mm:ss aa" ，我已經嘗試過了，但是沒有用。

代碼： DateTimeManagmentMB.java （ Managed Bean ）

import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.GregorianCalendar;
import java.util.TimeZone;
import javax.annotation.PostConstruct;

@Named(value = "dateTimeManagmentMB")
@RequestScoped
public class DateTimeManagmentMB {

private String dateFormated = new String();
private Date date = new Date();

@PostConstruct
public void init() {
    SimpleDateFormat df = new SimpleDateFormat("hh:mm:ss aa");
    Calendar calendar = new GregorianCalendar();
    calendar.setTimeZone(TimeZone.getTimeZone("Etc/UTC"));

    dateFormated = df.format(calendar.getTime());
    date = calendar.getTime();
}

public String getdateFormated() {
    return dateFormated;
}

public void setdateFormated(String dateFormated) {
    this.dateFormated = dateFormated;
}

public Date getDate() {
    return date;
}

public void setDate(Date date) {
    this.date = date;
}
}

代碼： time.xhtml

<h:head>
    <script>
        var myVar = setInterval(function() {
            initTimer()
        }, 1000);

        function initTimer(date){
            document.getElementById("timer").innerHTML = date.toLocaleTimeString();
        }
    </script>
</h:head>
<h:body onload="initTimer(#{dateTimeManagmentMB.date});">
    <p id="timer"></p>
</h:body>

注意 ，在這里我要做的是完全依靠服務器來使用和顯示時間，而不是依賴於客戶端，如果有另一種方法可以解決這種情況，請告訴我。

Answer 1

如何將其轉換為時間戳並從中創建javascript日期對象呢？

<h:head>
    <script>
        var intervalDuration = 1000;
        var currentTime = new Date();
        var myVar = setInterval(function() {
            updateDisplay()
        }, intervalDuration );

        function updateDisplay() {
            currentTime = new Date(currentTime.getTime() + intervalDuration);
            document.getElementById("timer").innerHTML = currentTime;
        }
        function initTimer(time){
            currentTime = new Date(time);
        }
    </script>
</h:head>
<h:body onload="initTimer(#{dateTimeManagmentMB.date.time});">
    <p id="timer"></p>
</h:body>