How to make button displayed from 7:30am-9:30am everyday - javascript

I know how to make the button appear if the time is hourly:
if ((hr == 7) || (hr == 8) || (hr == 9)) {
displaybutton.style.visibility = "visible";
}
But I'm not sure how to do it if I want to set it up at 7:30am to 9:30am instead of 7am to 9am.

window.onload = function(){
DisplayCurrentTime();
};
function DisplayCurrentTime() {
var date = new Date();
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
var ampm = (hours >= 12) ? "PM" : "AM";
time = hours + ":" + minutes + ":" + seconds;
if(hours>=7 && hours<10 && ampm=="AM")
{
if(minutes<=30)
{
var lblTime = document.getElementById("time");
lblTime.innerHTML = time;
$("#idbuttontoshow").css({"display":"block"});
}
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="two"></div>
<br>
<div id="time"></div>
<div id="idbuttontoshow" style="display:none;">
<button>one</button>
<button>two</button>
<button>three</button>
</div>

Related

How to Restart Countdown Timer After Every 90 Hours

$(document).ready(function()
{
var days = 03; var hours = 18; var minutes = 00; var seconds = 00;
function calculate()
{
setTimeout(calculate, 1000); $('#showDate').html(days + ':' + hours + ':' + minutes + ':' + seconds);
seconds--;
if (seconds < 0) { seconds = 59; minutes--;
if (minutes < 0) { hours--; minutes = 59;
if (hours < 0) { days--; hours = 23;
if (days < 0) { days = 0; hours = 0; minutes = 0; seconds = 0;
}}}}
}
calculate();
});
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<div id='showDate'></div>
Hope so you all will be fine.
Come to the Point, I want to reset the count down that i created using jquery after every 90 hours.
I had written below code yet.
It does not reset after 90 hours means after 3 days and 18 hours.
Kindly Help me.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
var days = 03; var hours = 18; var minutes = 00; var seconds = 00;
function calculate()
{
setTimeout(calculate, 1000); $('#showDate').html(days + ':' + hours + ':' + minutes + ':' + seconds);
seconds--;
if (seconds < 0) { seconds = 59; minutes--;
if (minutes < 0) { hours--; minutes = 59;
if (hours < 0) { days--; hours = 23;
if (days < 0) { days = 0; hours = 0; minutes = 0; seconds = 0;
}}}}
}
calculate();
});
</script>
<div id='showDate'></div>
You can try something like following :
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
var days = 00; var hours = 00; var minutes = 1; var seconds = 00;
function calculate()
{
setTimeout(calculate, 1000); $('#showDate').html(days + ':' + hours + ':' + minutes + ':' + seconds);
if(days == 0 && hours ==00 && minutes == 0 && seconds == 00)
{
minutes = 1;
}
seconds--;
if (seconds < 0) { seconds = 59; minutes--;
if (minutes < 0) { hours--; minutes = 59;
if (hours < 0) { days--; hours = 23;
if (days < 0) { days = 0; hours = 0; minutes = 0; seconds = 0;
}}}}
}
calculate();
});
</script>
<div id='showDate'></div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
var days = 03; var hours = 18; var minutes = 00; var seconds = 00;
function calculate()
{
setTimeout(calculate, 1000); $('#showDate').html(days + ':' + hours + ':' + minutes + ':' + seconds);
seconds--;
if (seconds < 0) { seconds = 59; minutes--;
if (minutes < 0) { hours--; minutes = 59;
if (hours < 0) { days--; hours = 23;
if (days < 0) { days = 0; hours = 0; minutes = 0; seconds = 0;
}}}}
if((seconds == 0) && (minutes == 0) && (hours == 0) && (days == 0))
{
days = 03;
hours = 18;
minutes = 00;
seconds = 20;
}
}
calculate();
});
</script>
<div id='showDate'></div>

Bootstrap dynamic hours refreshing issue

tl;dr : I want to refresh time inside the popover without having to toggle it again (by clicking). When it's opened, it update the time.
I'm trying to make my popover refresh but I can't find a way to do it. I have dynamic hours in it, it needs to change every seconds. It is the only content that will need to be refresh even when the page is active. The other will update if we toggle it, if I need to update it too. I tried to search many ways to do it but couldn't find any clues.
<div class="col-md-8" style="padding-top:50px;position: relative;">
<canvas class="canvas" id="canvas" width="650px" height="450px">Votre
navigateur ne supporte pas le canevas.
</canvas>
 
<input type="image" src="images/plane.png" id="planeimg" data-container="body" data-toggle="popover" data-placement="top"
title="Données du trajet" data-html="true"/>
<!-- POPOVER CONTENT -->
<div id="popover-content" class="hide">
<span>Départ : </span> <span id="departPopover">Montreal</span> <br/>
<span>Arrivée : </span> <span id="arrivePopover">Toronto</span> <br/>
<span>Prochaine ville : </span> <span id="nextCity">Toronto</span> <br/>
<span>Vitesse : 500 km/h</span> <br/>
<span>Temps restant : </span> <span id="timeLeft">2</span> <span>h</span> <br/>
<span>Heure : </span> <span id="timeHours"></span>
</div>
</div>
Here is my Javascript code :
$(function(){
// Enables popover
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
});
// TIME FUNCTION
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('timeHours').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;
}
Thanks for the help guys!
Here's simple solution for updating clock:
function startTime() {
var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
// Pad the minutes and seconds with leading zeros
m = ( m < 10 ? "0" : "") + m;
s = ( s < 10 ? "0" : "") + s;
// AM or PM (for 24h delete this)
var time = (h < 12) ? "AM" : "PM";
// 12 hour format (for 24h delete this)
h = (h > 12) ? h - 12 : h;
// Conver an hours form 0 to 12
h = (h == 0) ? 12 : h;
// Visual compose
var display = h + ":" + m + ":" + s + " " + time;
// (for 24h )
// var display = h + ":" + m + ":" + s;
$("#timeHours").html(display);
}
$(document).ready(function(){
setInterval('startTime()', 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="timeHours"></span>
Hope it helps!

Count Down Timer shows NaN

I'm having a problem with a count down timer made in JavaScript. It was working for the last 2 weeks, but today it started to show NaN:NaN... , and I can't understand why. Here is the code, does anyone have any idea which one could be the problem?
<div id="countdownmain">
<span id="countdownmain" class="timer"></span>
</div>
<script>
var date = new Date;
var secondsnow = date.getSeconds();
var minutesnow = date.getMinutes();
var hournow = date.getHours();
var day = date.getDay();
var passatti = (secondsnow + (minutesnow*60) + (hournow*3600));
if((day==1)||(day==2)||(day==3)||(day==4)){
if(passatti < 46800){
var upgradeTime = 46800 - passatti;
}else if(passatti > 46800){
var upgradeTime = 86400 - passatti + 46800;
}
}else if((day==5)&&(passatti < 46800)){
var upgradeTime = 46800 - passatti;
}else if((day==5)&&(passatti > 46800)){
var upgradeTime = 86400 - passatti + 46800 + 86400 + 86400;
}else if((day==6)){
var upgradeTime = 86400 - passatti + 46800 + 86400;
}else if((day==7)){
var upgradeTime = 86400 - passatti + 46800;
}
var seconds = upgradeTime;
function timer() {
var now = Math.floor(Date.now() / 1000);
('0' + 11).slice(-2)
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdownmain').innerHTML = "<span class='timesm'> For same working day dispatch, order in </span><br class='appear'><span style='display:inline-block; width:45px;'><span class='hideDays glowW'>" + ('0' + days).slice(-2) + "</span></span><span class='times'> days </span><span style='display:inline-block; width:45px;'><span class='hideHours glowW'>" + ('0' + hours).slice(-2) + "</span></span><span class='times'> hours </span><span style='display:inline-block; width:45px;'><span class='hideMinutes glowW'>" + ('0' + minutes).slice(-2) + "</span></span><span class='times'> minutes </span><span style='display:inline-block; width:45px;'><span class='hideSec glowW'>" + ('0' + remainingSeconds).slice(-2) + "</span></span><span class='times'> seconds </span>";
if (seconds == 0) {
clearInterval(countdownTimer);
//document.getElementById('countdownmain').innerHTML = "Completed";
seconds = upgradeTime;
} else {
seconds--;
$('.hideSec').fadeOut('slow');
}
if(('0' + remainingSeconds).slice(-2)==00){
$('.hideMinutes').fadeOut('slow');
}
if((('0' + minutes).slice(-2)==00)&&(('0' + remainingSeconds).slice(-2)==00)){
$('.hideHours').fadeOut('slow');
}
if((('0' + hours).slice(-2)==00)&&(('0' + minutes).slice(-2)==00)&&(('0' + remainingSeconds).slice(-2)==00)){
$('.hideDays').fadeOut('slow');
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>
Unfortunately, today is Sunday! Javascript return 0 value as first of a week in getDay().
Take a look my fiddle. I just decreased day comparator value in if statement. (e.g. 1 -> 0, 2 -> 1, 3 -> 2 and so on..)

JS Code Works in jsbin and Not in jsfiddle or Chrome/Safari?

I am trying to figure out why this code is working only in jsbin and not in jsfiddle or in any web browser as an html/js file. I have tried debugging but cannot find a conclusion.
I made the mistake of coding directly in jsbin instead of a document. Any input would be appreciated.
http://jsbin.com/tuduxedohe/7/edit
http://jsfiddle.net/2rs1x5pz/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Timer</title>
<script type="text/javascript" src="part2.js"></script>
</head>
<body>
<h1><div id="time">00:00:00</div></h1>
<div id="result"></div>
<button id="start" onclick ="startClock();" >Start</button>
<button id="stop" onclick="stopTimer();">Stop</button>
<button id="clear" onclick="resetTimer();">Reset</button>
</body>
</html>
var currentTime = document.getElementById('time');
var hundreths = 0;
var seconds = 0;
var minutes = 0;
var t;
function startClock() {
function add() {
hundreths++;
if (hundreths > 99) {
hundreths = 0;
seconds++;
if (seconds > 59) {
seconds = 0;
minutes++;
}
if(minutes >= 10) {
seconds= 0;
minutes= 0;
stopTimer();
}
}
if (hundreths > 9 && seconds < 9) {
currentTime.innerHTML = "0" + minutes + ":" + "0" + seconds + ":" + hundreths;
}
else if ((seconds > 9 ) && (hundreths < 9)) {
currentTime.innerHTML = "0" + minutes + ":" + seconds + ":" + "0" + hundreths;
}
else if((seconds > 9) && (hundreths > 9)) {
currentTime.innerHTML = "0" + minutes + ":" + seconds + ":" + hundreths;
}
else if ((minutes > 9) && (seconds < 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}
else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + "0" + hundreths;
}
else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + hundreths;
}
else {
currentTime.innerHTML = "0" + minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}
timer();
}
function timer() {
t = setTimeout(add, 1);
}
timer();
} // end function start clock
function stopTimer() {
document.getElementById("result").innerHTML = "<p>" + ("Your time is: " + minutes + " minutes, " + seconds + " seconds, " + "and " + hundreths + " hundreths") + "</p>";
clearTimeout(t);
}
function resetTimer() {
hundreths = 0;
seconds = 0;
minutes = 0;
currentTime.innerHTML = "00:00:00";
}
That is because by default the script is added in a onload handler in jsfiddle, so your methods is available only inside the scope of that closure. So it will be
window.onload=function(){
//your script is here
}
You are trying to access them in global scope when you are trying to call them from on<event>="" attributes which will give an error like Uncaught ReferenceError: startClock is not defined in your console.
Change the second dropdown in the left panel under Frameworks & Extensions to body/head in the left panel of fiddle to add the script without a wrapper function
Demo: Fiddle

autoformat Time in TextBox ASP.Net Javascript

I need to format time like 10:00 PM or 12:23 AM in both 12 or 24 hour format using Javascript
10 way to do it
http://www.webdevelopersnotes.com/tips/html/formatting_time_using_javascript.php3
<script type="text/javascript">
<!--
var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12)
{
a_p = "AM";
}
else
{
a_p = "PM";
}
if (curr_hour == 0)
{
curr_hour = 12;
}
if (curr_hour > 12)
{
curr_hour = curr_hour - 12;
}
var curr_min = d.getMinutes();
document.write(curr_hour + " : " + curr_min + " " + a_p);
//-->
</script>
Here is some stuff from depressedpress.com. Hope this helps you!
Also, javascripttoolbox's date lib can also do few tricks with date-times.

Categories