javascript - 在 hta 应用程序中使用具有滚动效果的 HTML 和 Javascript 显示当前日期和时间

标签 javascript css html hta

我有下面的 java 脚本在 hta(html 应用程序)中以给定格式 Mon Jun 2 17:54:28 UTC+0530 2014 显示当前日期,现在我想让它以类似的方式显示欢迎我系统的当前日期:Mon Jun 2 17:54:28 UTC+0530 2014 并且此文本应该具有滚动效果,例如:从右向左移动的文本。

我尝试使用下面的标签来获取可滚动的文本,但我如何在 <marquee> 中调用此 java 脚本变量?标记,这样我也可以将今天的日期和时间作为可滚动影响的一部分,但它不适用于我的 HTML 页面。

请告诉我如何解决这个问题

HTML 代码:

<marquee behavior="scroll" bgcolor="yellow" loop="-1" width="30%">
  <i><font color="blue"><strong>Welcome</strong> Today's date is : </font></i>
</marquee> 

显示当前日期和时间的 JavaScript:

 <script language="javascript">
 var today = new Date();
 document.write(today);
 </script>

最佳答案

方法一:


带有marquee标签。

HTML

<marquee behavior="scroll" bgcolor="yellow" loop="-1" width="30%">
   <i>
      <font color="blue">
        Today's date is : 
        <strong>
         <span id="time"></span>
        </strong>           
      </font>
   </i>
</marquee> 

JS

var today = new Date();
document.getElementById('time').innerHTML=today;

Fiddle demo here


方法二:


没有 marquee 标签和 CSS

HTML

<p class="marquee">
    <span id="dtText"></span>
</p>

CSS

.marquee {
   width: 350px;
   margin: 0 auto;
   background:yellow;
   white-space: nowrap;
   overflow: hidden;
   box-sizing: border-box;
   color:blue;
   font-size:18px;
}

.marquee span {
   display: inline-block;
   padding-left: 100%;
   text-indent: 0;
   animation: marquee 15s linear infinite;
}

.marquee span:hover {
    animation-play-state: paused
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

JS

var today = new Date();
document.getElementById('dtText').innerHTML=today;

Fiddle demo here

关于javascript - 在 hta 应用程序中使用具有滚动效果的 HTML 和 Javascript 显示当前日期和时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23994748/

相关文章:

javascript - 在angularjs中输入 radio 切换div

JavaScript 代码在 localhost 中有效,但在实时站点中无效?

ios - 桌面和 iPad 横向混合媒体查询

javascript - 是否可以将一个文件输入的值设置为另一个文件输入中的文件?

javascript - 如何向下滚动整个 div 以及如何突出显示事件 div

css - 具有 % 大小的 float 的特定于浏览器的行为。原因及解决方法?

javascript - 在 Javascript 中使用 Google 文字转语音

javascript - 根据搜索词动态变化

javascript - 从 src 为外部域的 iframe 中,可以通过 "parent"对象使用哪些方法?

javascript - 第一次隐藏切换栏