javascript show-hide an element in specific time - javascript

I want to know if it possible to show and hide an element at a specific time in o´clock ?
Let´s say I want the div show up everyday from 20:00 until 07:00.
Here is what I tried but I lack some lines which I have no idea for that. Please help.
function myTimer() {
var d = new Date();
document.getElementById("MyTime").innerHTML = d.toLocaleTimeString();
}
$( document ).ready(function() {
myTimer();
show_hide_me();
});
function show_hide_me () {
<------HERE START TO SHOW/ HIDE (I don´t know how to do it more)
("#MyElm")
if the time between 20:00 - 07:00 show();
else hide();
}
}

function show_hide_me () {
var myDate = new Date();
var hours = myDate.getHours();
if (hours > 20 || hours < 7){
$('#myElem').show();
} else {
$('#myElem').hide();
}
}
show_hide_me();
Demo: http://jsfiddle.net/robschmuecker/wkhWK/

var date = new Date();
var currentHours = date.getHours();
currentHours = ("0" + currentHours).slice(-2);
alert(currentHours);
if (currentHours > 20 || currentHours < 7){
$('#myElem').show();
}
else
{
$('#myElem').hide();
}
Demo:
http://jsfiddle.net/f349k/1/

Related

Java Script add class on div between two hours and minutes

How to add class with js between eg 14.15 and 16.15?
I have something like this:
var currentTime = new Date().getHours();
if (document.body) {
if (14 <= currentTime && currentTime < 16) {
var d = document.getElementById("div1");
d.className += "active";
} else {
}
}
<div id="div1">
</div>
How can I add minutes?
What do you mean with add class?
Perhaps this is what you are looking for:
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
You can do something like this:
var currentTime = new Date();
var currentHour = currentTime.getHours();
var currentMinute = currentTime.getMinutes();
if (
currentHour >= 14 && currentHour <= 16 &&
(
(currentHour == 14 && currentMinute >= 15) ||
(currentHour == 16 && currentMinute <= 15)
)
) {
// it is between 14:15 and 16:15
var d = document.getElementById("div1");
d.className += "active";
}
I think you should use the js Date object. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
You should use classList attribute of the Element to manage the classes. https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
We can use 3 date objects ( I'm sure that shortcuts can be employed to use fewer ). We will use one as "now", one as "today at 14:15:00" and one as "today at 16:15:00". We can easily test to see if the "now" object is within the bounds of the start and end time objects:
const dateNow = new Date();
const windowStart = new Date();
const windowEnd = new Date();
// this is offset in the sandbox
windowStart.setHours(14, 15, 0);
windowEnd.setHours(16, 15, 0);
// force for debug: un comment to verify the check below
//dateNow.setHours(15,00,00);
//debugging only
console.log(`Start of window is: ${windowStart}`);
console.log(`Now time is: ${dateNow}`);
console.log(`End of window is: ${windowEnd}`);
//check to see if we are within the window of time
if (windowStart <= dateNow && dateNow <= windowEnd) {
console.log(`we are inside the window`);
var d = document.getElementById("div1");
d.classList.add("active");
} else {
console.log(`we are outside the window`);
}

How to restrict the current date based on the hours and minutes in javascript

Disable the current date if the hour exceeds the current date hours using javascript.
I tried like this :
var d = new Date();
var restricttime = '<?php echo $restrictTime->time_restriction ?>';
var restrictmin = '<?php echo $restrictTime->restrict_min ?>';
var hour = d.getHours();
var minutes_hr = d.getMinutes();
if (restricttime >= hour) {
if (minutes_hr > restrictmin && restricttime >= hour) {
min_Date = 0;
} else {
min_Date = 1;
}
} else {
min_Date = 0;
}
$("#datepicker-13").datepicker({
minDate: min_Date
});
I think the logic is not correct in this. Please help me out.
You can use the relative date properties. Check if this works.
if(minutes_hr > restrictmin && restricttime >= hour){
min_Date= "-1d";
}else{
min_Date= new Date();
}

how to display a string only during a specific time with javascript?

I am currently making a live banner for my school website. It should include the day of the week, the date, the time, and the current period number. I'm sorted with the first three but the last one gives me trouble as it needs to be displayed only during a 45 minute period of time.
I improved my code from yesterday. Now it looks like this (CODEPEN).
BTW, Thanks to all who have helped me yesterday too! Special thanks to theRoot, for making me have my code simple
<!-->
LIVE DATE AND DAY
<-->
<style>
BODY {
font-family: arial;
}
</style>
<body onload="startTime()">
<p>
<span style="font-size:40pt;">TODAY IS A
<script>
var today = new Date();
var dd = today.getDate();
var ww = today.getDay();
var mm = today.getMonth();
var yyyy = today.getFullYear();
var suffix = ["st","nd","rd","th"];
var op = "";
var month = ["JANUARY","FEBUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"];
var day = ["MONDAY","TUESDAY","WEDNSDAY","THURSDAY","FRIDAY","SATURDAY","SUNDAY"];
if(parseInt(dd) > 4)
op+=" "+day[ww-1]+" THE "+dd+suffix[3].sup()+" OF ";
else
op+=" "+day[ww-1]+" THE "+dd+suffix[(parseInt(dd)%10)-1].sup()+" OF ";
op+=month[parseInt(mm)-1]+" "+yyyy;
document.write(op);
</script>
<script>
function startTime() {
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
m = checkTime(m);
var am = " am";
var pm = " pm";
if(h > 12) {
h =(h - 12)
document.getElementById('time').innerHTML = h+":"+m+pm.sup();
} else {
document.getElementById('time').innerHTML = h+":"+m+am.sup();
}
var t = setTimeout(function(){startTime()},500);
var period = ["WHY SO EARLY?","BEFORE SCHOOL","PERIOD 1","PERIOD 2","PERIOD 3","PERIOD 4","PERIOD 5","PERIOD 6","PERIOD 7","PERIOD 8","PERIOD 9","PERIOD 10","AFTER SCHOOL","WHY ARE STILL YOU HERE?",];
}
function checkTime(i) {
if (i<10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
<p style="font-size:40pt; display:inline;" id="time"></p>
</span>
</p>
</body>
This is what I have as of now.
Thanks.
So you can have a reference about start time for each period and then map it accordingly with period array.Here is a updated fork http://codepen.io/anon/pen/eNVdRq
var per=h*60+m;
for(var i=0;i<ptime.length-1;i++){
if(per>ptime[i]&&per<ptime[i+1]){
document.getElementById('period').innerHTML=period[i];
break;
}
}

If startTime is lesser than currenttime how to calculate proper time in this case?

I have got restaurants business startTime and endTime for the todays date .
I have a requirement as such when clicked on Order now button depending on the Restaurants startTime and endTime i need to display a alert meesage
saying services will resume with in next XX Minutes
This is my code
var startTime = '04:00 PM';
var endTime = '5:30 PM';
var now = new Date();
var startDate = dateObj(startTime);
var endDate = dateObj(endTime);
var openorclosed = now < endDate && now > startDate ? 'open' : 'closed';
if(openorclosed=='open')
{
alert('Restaurant is Open');
// do nothing
}
else if(openorclosed=='closed')
{
var diffinMinutes = getMinutesBetweenDates(startDate,now);
var minutes = Math.floor(diffinMinutes);
alert('service not available for the next '+minutes+' min');
}
function dateObj(d) {
var parts = d.split(/:|\s/),
date = new Date();
if (parts.pop().toLowerCase() == 'pm') parts[0] = (+parts[0]) + 12;
date.setHours(+parts.shift());
date.setMinutes(+parts.shift());
return date;
}
function getMinutesBetweenDates(startDate, now) {
var diff = startDate.getTime() - now.getTime();
return (diff / 60000);
}
If the startTime is bigger than the Current time then its working perfectly (Displaying correclty)
However if the startTime is lesser than the Current time then its displaying values in negative values
Could anybody please let me know how to display correclty within minutes incase startTime is lesser ??
This is my jsfiddle
http://jsfiddle.net/wajzvqqx/1/
Thank you very much .
Simple solution:
If your value is negative, add a whole day:
var diffinMinutes = getMinutesBetweenDates(startDate,now);
if (diffinMinutes < 0) diffinMinutes = diffinMinutes + 1440;
var minutes = Math.floor(diffinMinutes);
User this code when the shop is closed:
startDate.setDate(startDate.getDate()+1);
You were calculating start and end date objects from current date.
So if shop is closed for the day, add one more day to the start date.
Fiddle
Try modifying the getMinutesBetweenDate function to get the difference like this:
function getMinutesBetweenDates(startDate, now) {
var diff;
if (startDate > now) {
diff = startDate.getTime() - now.getTime();
} else {
diff = now.getTime() - startDate.getTime();
}
return (diff / 60000);
}

Failed to load resource javascript window.location

Trying to validate an age from one form i found this issue on the console of chrome.
this is my code:
<script type="text/javascript">
function CalAge() {
var dd = $("#day").val();
var mm = $("#month").val();
var yy = $("#year").val();
var age = 18;
var mydate = new Date();
mydate.setFullYear(yy, mm-1, dd);
var currdate = new Date();
currdate.setFullYear(currdate.getFullYear() - age);
if(dd !=0 || mm !=0 || yy !=0){ //whether one or all values havent been choosen
if ((currdate - mydate) < 18){
window.location = "http://www.google.com";
}
else{
alert("more than 18");
}
}
else{
alert("please register");
}
}
</script>
i wonder if is something to do with my code, because if i put the url relocation in somewhere else in the code (like on top of the conditions) it works just fine.
any suggestion
It's because if ((currdate - mydate) < 18) isn't evaluating to true.
In your example, currdate is the cutoff date for being 18 years old. Your condition should be:
if (currdate < mydate) { ... }
That is, if someone is born after the cutoff date (i.e., is less than 18 years old), then redirect to Google.
That's a good explanation given to the error... I think you have to replace the window.location with something like this: window.location.assign("http://www.google.com") and also use only one else to alert all your popups! If optional... Good luck!
Oookay! Use this:
`
function CalAge() {
var dd = $("#day").val();
var mm = $("#month").val();
var yy = $("#year").val();
var age = 18;
var mydate = new Date();
mydate.setFullYear(yy, mm-1, dd);
var currdate = new Date();
currdate.setFullYear(currdate.getFullYear() - age);
if(dd !=0 || mm !=0 || yy !=0){ //whether one or all values havent been choosen
var subit = currdate - mydate;
if (subit < 18){
window.location.href = "http://www.google.com";
}
else{
alert("more than 18");
}
}
else{
alert("please register");
}
}
</script>`
thanks good luck

Categories

Resources