function ShowTime() {
var dt = new Date();
document.getElementById("lblTime").innerHTML = dt.toLocaleTimeString();
window.setTimeout("ShowTime()", 1000); // Here 1000(milliseconds) means one 1 Sec
}
this code to displays time in a label but it always shows am only?
what is the way to display am pm correctly according to time (ist+5.30).
or is there any other way to display time without refreshing page
your current time might be AM so its showing as AM. change your system time manually to PM and then check.
fiddle:
http://jsfiddle.net/Bpvpa/1/
html:
<div id="lblTime"></div>
javascript:
function ShowTime() {
document.getElementById("lblTime").innerHTML = new Date().toLocaleTimeString();
}
setInterval(ShowTime, 1000); // Here 1000(milliseconds) means one 1 Sec
Related
I'm using a dropdown list that displays different timezones onclick using moment-timezone. For example when you click the dropdown labeled "est" it will display the time in eastern time, when you click "cst" the cst time will display and so on.
Anyways the problem I'm running into is this... I use setInterval(updateTime, 1000); to show the seconds tick up every second, now by doing this when a user clicks on "est" and then another time zone in the dropdown list like "cst" both of those times will appear and disappear every second on top of each other. I want it so when you click on an li element the previous one that was on screen will have the property of display=none. So when u click est for example est time will display and then when u click on cst the est will be display=none and the cst time will display. Man that was a mouthful.
Is there a way to accomplish this and still use the setInterval of 1second?
Here is my code...
<div>
<li>
<ul>
<li id="tmz1">est</li>
<li id="tmz2">central</li>
<li>pacific</li>
</ul>
</li>
<div id="output1"></div>
<div id="output2"></div>
</div>
$(document).ready(function(){
var output1 = document.getElementById('output1');
var output2 = document.getElementById('output2');
document.getElementById('tmz1').onclick = function updateTime(){
output2.style.display = "none";
output1.style.display = "block";
var now = moment();
var humanReadable = now.tz("America/Los_Angeles").format('hh:mm:ssA');
output1.textContent = humanReadable;
setInterval(updateTime, 1000);
}
updateTime();
});
$(document).ready(function(){
var output2 = document.getElementById('output2');
var output1 = document.getElementById('output1');
document.getElementById('tmz2').onclick = function updateTimeX(){
output1.style.display = "none";
output2.style.display = "block";
var now = moment();
var humanReadable =
now.tz("America/New_York").format('hh:mm:ssA');
output2.textContent = humanReadable;
setInterval(updateTimeX, 1000);
}
updateTimeX();
});
Perhaps this will help. I believe you've overcomplicated this just a bit. I've provided comments in the code for you to review.
Note: I did not use moment.js as it is unecessary for your task.
You need:
a time from a Date object
a timezone reference that will
change upon click
an interval that will publish the time (with
the changing TZ)
Someplace to put the output
// place to put the output
const output = document.getElementById('output');
// starting timezone
var tz = 'America/New_York';
// Capture click event on the UL (not the li)
document.getElementsByTagName('UL')[0].addEventListener('click', changeTZ);
function changeTZ(e) {
// e.target is the LI that was clicked upon
tz = e.target.innerText;
// toggle highlighted selection
this.querySelectorAll('li').forEach(el=>el.classList.remove('selected'));
e.target.classList.add('selected');
}
// set the output to the time based upon the changing TZ
// Since this is an entire datetime, remove the date with split()[1] and trim it
setInterval(() => {
output.textContent = new Date(Date.now()).toLocaleString('en-US', {timeZone: `${tz}`}).split(',')[1].trim();
}, 1000);
.selected {
background-color: lightblue;
}
<div>
<ul>
<li class="selected">America/New_York</li>
<li>America/Chicago</li>
<li>America/Los_Angeles</li>
</ul>
<div id="output"></div>
</div>
Assign your setInterval to a variable and clear it when a user selects the new value form dropdown and restart the interval with new value
var interval = setInterval(updateTime, 1000);
if(oldValue !== newValue){
clearInterval(interval)
}
I'm trying to write a script that will allow me to redirect to a web page every Friday at a specific time.
Was hoping to have the script redirect to an Iframe for a live video feed, and after an hour, have the script also redirect to a html file that will be stored on the pc running a splash page till the next feed the following week, which will start the script again based on day and time.
Been trying for the past 3 hours to salvage something from scripts I've found on stack overflow with no success. Would GREATLY appreciate some help on this!
I Hope this will works for You.
function myFunction() {
var d = new Date();
var n = d.getDay()
var time=.getHours()
if(n==5)
{
//based on time
if(time==14)
{
window.location.href="www.YourRedirectpage.com";
}
}
This should work (ES5 syntax):
Date.prototype.hour = function () {return (this.getHours())}
Date.prototype.day = function () {return (this.getDay())}
var today = new Date()
if (today.hour() == "10" && today.day() == "6") {
// change you url here, such as; location.href ="friday url";
}
else {
// keep (or re-attribute) your base url, such as; location.href ="base url";
}
I guess you want some kind of simplified job in UI which will keep watching and do redirect for you and you don't need to manually intervene much. You should use a setTimeout from Javascript to achieve this.
What this solution does that it calculates the millisecond difference between coming Friday with specific time till current date time and starts a timeout event.
Hope this is easy to understands and helps you.
GIT Repo: https://github.com/helloritesh000/how-to-redirect-browser-at-specific-date-and-time
<!DOCTYPE html>
<html>
<body onload="RedirectTo(5, 15, 49, 30);"> <!-- RedirectTo(day(1-7(Monday)-(Sunday)),1-24 hour,1-60 min,1-60 sec) -->
<h1>This will reload redirect page</h1>
# - <p id="demo"></p>
<script>
function getNextDayOfWeek(date, dayOfWeek) {
// Code to check that date and dayOfWeek are valid left as an exercise ;)
var resultDate = new Date(date.getTime());
resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7);
return resultDate;
}
function RedirectTo(day, hour, min, sec) {
var d = new Date(getNextDayOfWeek(new Date(), day));
d.setHours(hour);
d.setMinutes(min);
d.setSeconds(sec);
document.getElementById("demo").innerHTML = d;
var totalMilliSecDiff = d-new Date();
if(totalMilliSecDiff > 0)
{
setTimeout(function(){ window.location.href = "http://www.google.com"; }, totalMilliSecDiff);
}
}
</script>
</body>
</html>
I have a text field that I need only to display for a certain period of time.
I need it to appear after 5pm and stop appearing at 7am daily.
The piece of text has been saved as a variable.
How do I do this?
Thanks
You can get time using Date() object and then show and hide your text. e.g
HTML:
<div class="someClass">Your text </div>
JavaScript:
var currentDate = new Date();
var currentTime = currentDate.getHours();
if(currentTime >=17 || currentTime <=7) {
document.getElementsByClassName('someClass')[0].style.visibility = 'visible';
} else {
document.getElementsByClassName('someClass')[0].style.visibility = 'hidden';
}
In my javascript
$(document).ready(function() {
console.log((new Date().getTime() / 1000));
if ((new Date(setting.lastDate).getTime() / 1000) <= (new Date().getTime() / 1000)) {
$('.Go').removeAttr("disabled");
$( ".headertesting").replaceWith(" ");
$( ".testing" ).replaceWith( "<span class='butlabel testing' >Register Now!</span><span class='spinner'></span>" );
}
});
In my html when i run this function . It's not worked as i expected
I have a countdown date:
Example i set
lastDate = "06/01/2016 10:21:00"
So it will check my currentTime and compare it. But when it reach. the button didn't update directly. I have to refresh the page only see the result. What i want is directly button change without refresh page once time reached.
That's because $(document).ready() executes only once, when the page loads. You're probably expecting that your function executes repeatedly, maybe every second or so, so that it updates as soon as the timer reaches that condition. Try window.setTimeout or window.setInterval. Here's a related question with a good answer: What's the easiest way to call a function every 5 seconds in jQuery?.
When you say "is not working", what did you try?
var resultsEl = document.getElementById("time");
window.setInterval(function(){
resultsEl.innerText = new Date().toLocaleTimeString();
}, 1000);
<div id="time" style="height: 1em; background-color: aliceblue;"></div>
I am making an app displaying the current system time but I want to get the time my page started running so I can calculate and display the time that my page is up and running. I am using angularjs and currently has no idea on how can I get this. I have my code on getting the current system time like this
Current time is:
<span my-current-time="format1"></span>
<span my-current-time="format"></span> :
<span my-current-time="format3"></span> :
<span my-current-time="format4"></span>
<span my-current-time="format5"></span>
with this script
$scope.format1 = 'M/d/yy ';
$scope.format = 'h';
$scope.format3 = 'mm';
$scope.format4 = 'ss';
$scope.format5 = 'a';
$scope.format2 = 'Z ';
and a directive like this
.directive("myCurrentTime", function(dateFilter) {
return function(scope, element, attrs) {
var format;
scope.$watch(attrs.myCurrentTime, function(value) {
format = value;
updateTime();
});
function updateTime() {
var dt = dateFilter(new Date(), format );
element.text(dt);
}
function updateLater() {
setTimeout(function() {
updateTime(); // update DOM
updateLater(); // schedule another update
}, 1000);
}
updateLater();
}
});
I just want to display the total hours my page is currently running
first save the page load value... $scope.pageLoad = new Date()
and then use a filter to display that value
<p>running since : {{pageLoan | timespan}}</p>
and define timespan filter
angular.filter(timespan, function(time){
var now = new Date();
return (now - time) / 1000;
});