Show the date and time in a visually appealing way by using HTML and JavaScript in an HTA application with scrolling effects

I have the following JavaScript code to show the current date in the format Mon Jun 2 17:54:28 UTC+0530 2014 within an HTA (HTML application). Now, I would like to display it as a welcoming message along with the current system date and time: Mon Jun 2 17:54:28 UTC+0530 2014. Additionally, I want this text to scroll from right to left for added effect.

I attempted to use the <marquee> tag for creating a scrolling effect, but I am unsure of how to incorporate the JavaScript variable into it to include today's date and time. Unfortunately, my attempts have not been successful on my HTML page.

Could you please advise on how to resolve 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>
javascriptcsshtmlhta

Answer №1

Option 1:

Utilizing the marquee element.

HTML

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

JS

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

View demo on JSFiddle

Option 2:

Alternative to using the marquee tag by utilizing 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 currentDate = new Date();
document.getElementById('dtText').innerHTML = currentDate;

View demo on JSFiddle

Answer №2

Here is a helpful solution for you.

JavaScript Code Snippet

debugger;
var currentDate = new Date();
document.getElementById('current-date').innerHTML = currentDate;

Check out the live demo on JSFiddle

Answer №3

<script>
    let currentDate = new Date();
    document.getElementById('current-date').innerHTML= currentDate.toDateString();
</script>

Answer №4

Here is a suggestion:

Code Snippet - HTML:

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

JavaScript Code:

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

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

Output:

Mon Sep 18 2017 12:40pm

Answer №5

<div id="timeDisplay" style="font:16pt Calibri; color:#0000FF;text-align: center;border:1px solid blue;background:lavender;height:60px;padding-top:15px;"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The proper method for redirecting the view after a successful AJAX request in a MVC application

Explanation of the Issue: I have added a search function to the header section of my MVC website. It includes an input text box and a 'Search' button. The Problem at Hand: Currently, I have incorporated an AJAX function in the shared master la ...

javascriptjqueryajaxasp.net-mvc

Move the cursor to the end of the text when the key is released

I've developed a feature similar to that of a command line interface. When you input commands and hit the up key, the previous command is displayed. Everything is functioning as intended, but there's one minor issue. The current problem I'm ...

javascripthtmlangular

Encountering an issue when trying to generate a button in Angular

I am currently using JavaScript to dynamically create a button in Angular. While I have been successful in creating the button, I am encountering an error when attempting to change the classname. The error message I am receiving is: Property 'clas ...

javascriptangulartypescript

Using AJAX/jQuery to populate a SelectList in an MVC view

I have a C# MVC application where I am dynamically populating a dropdown based on a selected date using AJAX/jQuery. The action called retrieves a list of items for the chosen date. The issue I'm facing is that I've previously rendered a partial ...

javascriptjqueryasp.net-mvcajaxdrop-down-menu

Error occurred in the middle of processing, preventing the headers from being set

I created a custom authentication middleware, but encountered an error. I'm puzzled about what's going wrong because I expected the next() function to resolve the issue? app.use(function(req, res, next){ if(req.user){ res.local ...

javascriptnode.jsexpress

Incorporate information into a JSON structure within SAPUI5

While diving into SAPUI5, I decided to challenge myself by creating a basic form. Unfortunately, my attempts are falling short as the new entry I'm trying to add to my JSON model isn't showing up in the file when I run my code. No error messages ...

javascriptjsonxmlsapui5

Steps for creating a node.js and ejs file to deploy on 000webhost

I have developed a simple todo-app using node.js and ejs templating. My goal is to host it using 000webhost, a free web-hosting service. I successfully hosted a react app for free on this platform by running "npm run build", which converted the ...

javascriptnode.jsreactjsejsweb-hosting

Step-by-step guide: Uploading files with Ajax in Codeigniter

I am facing an issue with updating data and uploading an image when editing a row in my grid. Although the data is successfully updated, I am encountering difficulties in saving the image file to a folder. Here is what I have tried: While using AJAX, I ...

javascriptphpjqueryajaxcodeigniter

What sets $vm.user apart from $vm.$data.user in Vuejs?

When you need to retrieve component data, there are two ways to do so: $vm.user and $vm.$data.user. Both methods achieve the same result in terms of setting and retrieving data. However, the question arises as to why there are two separate ways to access ...

javascriptperformancevue.jsvue-component

Stop jQuery from submitting the form in case of validation errors

Hey there, I'm currently working on preventing the AJAX form submission function from happening if one of the inputs fails validation. Edit: Specifically, I'm looking for guidance on what changes need to be made in //Adult age validation and var ...

javascriptjqueryajaxforms

Issue with Jquery modal not functioning properly on second attempt

Currently, I am working on developing an application using CodeIgniter. However, I have encountered a problem where the modal window does not open for the second time. Here is a more detailed explanation of the issue: The form (view) in question contains ...

javascriptjqueryajaxcodeignitertwitter-bootstrap

CSS Hue Rotate is causing the image to appear darker

The CSS filter hue-rotate seems to be darkening my image according to my observations. For an example, visit: https://jsfiddle.net/m4xy3zrn/ Comparing images with and without the filter applied, it’s clear that the filtered one appears much darker than ...

csscss-filters

Looping through an array in Vue using v-for and checking for a specific key-value pair

As I dive into my first Vue app, I've encountered a minor setback. Here's my query: How can I iterate through a list of dictionaries in Vue, specifically looping through one dictionary only if it contains a certain value for a given key? Provi ...

javascriptvue.jssyntaxiteration

Angular 4: Conditional CSS classes causing issues with transitions

After scouring through stackoverflow, I have yet to find a solution to my current issue. I am utilizing a conditional class on a div that is applied when a boolean variable becomes true. Below is the code snippet in question: <div [class.modalwindow-sh ...

htmlcssangulartypescript

The elements within the array are being refreshed accurately, however, a separate component is being removed

I have developed a component that has the ability to contain multiple Value components. Users can add as many values as they want, with the first value being mandatory and non-removable. When adding two new Value components, I provide input fields for name ...

javascriptvue.js

Utilizing HIGHCHARTS to effectively access PHP variables from a separate PHP file through Jquery/Ajax

I am facing an issue with accessing PHP variables from my main page in a PHP file called by AJAX. Is there a way to access these variables or should I include the PHP file in the one called by AJAX? PHP : variables.php <?php $myServername = "loca ...

javascriptphpjqueryajaxhighcharts

The callback for AJAX was unsuccessful

Using ajax to update form data in the database, a success response is expected but it's not functioning as intended. html <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> ...

javascriptphpjqueryajaxhtml

Mismatch of data types in Google Visualization

I am working with Google Visualization and receiving Unix Epoch timestamps that I need to convert into an array of strings for use in Google Charts. However, I keep encountering an error: Type mismatch. Value 2017-8-25 16:23:54,2017-8-25 16:11:54,... does ...

javascriptarraysjsondatetimegoogle-visualization

Could a complex, intricate clipping path be created using CSS 3?

Here is an example: Can this be achieved using only CSS? I wish to create two divs: A circle without any background or border. A div with a background. I aim to have point 1 clip the background from point 2. This will allow me to rotate the backgroun ...

htmlcss

Angular seems to be experiencing issues with maintaining context when executing a function reference for a base class method

Imagine we have CtrlOne that extends CtrlTwo, with a componentOne instantiated in the template of CtrlOne. Here is some code to illustrate the issue: class CtrlOne extends CtrlTwo { constructor() { super(); } } class CtrlTwo { sayMyName(name: st ...

javascriptangularjstypescript