在hta应用程序中使用HTML和Javascript以及可滚动效果显示当前日期和时间

前端之家收集整理的这篇文章主要介绍了在hta应用程序中使用HTML和Javascript以及可滚动效果显示当前日期和时间前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下 java脚本以一个hta(html应用程序)中的给定格式Mon Jun 2 17:54:28 UTC 0530 2014显示当前日期,现在我想以欢迎当前日期的方式显示我的系统:Mon Jun 2 17:54:28 UTC 0530 2014,这个文本应该具有可滚动的影响,例如:一个从右向左移动.

我尝试使用下面的标签获取可滚动的文本但是如何在< marquee>中调用这个java-script变量?标记,以便我今天的日期和时间也作为可滚动影响的一部分,但它不适用于我的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>

解决方法

方法1:

使用选框标记.

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

方法2:

没有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

原文链接:https://www.f2er.com/html/226486.html

猜你在找的HTML相关文章