HTML：自动生成的日期和时间

Question

我正在尝试在 tomcat 服务器页面上实现时间戳。每当我触发按钮时，它应该始终显示当前时间和日期。

现在我正在使用这个：

<iframe src="http://free.timeanddate.com/clock/i4gxfr9k/n237/tlcn/fn2/ftb/tt0/tw0/tm3/ts1/tb4" frameborder="0" width="74" height="36"></iframe>

这是我刚刚在网上找到的自动生成的时间和日期视图。它工作正常，除了它总是可见的问题，而不仅仅是在单击按钮时。

HTML 文件：

开发。工具

<h:form enctype="multipart/form-data">


    <p:panelGrid styleClass="main-panel" columns="2">

        <f:facet name="header">
            <h:outputText value="WorkON Dev. Quality Check Tool" style="font-size:16px" />
            <h:outputLink value="https://inside-wiki.bosch.com/confluence/display/woco/18.0+Dev.+tool+according+to+Dev.+guideline"
                target="_blank">

                <h:graphicImage id="helpIcon" value="/imgs/help.png" style="margin-left:10px" />
                <p:tooltip for="helpIcon" value="Go to wiki for more information" />
            </h:outputLink>
            <p:commandButton value="Validate apl" id="valiNoApl" actionListener="#{fileManager.checkAplExistToExcel()}" ajax="false"
                style="width: 158px; height: 40px" rendered="false" />
            <p:commandButton value="Trigger Batch Validation!" id="trigerBatch" actionListener="#{fileManager.writeResultToExcel()}" ajax="false"
                style="width: 158px; height: 40px; position: relative; left: 300px;" />
            <p:tooltip for="trigerBatch" value="Validate all projects under '/WOQC' folder to excel report.  It will take some minutes!" />

        </f:facet>

        <p:panel style="width:500px;border:0; padding:0;">
            <p:panel style="border:0; padding:0;">              
                <p:fileUpload fileUploadListener="#{validator.validateAll}" mode="advanced" update="projectDetails,valiResult" sizeLimit="1000000"
                    allowTypes="/(\.|\/)(gif|jpe?g|png|txt|zip)$/" multiple="true" />
                    <p id="demo"></p>

                    <script> document.getElementById("demo").innerHTML = Date(); </script>
            </p:panel>

            <p:panel style="margin-top:30px;border:0">

            <h:outputText value="                           " />
                <h:outputText value="Validation result :" style="font-weight: bold" />

            </p:panel>

            <p:dataTable id="valiResult" var="_item" value="#{validator.validationItems}">

                <p:column headerText="Code" width="10%" style="text-align:center" styleClass="pass-item-green" rendered="#{_item.result.flag == 'Pass'}">
                    <h:outputText id="valiCodePass" value="#{_item.code}" />
                    <p:tooltip for="valiCodePass" value="#{_item.content}" showEffect="slide" hideEffect="slide" />
                </p:column>

                <p:column headerText="Result" width="90%" resizable="false" styleClass="pass-item-green" rendered="#{_item.result.flag == 'Pass'}"
                    style="white-space: normal; text-align:center">
                    <h:outputText value="#{_item.result.flag} : #{_item.result.content}" rendered="#{_item.result.content != null}" />
                    <h:outputText value="#{_item.result.flag}" rendered="#{_item.result.content == null}" />

                </p:column>

                <p:column headerText="Code" width="10%" style="text-align:center" styleClass="fail-item-red" rendered="#{_item.result.flag == 'Fail'}">
                    <h:outputText id="valiCodeFail" value="#{_item.code}" />
                    <p:tooltip for="valiCodeFail" value="#{_item.content}" showEffect="slide" hideEffect="slide" />
                </p:column>

                <p:column headerText="Result" width="90%" resizable="false" styleClass="fail-item-red" rendered="#{_item.result.flag == 'Fail'}"
                    style="white-space: normal; text-align:center">
                    <h:outputText value="#{_item.result.flag} : #{_item.result.content}" />
                </p:column>

                <p:column headerText="Code" width="10%" style="text-align:center" styleClass="warn-item-yellow" rendered="#{_item.result.flag == 'Warn'}">
                    <h:outputText id="valiCodeWarn" value="#{_item.code}" />
                    <p:tooltip for="valiCodeWarn" value="#{_item.content}" showEffect="slide" hideEffect="slide" />
                </p:column>

                <p:column headerText="Result" width="90%" resizable="false" styleClass="warn-item-yellow" rendered="#{_item.result.flag == 'Warn'}"
                    style="white-space: normal; text-align:center">
                    <h:outputText value="#{_item.result.flag} : #{_item.result.content}" />
                </p:column>

            </p:dataTable>
        </p:panel>



        <p:panel id="projectDetails" style="width:500px;border:0px;padding-top: 5px;">
            <h:outputText value="Project details :" style="font-weight: bold;" />

            <p:panelGrid columns="2" style="margin-top:20px;border:0" columnClasses="project-info-col-label,project-info-col-value">    

                <h:outputText value="Project name (in source)" />
                <h:outputText value="#{validator.project.name}" />

                <h:outputText value="Project key" />
                <h:outputText value="#{validator.project.key}" />

                <h:outputText value="Language available" />
                <h:outputText value="#{validator.project.lanInfo}" />

                <h:outputText value="Interface | configed -> used" />
                <h:outputText value="#{validator.project.itfInfo}" />

                <h:outputText value="Interface | web service | used" />
                <h:outputText value="#{validator.project.itConfig.wfIterfaces.size()}" />

                <h:outputText value="Interface | old excel | used" />
                <h:outputText value="#{validator.project.itConfig.excelIterfaces.size()}" />

                <h:outputText value="Interface | database | used" />
                <h:outputText value="#{validator.project.itConfig.dbIterfaces.size()}" />

                <h:outputText value="Workflow | configured | used" />
                <h:outputText value="" rendered="#{validator.project.configuredWfs.size() == null}" />
                <h:outputText value="#{validator.project.configuredWfs.size()} -> #{validator.project.usedWfs.size()}"
                    rendered="#{validator.project.configuredWfs.size() != null}" />

                <h:outputText value="Escalation | used" />
                <h:outputText value="#{validator.project.escalationConfig.escalationItems.size()}" />

                <h:outputText value="Unused custom field amount" />
                <h:outputText value="#{validator.project.unusedCustomField}" />

                <h:outputText value="Lines of javascript" />
                <h:outputText value="#{validator.project.getJavaLines()}" />

                <h:outputText value="Lines of velocityscript" />
                <h:outputText value="#{validator.project.getVelocityLines()}" />

                <h:outputText value="Amount of used user picker" />
                <h:outputText value="#{validator.project.getUserPicker()}" />

                <h:outputText value="IssueType | configed -> used" />
                <h:outputText value="#{validator.project.getIssueTypeInfo()}" />

                <h:outputText value="IssueType list" />
                <h:outputText value="#{validator.project.getIssueType()}" />

                <h:outputText value="Used Non-standard status" />
                <h:outputText value="#{validator.project.getStatus()}" />

                <h:outputText value="Used Non-standard resolution" />
                <h:outputText value="#{validator.project.getLangPropertiesNames()}" />

                <h:outputText value="Amount of used parallel approval lines // Amount of used sequential approval lines" />
                <h:outputText value="#{validator.project.getParallelApprovalLines()} // #{validator.project.getSequentialApprovalLines()}" 
                rendered="#{validator.project.getParallelApprovalLines() != null}" />
            </p:panelGrid>
        </p:panel>



        <f:facet name="footer">
            <center>
                <h:outputText value="Innovated and developed by CI/AFR-CN  V1.4" style="color:grey" />
            </center>
        </f:facet>
    </p:panelGrid>


</h:form>

<p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">
    <f:facet name="start">
        <p:graphicImage value="/imgs/loading.gif" />
    </f:facet>

    <f:facet name="complete">
        <h:outputText value="" />
    </f:facet>
</p:ajaxStatus>

如果您知道如何在单击按钮时显示日期/时间，请回复。

提前致谢！

Answer 1

如果你愿意使用 JS 代码试试这个

你可以使用这样的脚本标签

<script>
 document.getElementById("demo").innerHTML = Date();
</script>

和这样的html标签 调用js代码

<p id="demo"></p>

它会为您提供当前日期，如果您想提高网页上更好的性能和语言，我建议您使用

moment.js

尝试使用一些 JS 代码来显示日期等，无论你在做什么，我都会是一个很好的行为

Answer 2

如果您能提供更多信息（可能是页面的完整 .html 文件？），我认为会有所帮助，但这是我的最佳猜测：

iFrame 基本上是另一个页面的窗口 - 在您的情况下，free.timeanddate 页面。但是，要使此 iFrame 隐藏或显示，您需要 javascript 或 jquery 来更改 iFrame 的可见性。这是一个 JSFiddle 的链接，可以帮助您：http://jsfiddle.net/KingOfTheNerds/dd8cy97p/

jquery 的一个例子是：

$( "button" ).click(function() {
  $( "p" ).slideToggle( "slow" );
});