I have the below java-script to display the current date in the given format Mon Jun 2 17:54:28 UTC+0530 2014 in a hta(html application), now I want to make this appear in a way like Welcome the current date of my system: Mon Jun 2 17:54:28 UTC+0530 2014 and this text should be a having scrollable affects for eg: one moving from right to left.
I tried to use the below tag to get a scrollable text but how can I call this java-script variable in the <marquee>
tag so that I get the today's date and time also as a part of the scrollable affects but it is not working for my HTML page.
Kindly let me know how to rectify this issue
HTML CODE:
<marquee behavior="scroll" bgcolor="yellow" loop="-1" width="30%">
<i><font color="blue"><strong>Welcome</strong> Today's date is : </font></i>
</marquee>
JAVASCRIPT TO DISPLAY THE CURRENT DATE AND TIME:
<script language="javascript">
var today = new Date();
document.write(today);
</script>
With marquee
tag.
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;
Without marquee
tag and with 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;