web-dev-qa-db-ja.com

HTAアプリケーションでスクロール可能な効果を備えたHTMLおよびJavascriptを使用して現在の日付と時刻を表示する

次のJavaスクリプトを使用して、現在の日付を指定された形式で表示します。月6月2日17:54:28 UTC + 0530 2014（hta（htmlアプリケーション））。私のシステムの日付：Mon Jun 2 17:54:28 UTC + 0530 2014そして、このテキストは、例えば右から左に移動するものにスクロール可能な影響を与えるはずです。

下のタグを使用してスクロール可能なテキストを取得しようとしましたが、<Marquee>タグを使用すると、スクロール可能な影響の一部として今日の日付と時刻も取得できますが、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>

現在の日付と時刻を表示するジャバスクリプト：

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

方法1：

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;

ここでフィドルデモ

方法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;

ここでフィドルデモ

12
Ullas

これはあなたを助けます。

Javascript

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

フィドルデモ

4
cracker

これを試してください：

HTML：

<div id="para1"></div>

JavaScript：

document.getElementById("para1").innerHTML = formatAMPM();

function formatAMPM() {
var d = new Date(),
    minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : d.getMinutes(),
    hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
    ampm = d.getHours() >= 12 ? 'pm' : 'am',
    months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
    days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
return days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+' '+d.getFullYear()+' '+hours+':'+minutes+ampm;
}

結果：

Mon Sep 18 2017 12:40pm
2
vignesh waran
<script>
    var today = new Date;
    document.getElementById('date').innerHTML= today.toDateString();
</script>
1
donald
<div id="clockbox" style="font:14pt Arial; color:#FF0000;text-align: center; border:1px solid red;background:cyan; height:50px;padding-top:12px;"></div>
0
jp ravi