I want the sentence and the time in same line - javascript

Can someone help me with this. I want the words and the time scrolling at the same line because the one that i did is not joined together.
<!DOCTYPE html>
<html>
<head>
<title>Time</title>
</head>
<body>
<marquee bgcolor="blue" width"1000" height="50">
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script><body onload="startTime()"> <div id="txt"></div> Philippine Standard Time (GMT+0800)</marquee>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Time</title>
</head>
<body onload="startTime()">
<marquee bgcolor="blue" width"1000" height="50">
<div>
<span id="txt"></span>
<span>Philippine Standard Time (GMT+0800)</span>
</div>
</marquee>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</body>
</html>

Try adding style #txt {
display: inline-block;
} for display div inline with other text.

Here is the code...
<!DOCTYPE html>
<html>
<head>
<title>Time</title>
</head>
<body>
<marquee bgcolor="blue" width"1000" height="50">
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s + " Philippine Standard Time (GMT+0800)";
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script><body onload="startTime()"> <div id="txt"></div> </marquee>
</body>
</html>
Instead of using Javascript to load the time alone, and the other strings using HTML, you'd better use Javascript for both. Hope it helps...

Related

How can i get the time to update without refreshing

So the code/script is below. I want it to update without having to refresh the page. I tried putting it in a loop but the page just never loaded. Can anyone help?
Thanks
var dt = new Date();
document.getElementById("datetime").innerHTML = (("0" + dt.getDate()).slice(-2)) + "." + (("0" + (dt.getMonth() + 1)).slice(-2)) + "." + (dt.getFullYear()) + " " + (("0" + dt.getHours()).slice(-2)) + ":" + (("0" + dt.getMinutes()).slice(-2)) + ":" + (("0" + dt.getSeconds()).slice(-2)) + ":" + (("0" + dt.getMilliseconds()).slice(-2));
setinterval(timer, 1000);
Modify the code like this
setInterval(function(){
var dt = new Date();
document.getElementById("datetime").innerHTML = (("0"+dt.getDate()).slice(-2)) +"."+ (("0"+(dt.getMonth()+1)).slice(-2)) +"."+(dt.getFullYear()) +" "+ (("0"+dt.getHours()).slice(-2)) +":"+ (("0"+dt.getMinutes()).slice(-2)) +":"+ (("0"+dt.getSeconds()).slice(-2)) +":"+ (("0"+dt.getMilliseconds()).slice(-2));
}, 1);
<div id="datetime">
</div>
This will also work
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
ref: https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock

Javascript Clock - Line break

This is the current code I'm using for my clock (from a tutorial), and I'm wondering if there is a way to make the time appear above the date?
function renderTime(){
// Date
var mydate = new Date();
var year = mydate.getYear();
if(year < 1000){
year +=1900;
}
var day = mydate.getDay();
var month = mydate.getMonth();
var daym = mydate.getDate();
var dayarray = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var montharray = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
// Date End
// Time
var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
if( h == 24){
h = 0;
}
else if(h > 12){
h = h - 0;
}
// adding 0 infront of single digit values
if(h < 10){
h = "0" + h;
}
if(m < 10){
m = "0" + m;
}
if(s < 10){
s = "0" + s;
}
var myClock = document.getElementById("clockDisplay");
myClock.textContent = "" +dayarray[day]+ " " +montharray[month] + " " +daym+ " " +h+ ":" +m+ ":" +s;
myClock.innerText = "" +dayarray[day]+ " " +montharray[month] + " " +daym+ " " +h+ ":" +m+ ":" +s;
setTimeout("renderTime()", 1000);
// Time End
}
renderTime();
I'm not sure about what .textContent and .innerText does myself - I'm a beginner. HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body onLoad="renderTime()">
<div id="clockDisplay" class="container"></div>
</body>
<html>
CSS:
.container {
font-family: verdana;
font-weight: normal;
color: #000000;
text-align: right;
font-size: 20px;
}

Dynamically update time without refreshing the page

<html>
<head>
<script>
function updateClock() {
var time = now.getHours() + ':' + now.getMinutes(),
document.getElementById('current').innerHTML = time;
setTimeout(updateClock, 1000);
}
</script>
</head>
<body onload="updateClock()">
<p id="current"> </p>
</body>
</html>
Above is the code for dynamically update real time, it is not showing any thing on the browser. Would really appreciate help
Thank you.
Show time using Js :
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('current').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i
}; // add zero in front of numbers < 10
return i;
}
<body onload="startTime()">
<p id="current">Time loading..</p>
</body>
OR
Your code edited:
function updateClock() {
var now = new Date();
var time = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
document.getElementById('current').innerHTML = time;
setTimeout(updateClock, 1000);
}
<body onload="updateClock()">
<p id="current"></p>
</body>
You were missing var now = new Date(); and also now.getSeconds();.
There are some errors in updateClock:
function updateClock() {
var now = new Date()
var time = now.getHours() + ':' + now.getMinutes();
document.getElementById('current').innerHTML = time;
setTimeout(updateClock, 1000);
}
now must be a Date object.
now needed to be a date object
You had a comma instead of a semicolon after now.getMinutes(),
I recommend using
* padding
* setInterval
* window.onload instead of body onload
I added seconds to show it updates. If you only need hours and minutes, change the interval time to 10000 or so.
function pad(num) {
return String("0"+num).slice(-2);
}
function updateClock() {
var now = new Date();
var time = pad(now.getHours()) + ':' + pad(now.getMinutes()) + ":" + pad(now.getSeconds());
document.getElementById('current').innerHTML = time;
}
window.onload = function() {
setInterval(updateClock, 500); // use a shorter interval for better update
}
<p id="current"></p>

Have Time automatically be in the input type="time"

I am trying to display the current time as the value in my input upon loading the page. However, its not working for some reason. Any suggestions? Thanks for any help.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="Scripts/Global.js"></script>
<script src="Scripts/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="Styles/Design.css">
</head>
<body>
<input type="time" id="theTime">
<script>
$(document).ready( function() {
var current = new Date();
var minute = (now.getMinutes() + 1);
var seconds = now.getSeconds();
if(minute < 10)
minute = "0" + minute;
if(seconds < 10)
seconds = "0" + seconds;
var today = now.getFullYear() + '-' + minute + '-' + seconds;
$('#theTime').val(today);
});
</script>
</body>
</html>
Use
var now = new Date();
Instead of
var current = new Date();
Use valueAsDate to make the input display the value
<body>
<input type="time" id="theTime">
<script>
$(document).ready( function() {
var now = new Date();
//now2 prevents the milliseconds from showing up in the input
var now2 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds());
$('#theTime')[0].valueAsDate = now2;
});
</script>
</body>
You are using wrong variable use current instead,
$(document).ready( function() {
var current = new Date();
var minute = (current.getMinutes() + 1);
var seconds = current.getSeconds();
if(minute < 10)
minute = "0" + minute;
if(seconds < 10)
seconds = "0" + seconds;
var today = current.getFullYear() + '-' + minute + '-' + seconds;
$('#theTime').val(today);
});
See the working code here
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="Scripts/Global.js"></script>
<script src="Scripts/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="Styles/Design.css">
</head>
<body>
<input type="time" id="theTime">
<script>
$(document).ready(function() {
let now = new Date();
$('#theTime').val(now.getHours()+":"+ now.getMinutes());
});
</script>
</body>
</html>

How to implement this JavaScript in HTML

This is a JavaScript showing time hour, minute and seconds now seconds are ticking minutes change it's not static i have problem.How to implement it in HTML page ?
<script type="text/javascript">
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
t = setTimeout('startTime()', 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
</script>
Edit your body tag to
<body onload="startTime()">
<span id="txt">10:26:07</span>
Than add bellow code where you want clock to appear
Just do it:
<span id="txt"></span>
<script type="text/javascript">
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
t = setTimeout('startTime()', 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
startTime();
</script>
You need an element on your page with ID txt (see your script.)
You need to start/call your function execution startTime();
In order to allow the JS DOM parser to find your #txt place your <script> before the closing </body> tag.
<div id="txt"></div>
<script type="text/javascript">
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
t = setTimeout('startTime()', 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
startTime(); // Execute
</script>
There could be so many version of HTML Markup for your Javascript function:
One of them could be like:
<div id="txt">
</div>
<button type="button" name="click" onclick="startTime()">Click Me!</button>
DEMO FIDDLE

Categories