web-dev-qa-db-fra.com

Afficher la date et l'heure actuelles en utilisant HTML et Javascript avec des effets déroulants dans l'application hta

J'ai le script Java ci-dessous pour afficher la date actuelle dans le format donné Lun Jun 2 17:54:28 UTC + 0530 2014 dans une hta (application html), maintenant je veux que cela apparaisse d'une manière comme Welcome the current date de mon système: Lun 2 Jun 17:54:28 UTC + 0530 2014 et ce texte devrait être un ayant des effets déroulants pour par exemple: un se déplaçant de droite à gauche.

J'ai essayé d'utiliser la balise ci-dessous pour obtenir un texte défilable, mais comment puis-je appeler cette variable de script Java dans le <Marquee> tag afin que j'obtienne également la date et l'heure d'aujourd'hui dans le cadre des effets de défilement, mais cela ne fonctionne pas pour ma page HTML.

Veuillez me faire savoir comment résoudre ce problème

CODE 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 POUR AFFICHER LA DATE ET L'HEURE ACTUELLES:

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

Méthode 1:

Avec la balise 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;

Démo Fiddle ici

Méthode 2:

Sans balise Marquee et avec 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;

Démo Fiddle ici

12
Ullas

Cela vous aidera.

Javascript

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

Démo de violon

4
cracker

Essaye celui-là:

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;
}

Résultat:

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