I dont understand why checker is undefined (thus not fulfilling either condition ===0 or ==1).
It seemed to work in the JS Fiddle without the ready function around it, but it does not work on the live system.
var checker = 0;
$(window).ready(function () {
function wertelesen() {
alert(checker);
if ($("#ersterstatus").html() == '1') {
if (checker === 0) {
alert(checker);
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
$("#status1time").html(hours + ":" + minutes + ":" + seconds);
var checker = 1;
}
$("#sd1").html('<img src="img/Status01.png" alt="Status aktiv" class="statusleuchte">');
}
if ($("#ersterstatus").html() == '0') {
if (checker === 1) {
alert(checker);
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
$("#status1time").html(hours + ":" + minutes + ":" + seconds);
var checker = 0;
}
$("#sd1").html('<img src="img/Status00.png" alt="Status inaktiv" class="statusleuchte">');
}
setTimeout(wertelesen, 1000);
}
setTimeout(wertelesen, 1000);
});
</script>
You are re-declaring checker from a global to a local scope:
$("#status1time").html(hours + ":" + minutes + ":" + seconds);
var checker = 1;
Just change this to:
$("#status1time").html(hours + ":" + minutes + ":" + seconds);
checker = 1;
And as pointed out, you're doing this twice too:
$("#status1time").html(hours + ":" + minutes + ":" + seconds);
var checker = 0;
Related
Running a script to get current time for two specific locations. One time is for Mountain Time and the other is for East Coast Time. I am running into an issue where the Mountain Time clock is displaying time based on Pacific Standard Time if a user is based in a PST location. Rather than having PST is there a way for me to make sure that the two clocks are only getting MT and ET and taking into consideration daylight savings time as well?
$(document).ready(function(){
function timeDisplay() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
//var seconds = currentTime.getSeconds();
var meridiem = " ";
if(hours >= 12){
hours = hours - 12;
meridiem = "pm";
}
else{
meridiem = "am";
}
if(hours === 0){
hours = 12;
}
if(hours < 10){
hours = "0" + hours;
}
if(minutes < 10){
minutes = "0" + minutes;
}
var clockDiv = document.getElementById('stat');
clockDiv.innerText = hours + ":" + minutes + meridiem;
}
timeDisplay();
setInterval(timeDisplay, 1000);
function newYorkTimeDisplay(offset) {
var currentTime = new Date();
currentTime.setHours(currentTime.getHours()+offset);
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
//var seconds = currentTime.getSeconds();
var meridiem = " ";
if(hours >= 12){
hours = hours - 12;
meridiem = "pm";
}
else{
meridiem = "am";
}
if(hours === 0){
hours = 12;
}
if(hours < 10){
hours = "0" + hours;
}
if(minutes < 10){
minutes = "0" + minutes;
}
var newYorkDiv = document.getElementById('newYork');
newYorkDiv.innerText = hours + ":" + minutes + meridiem;
}
newYorkTimeDisplay(+2);
setInterval(newYorkTimeDisplay, 1000, +2);
});
Any help on this is appreciated. Trying to figure out what I am missing.
Thanks in advance.
You need to get the user's current UTC timezone offset and subtract it from New York's Timezone Offset.
var tz_offset = (new Date().getTimezoneOffset()/100) - 3;
newYorkTimeDisplay(tz_offset);
$(document).ready(function() {
function timeDisplay() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
//var seconds = currentTime.getSeconds();
var meridiem = " ";
if (hours >= 12) {
hours = hours - 12;
meridiem = "pm";
} else {
meridiem = "am";
}
if (hours === 0) {
hours = 12;
}
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
var clockDiv = document.getElementById('stat');
clockDiv.innerText = hours + ":" + minutes + meridiem;
}
timeDisplay();
setInterval(timeDisplay, 1000);
function newYorkTimeDisplay(offset) {
var currentTime = new Date();
currentTime.setHours(currentTime.getHours() + offset);
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
//var seconds = currentTime.getSeconds();
var meridiem = " ";
if (hours >= 12) {
hours = hours - 12;
meridiem = "pm";
} else {
meridiem = "am";
}
if (hours === 0) {
hours = 12;
}
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
var newYorkDiv = document.getElementById('newYork');
newYorkDiv.innerText = hours + ":" + minutes + meridiem;
}
var tz_offset = (new Date().getTimezoneOffset()/100) - 3;
newYorkTimeDisplay(tz_offset);
setInterval(newYorkTimeDisplay, 1000, +2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=newYork></div>
<div id=stat></div>
var currentTime = audio.currentTime | 0;
var duration = audio.duration | 0;
it works but,
it shows the audio's total length and current time in only second format
i want to convert the default second value in Minute:Second format
Try this (lightly tested):
var seconds = currentTime % 60;
var foo = currentTime - seconds;
var minutes = foo / 60;
if(seconds < 10){
seconds = "0" + seconds.toString();
}
var fixedCurrentTime = minutes + ":" + seconds;
var currentTime = audio.currentTime | 0;
var duration = audio.duration | 0;
var minutes = "0" + Math.floor(duration / 60);
var seconds = "0" + (duration - minutes * 60);
var dur = minutes.substr(-2) + ":" + seconds.substr(-2);
var minutes = "0" + Math.floor(currentTime / 60);
var seconds = "0" + (currentTime - minutes * 60);
var cur = minutes.substr(-2) + ":" + seconds.substr(-2);
You can simply write the code yourself; it's not as if it's complicated or would ever change:
function pad(num, size) {
var s = num + '';
while (s.length < size) {
s = '0' + s;
}
return s;
}
function format_seconds(secs) {
return Math.floor(secs / 60) + ':' + (pad(secs % 60, 2));
}
dropping my own answer after 5 years and 9 months.
function() {
if(this.myAudio.readyState > 0) {
var currentTime = this.myAudio.currentTime;
var duration = this.myAudio.duration;
var seconds: any = Math.floor(duration % 60);
var foo = duration - seconds;
var min: any = foo / 60;
var minutes: any = Math.floor(min % 60);
var hours: any = Math.floor(min / 60);
if(seconds < 10){
seconds = "0" + seconds.toString();
}
if(hours > 0){
this.audioDuration = hours + ":" + minutes + ":" + seconds;
} else {
this.audioDuration = minutes + ":" + seconds;
}
}
}
I used typescript, hope this helps...
I have the following code, which is supposed to do what I need:
function fromSeconds(seconds, showHours = false) {
if(showHours) {
var hours = Math.floor(seconds / 3600),
seconds = seconds - hours * 3600;
}
var minutes = (Math.floor(seconds/60) < 10) ?
"0" + Math.floor(seconds/60) : Math.floor(seconds/60);
var seconds = (seconds % 60 > 9) ? seconds % 60 : "0" + seconds % 60;
if(showHours) {
var timestring = hours + ":" + minutes + ":" + seconds;
} else {
var timestring = minutes + ":" + seconds;
}
return timestring;
}
The problems is that I also have this:
var video = $('#home_explainer_placeholder');
video.bind("timeupdate", function() {
$('#currentTime').html(video[0].currentTime.toFixed(2));
$('#remTime').html((video[0].duration - video[0].currentTime).toFixed(2));
$('#totalTime').html(video[0].duration.toFixed(2));
});
And I don't know how to apply the first code so that for example currentTime is displayed like this: minutes:seconds.
Any help please?
With a small fixation you can leave this as that:
Demo
function fromSeconds(seconds, showHours) {
if(showHours) {
var hours = Math.floor(seconds / 3600),
seconds = seconds - hours * 3600;
}
var minutes = ("0" + Math.floor(seconds/60)).slice(-2);
var seconds = ("0" + parseInt(seconds%60,10)).slice(-2);
if(showHours) {
var timestring = hours + ":" + minutes + ":" + seconds;
} else {
var timestring = minutes + ":" + seconds;
}
return timestring;
}
var video = $('#home_explainer_placeholder');
video.bind("timeupdate", function () {
$('#currentTime').html(fromSeconds(video[0].currentTime));
$('#remTime').html(fromSeconds(video[0].duration - video[0].currentTime));
$('#totalTime').html(fromSeconds(video[0].duration));
});
You can just pass the values like video[0].currentTime to the function fromSeconds which will return the formatted string
var video = $('#home_explainer_placeholder');
video.bind("timeupdate", function () {
$('#currentTime').html(fromSeconds(video[0].currentTime));
$('#remTime').html(fromSeconds(video[0].duration - video[0].currentTime));
$('#totalTime').html(fromSeconds(video[0].duration));
});
Assuming currentTime is the time in seconds, you need to pass the value into your function.
fromSeconds returns the text your require, so fromSeconds(mytimevalue) will return mm:ss as required:
video.bind("timeupdate", function() {
$('#currentTime').html( fromSeconds(video[0].currentTime) );
$('#remTime').html( fromSeconds(video[0].duration - video[0].currentTime) );
$('#totalTime').html( fromSeconds(video[0].duration) );
});
Another option would be to use JavaScript's Date() Object, which takes milliseconds as a value:
var currentTime = new Date(video[0].currentTime * 1000);
You can then use Date.getMinutes() and Date.getSeconds() to find your values.
More details here
$('#currentTime').html(function(){
var time=video[0].currentTime.toFixed(2);
//some conversion needed in-order to convert to required format
fromSeconds(time,false)//returns time
});
I constructed a small clock out of Javascript code, and it fails to update correctly. It display's the time fine, but you have to refresh the page in order to get the clock to update correctly. Is there a way I can have my code update automatically without having to update the page every time?
Picture:
<script type="text/javascript">
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10)
minutes = "0" + minutes
var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}
document.write("<b>" + hours + ":" + minutes + " " + suffix + "</b>")
</script>
First of all, you could wrap your code in a function, say, currentTime(), changing the document.write call to a return statement, so you have a function currentTime() that returns the updated string. Then save somewhere a handle to an HTML element where you want to show the updated time, like el = document.getElementById('time'), and then use an interval like so
setInterval(function () {
el.innerHTML = currentTime();
}, 5000);
function UpdateClock(){
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
if (minutes < 10)
minutes = "0" + minutes
var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}
//document.write("<b>" + hours + ":" + minutes + " " + suffix + "</b>");
document.getElementById('myClock').innerHTML = "<b>" + hours + ":" + minutes + " " + suffix + "</b>";
}
setInterval(function(){ UpdateClock(); }, 6000);
HTML:
<div id="myClock"></div>
I am using the following Javascript code to display the time on my website. How can I make this update automatically.
Thanks
<section class="portlet grid_6 leading">
<header>
<h2>Time<span id="time_span"></span></h2>
</header>
<script type="text/javascript">
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10){
minutes = "0" + minutes
}
var t_str = hours + ":" + minutes + " ";
if(hours > 11){
t_str += "PM";
} else {
t_str += "AM";
}
document.getElementById('time_span').innerHTML = t_str;
</script>
</section>
Use setTimeout(..) to call a function after a specific time. In this specific case, it is better to use setInterval(..)
function updateTime(){
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10){
minutes = "0" + minutes
}
var t_str = hours + ":" + minutes + " ";
if(hours > 11){
t_str += "PM";
} else {
t_str += "AM";
}
document.getElementById('time_span').innerHTML = t_str;
}
setInterval(updateTime, 1000);
Add all your javascript code in a function called updateClock() placed in the <head> section of your page, and alter the <body> tag that way:
<body onload="updateClock(); setInterval('updateClock()', 1000 )">
It will recalculate and redisplay the time every second. Since you only display hours and minutes, you can use a longer interval. If you want to update time every numSeconds you should use something like
<body onload="updateClock(); setInterval('updateClock()', numSeconds * 1000 )">
And of course, this one is just one of many gazillions solutions that you can find out there.
There are plenty of clock libraries out there. Perhaps check out this previous post: How to create a jquery clock timer
try this, a tidier version:
var el = document.getElementById('time_span')
setInterval(function() {
var currentTime = new Date(),
hours = currentTime.getHours(),
minutes = currentTime.getMinutes(),
ampm = hours > 11 ? 'PM' : 'AM';
hours += hours < 10 ? '0' : '';
minutes += minutes < 10 ? '0' : '';
el.innerHTML = hours + ":" + minutes + " " + ampm;
}, 1000);
GetTime();
function GetTime(){
var CurrentTime = new Date()
var hour = CurrentTime.getHours()
var minute = CurrentTime.getMinutes()
var second = CurrentTime.getSeconds()
if(minute < 10){
minute = "0" + minute
}
if(second < 10){
second = "0" + second
}
var GetCurrentTime = hour + ":" + minute + ":" + second + " ";
if(hour > 11){
GetCurrentTime += "p.m."
}else{
GetCurrentTime += "a.m."
}
document.getElementById("CurrentTime").innerHTML = GetCurrentTime;
setTimeout(GetTime,1000)
}
<span id="CurrentTime"></span>
A bit less messy would be:
timer();
function timer(){
var now = new Date,
hours = now.getHours(),
ampm = hours<12 ? ' AM' : ' PM',
minutes = now.getMinutes(),
seconds = now.getSeconds(),
t_str = [hours-12, //otherwise: what's the use of AM/PM?
(minutes < 10 ? "0" + minutes : minutes),
(seconds < 10 ? "0" + seconds : seconds)]
.join(':') + ampm;
document.getElementById('time_span').innerHTML = t_str;
setTimeout(timer,1000);
}
The timer updates (roughly) every second (= 1000 Ms), using setTimeout from within the timer function.
​See it in action
This code output format->00:00:00 and refresh automatically like real time clock, hope it works..
function r(txt) {
document.write(tex);
}
function createTIME() {
d = new Date();
var time = addZERO(d.getHours()) + ':' + addZERO(d.getMinutes()) + ':' + addZERO(d.getSeconds());
return 'Present Time = ' + time;
}
function doDyn() {
document.getElementById('Dyn').innerHTML = createTIME();
}
function addZERO(val) {
return ((val < 10) ? '0' : '') + val;
}
GetTime();
function GetTime(){
var CurrentTime = new Date()
var hour = CurrentTime.getHours()
var minute = CurrentTime.getMinutes()
var second = CurrentTime.getSeconds()
if(minute < 10){
minute = "0" + minute
}
if(second < 10){
second = "0" + second
}
var GetCurrentTime = hour + ":" + minute + ":" + second + " ";
if(hour > 11){
GetCurrentTime += "p.m."
}else{
GetCurrentTime += "a.m."
}
<!-- Try changing innerHTML to document.getElementById("CurrentTime").value -->
document.getElementById("CurrentTime").value = GetCurrentTime;
setTimeout(GetTime,1000)
}
<span id="CurrentTime"></span>
timer();
function timer(){
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var sec = currentTime.getSeconds()
if (minutes < 10){
minutes = "0" + minutes
}
if (sec < 10){
sec = "0" + sec
}
var t_str = hours + ":" + minutes + ":" + sec + " ";
if(hours > 11){
t_str += "PM";
} else {
t_str += "AM";
}
document.getElementById('time_span').innerHTML = t_str;
setTimeout(timer,1000);
}
<header>
<h2>Time<span id="time_span"></span></h2>
</header>