HTML5 clocks
alexoleron
-
Lubar -
Lubar -
Hello,
I would like to know the procedure to create an clock in HTML5, and how to make it run on my computer. I have long created many clocks in Flash, but unfortunately Flash will soon be obsolete. Is there a way to convert Flash to HTML ?? on my site "alexoleron.com"
Best regards
Alexeline
I would like to know the procedure to create an clock in HTML5, and how to make it run on my computer. I have long created many clocks in Flash, but unfortunately Flash will soon be obsolete. Is there a way to convert Flash to HTML ?? on my site "alexoleron.com"
Best regards
Alexeline
5 answers
Hello,
In HTML alone, it's not possible; you need JavaScript and CSS:
https://www.qwant.com/?q=javascript+css+horloge&t=web
--
Courage, the end of the tunnel is not far, you just have to turn around.
In HTML alone, it's not possible; you need JavaScript and CSS:
https://www.qwant.com/?q=javascript+css+horloge&t=web
--
Courage, the end of the tunnel is not far, you just have to turn around.
Hello and thank you for the quick response,
I will read and reread, but what would really help me is a model, even simple, that I could run on my computer, that I could modify to understand what I’m doing.
What software do I need to run the script??
Then can I run it directly on my computer ??
My questions may seem naïve but when you start something you need a minimum of explanation, I’m nearly 80 and everything I know I learned on the net.
I’m learning fairly quickly, but I need a minimum of explanation.
Thanks again for your help.
Best regards
Alexeline
I will read and reread, but what would really help me is a model, even simple, that I could run on my computer, that I could modify to understand what I’m doing.
What software do I need to run the script??
Then can I run it directly on my computer ??
My questions may seem naïve but when you start something you need a minimum of explanation, I’m nearly 80 and everything I know I learned on the net.
I’m learning fairly quickly, but I need a minimum of explanation.
Thanks again for your help.
Best regards
Alexeline
Hello,
for explanations the simplest is to search for yourself, starting with generalities and moving toward a specific goal.
Without being unaffordable for anyone this presupposes notions of techniques and technologies.
You mention HTML in its version 5 but do you practice HTML?
What you are asking refers to other technologies that are associated with HTML and are nested in the text of this language.
HTML is the presentation of content and its nomenclature, a text equivalent to a shopping list except that the content is not HTML, it is included.
To write in a text (HTML, i.e. "Hypertext Markup Language" in English) an image will be provided by indicating its address on the network that allows it to load and display in the browser.
The separation is made between content and form. For example, the texts displayed on the page are indicated differently depending on whether they are a paragraph, a heading or another nature...
The layout, presentation such as frames, colors, text sizes is modified by an auxiliary technology that is grafted/included into the HTML text file.
It is CSS that allows for presentation/layout. Ideally it is in an external file loaded by HTML.
The same goes for JavaScript which can also be included in HTML.
JavaScript is a programming language (which HTML, CSS or an image are not) and allows instructions and functions.
It is particularly used for web pages (HTML) notably to respond to events caused by the user: interactivity.
In the case of an animation or changing the display of content (such as updating the time text) it is particularly convenient because it already allows retrieving the time to display it in the HTML.
This is much simpler in principle than it is to explain.
That is why you will find better information and learn better by doing the searches yourself and according to the technical keywords and points that seem obscure to you.
Even better since several technologies are involved it will be necessary to practice and this remains essential for any language.
You will easily find complete courses for all levels to follow and implement.
Then if you are only looking for the result it will require much less effort.
You will only need to copy a ready-made script into the required location.
But you first need to know, at least in the broad strokes, what it is about.
===> (search engine)===>' learn HTML, learn JavaScript, clock script, ...etc...
multiply your searches and do not limit yourself to one source
This remains a basic thing and a good learning example: a clock that will change the display of an element on the page. It brings the notion of a loop and an action (programming) performed at regular intervals: here every second.
Good work in acquiring a few basics by writing the files of a site.
for explanations the simplest is to search for yourself, starting with generalities and moving toward a specific goal.
Without being unaffordable for anyone this presupposes notions of techniques and technologies.
You mention HTML in its version 5 but do you practice HTML?
What you are asking refers to other technologies that are associated with HTML and are nested in the text of this language.
HTML is the presentation of content and its nomenclature, a text equivalent to a shopping list except that the content is not HTML, it is included.
To write in a text (HTML, i.e. "Hypertext Markup Language" in English) an image will be provided by indicating its address on the network that allows it to load and display in the browser.
The separation is made between content and form. For example, the texts displayed on the page are indicated differently depending on whether they are a paragraph, a heading or another nature...
The layout, presentation such as frames, colors, text sizes is modified by an auxiliary technology that is grafted/included into the HTML text file.
It is CSS that allows for presentation/layout. Ideally it is in an external file loaded by HTML.
The same goes for JavaScript which can also be included in HTML.
JavaScript is a programming language (which HTML, CSS or an image are not) and allows instructions and functions.
It is particularly used for web pages (HTML) notably to respond to events caused by the user: interactivity.
In the case of an animation or changing the display of content (such as updating the time text) it is particularly convenient because it already allows retrieving the time to display it in the HTML.
This is much simpler in principle than it is to explain.
That is why you will find better information and learn better by doing the searches yourself and according to the technical keywords and points that seem obscure to you.
Even better since several technologies are involved it will be necessary to practice and this remains essential for any language.
You will easily find complete courses for all levels to follow and implement.
Then if you are only looking for the result it will require much less effort.
You will only need to copy a ready-made script into the required location.
But you first need to know, at least in the broad strokes, what it is about.
===> (search engine)===>' learn HTML, learn JavaScript, clock script, ...etc...
multiply your searches and do not limit yourself to one source
This remains a basic thing and a good learning example: a clock that will change the display of an element on the page. It brings the notion of a loop and an action (programming) performed at regular intervals: here every second.
Good work in acquiring a few basics by writing the files of a site.
Hello and thank you,
I have noted your explanations, in fact I am looking for an HTML clock template, something I can make work to better understand how it operates. I may have searched poorly, but I didn’t find anything.
With a template I could modify and understand what I’m doing; I have indeed created many clocks in Flash, but I need to retrain, Flash is almost obsolete.
Best regards
Alexeline
my email ***@***
I have noted your explanations, in fact I am looking for an HTML clock template, something I can make work to better understand how it operates. I may have searched poorly, but I didn’t find anything.
With a template I could modify and understand what I’m doing; I have indeed created many clocks in Flash, but I need to retrain, Flash is almost obsolete.
Best regards
Alexeline
my email ***@***
The site indicated is classified as dangerous by Norton:
BLOCKED BY NortonLifeLock
Dangerous web page blocked
You attempted to access:
http://alexoleron.com/
This is a known dangerous web page. It is strongly recommended NOT to visit this page.
:-(
BLOCKED BY NortonLifeLock
Dangerous web page blocked
You attempted to access:
http://alexoleron.com/
This is a known dangerous web page. It is strongly recommended NOT to visit this page.
:-(
An example of a clock in JavaScript.
But well, for learning it's mainly the method/syntax that matters and not a purely anecdotal example:
I could have broken it down a bit and not used the ternary test, but just to give an idea of how simple it is to do... provided you know the basics of JavaScript... school exercise that usually covers several basic concepts and gives a fairly quick result (5 lines of code here)
But well, for learning it's mainly the method/syntax that matters and not a purely anecdotal example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JavaScript clock example</title> <script> function timeDisp(){ let nowdate=new Date(); document.getElementById('horloge').innerHTML=(nowdate.getHours()>9?nowdate.getHours():'0'+nowdate.getHours())+':'+(nowdate.getMinutes()>9?nowdate.getMinutes():'0'+nowdate.getMinutes())+':'+(nowdate.getSeconds()>9?nowdate.getSeconds():'0'+nowdate.getSeconds()); } setInterval(timeDisp, 1000);//-- clock accuracy to the second </script> </head> <body> <span id=horloge></span> </body> </html> I could have broken it down a bit and not used the ternary test, but just to give an idea of how simple it is to do... provided you know the basics of JavaScript... school exercise that usually covers several basic concepts and gives a fairly quick result (5 lines of code here)
Could you send me a simple template that I could modify to better understand how it works.
Best regards
Alexeline