Develop Reference

I'm not getting exact mysql default time format in javascript 0000-00-00 00:00:00

I've tried many ways to print out the MySQL default date time (0000-00-00 00:00:00) format in JavaScript. any help will be highly appreciated.
Thanks

you can break your date in date & time string and use as .
var date = '2017-12-11';
var time = '11:20:05';
var yourDateString = new Date(date + "T" + time+"Z");
console.log(yourDateString);
console.log(date2str(yourDateString,''));
function date2str(x, y) {
var z = {
YR: x.getFullYear(),
M: x.getMonth() + 1,
d: x.getDate(),
h: x.getHours(),
m: x.getMinutes(),
s: x.getSeconds()
};
{
var now = new Date();
var timeOpt = {hour:'2-digit', hour12:true, minute:'2-digit'};
var monthOpt = {day:'numeric', month:'short'};
var fullOpt = {day:'numeric', month:'short', year:'2-digit'};
if ( ((now - x) < 8.64e7) && (now.getDate() == z.d) ) {
var timeFragements = x.toLocaleString().toLowerCase();
if(null == timeFragements.match(/(\d+:\d+:\d+)+/)){
return x.toLocaleString("en-US", timeOpt).toLowerCase();
}
timeFragements =(timeFragements.match(/(\d+:\d+:\d+)+/)[0])
//Calculation of Am /Pm.
var hours = x.getHours();
var amPmStr = hours >= 12 ? ' pm' : ' am';
if(timeFragements.split(':')[0]<12){
return (("0" + timeFragements.split(':')[0]).slice(-2) +':'+ ("0" + timeFragements.split(':')[1]).slice(-2) + amPmStr );
}else if(timeFragements.split(':')[0]== 12){
return (("0" + (timeFragements.split(':')[0]) ).slice(-2) +':'+ ("0" + timeFragements.split(':')[1]).slice(-2) + amPmStr );
}else{
return (("0" + (timeFragements.split(':')[0]-12) ).slice(-2) +':'+ ("0" + timeFragements.split(':')[1]).slice(-2) + amPmStr );
}
} else if ( (now.getFullYear() == x.getFullYear()) && (now.getMonth() == x.getMonth()) ) {
return ("" + x.toDateString().split(' ')[1])+" "+("0" + x.getDate().toString()).slice(-2);
}else if( (now.getFullYear() == x.getFullYear()) && (now.getMonth() != x.getMonth())){
return ("" + x.toDateString().split(' ')[1])+" "+("0" + x.getDate().toString()).slice(-2);
}else if(now.getFullYear() !== x.getFullYear()){
return x.toUTCString().split(',')[1].slice(0, 12);
}
}
}

Set this countdown timer to specific time

I have a Javascript code for a countdown timer on a date. I want to use this code in a online shop order process. However I don't want to edit the date every day manually. I want that the timer counts everyday to the same target time.
Note: the variable responsible for that is: deadline
function updateTimer(deadline){
var time = deadline - new Date();
return {
'days': Math.floor( time/(1000*60*60*24) ),
'hours': Math.floor( (time/(1000*60*60)) % 24 ),
'minutes': Math.floor( (time/1000/60) % 60 ),
'seconds': Math.floor( (time/1000) % 60 ),
'total' : time
};
}
function animateClock(span){
span.className = "turn";
setTimeout(function(){
span.className = "";
},700);
}
function startTimer(id, deadline){
var timerInterval = setInterval(function(){
var clock = document.getElementById(id);
var timer = updateTimer(deadline);
clock.innerHTML = '<span>' + timer.days + '</span>'
+ '<span>' + timer.hours + '</span>'
+ '<span>' + timer.minutes + '</span>'
+ '<span>' + timer.seconds + '</span>';
//animations
var spans = clock.getElementsByTagName("span");
animateClock(spans[3]);
if(timer.seconds == 59) animateClock(spans[2]);
if(timer.minutes == 59 && timer.seconds == 59) animateClock(spans[1]);
if(timer.hours == 23 && timer.minutes == 59 && timer.seconds == 59) animateClock(spans[0]);
//check for end of timer
if(timer.total < 1){
clearInterval(timerInterval);
clock.innerHTML = '<span>0</span><span>0</span><span>0</span><span>0</span>';
}
}, 1000);
}
window.onload = function(){
var deadline = new Date("august 26, 2017 17:15:00");
startTimer("clock", deadline);
};

setInterval function is not working

I’m making a local time watch in jQuery. I wrote some piece of code but it’s not working. Here is my code:
$(document).ready(function(){
function addZero(i) {
if (i <= 9) {
i = "0" + i;
}
return i;
}
var d = setInterval(function(){
var z = new Date();
var h = addZero(z.getHours());
var m = addZero(z.getMinutes());
var s = addZero(z.getSeconds();
var a = '';
if (h > 11 ) a = "PM"
else a = "AM"
if (h == 16) h = '0'+4
$('pre').html(h + ":" + m + ":" + s + " " + "a");
},1000);
});

You made some mistakes - check code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
var d,z,h,m,s,a
function addZero(i) {
if (i <= 9) i = "0" + i;
return i;
}
d = setInterval( function(){
z = new Date();
h = addZero(z.getHours());
m = addZero(z.getMinutes());
s = addZero(z.getSeconds());
a = '';
if (h > 11 ) a = "PM"
else a = "AM"
if (h == 16) h = '0'+4
$('#timer').html(h + ":" + m + ":" + s + " " + a);
},1000);
});
</script>
<pre id="timer"></pre>

You have missed one )
$(document).ready(function(){
function addZero(i) {
if (i <= 9) {
i = "0" + i;
}
return i;
}
var d = setInterval(function(){
var z = new Date();
var h = addZero(z.getHours());
var m = addZero(z.getMinutes());
var s = addZero(z.getSeconds());
var a = '';
if (h > 11 ) {
a = "PM" ;
}
else {
a = "AM";
}
if (h == 16) {
h = '0'+4;
}
$('pre').html(h + ":" + m + ":" + s + " " + a);
},1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre></pre>

Please use below code in your code there is a function var d which is declared for setInterval but I didnt see this function as a called. so from where it will call. above answer is also fine and correct but global variable declaration is not needed here for d,z,h,m,s,a in below code. Local variable is also working.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
//var d,z,h,m,s,a
function addZero(i) {
if (i <= 9) i = "0" + i;
return i;
}
setInterval( function(){
var z = new Date();
var h = addZero(z.getHours());
var m = addZero(z.getMinutes());
var s = addZero(z.getSeconds());
var a = '';
if (h > 11 ) a = "PM"
else a = "AM"
if (h == 16) h = '0'+4
$('pre').html(h + ":" + m + ":" + s + " " + a);
},1000);
});
</script>
<pre id="timer"></pre>

Javasacript Countdown timer in Days, Hours, Minute, Seconds

I'm trying to create a time-based count down clock. It is not based upon current_dates. The initial time that will be pulled will be from a separate php file. This will be for a browser based-game. When someone clicks the button to initiate this script. it will check if certain requirements are met and if so then this script will initiate. Based upon the level of the object it will pull the initial timer for that proceeding level. Hope that makes sense. Anyhow I based the timer script off of the first code I provide.
This script only accounts for minutes and seconds. I modified it to include days and hours as well. Somewhere in the process I have messed up and the script doesn't even work at all. I'm also not quite sure if this would be the best method to calculate this. So, if you have a cleaner method at doing this please share. Thank you in advance.
This script is based off of a minutes / seconds script I saw. Here's the original source:
<span id="countdown" class="timer"></span>
<script>
var seconds = 60;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Buzz Buzz";
} else {
seconds--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
</script>
Here is the modified script that I am trying to include days, hours, minutes and seconds.
<span id="countdown"></span>
<script>
var current_level = 93578;
function timer() {
var days = Math.round(current_level/86400);
var remainingDays = Math.round(current_level - (days * 86400));
if (days <= 0){
days = current_level;
}
var hours = Math.round(remainingDays/3600);
var remainingHours = Math.round(remainingDays - (hours * 3600));
if (hours >= 24){
hours = 23;
}
var minutes = Math.round(remainingHours/60);
var remainingMinutes = Math.round(remainingHours - (minutes * 60));
if (minutes >= 60) {
minutes = 59;
}
var seconds = Math.round(remainingMinutes/60);
document.getElementById('countdown').innerHTML = days + ":" + hours ":" + minutes + ":" + seconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>

I finally got back to looking at this and re-wrote the code and this works like a charm.
var upgradeTime = 172801;
var seconds = upgradeTime;
function timer() {
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;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('countdown').innerHTML = pad(days) + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
<span id="countdown" class="timer"></span>

Personally I would use the jquery countdown timer integration. It is simple and having number of options to display in different formats. Since I am fairly new to JS as well, this was the easiest way I found to get a count/timer.
http://keith-wood.name/countdown.html

Here is my worked out and tested example, based on your code
<span id="countdown"></span>
<script>
var current_level = 3002;
function timer() {
var days = Math.floor(current_level/86400);
var remainingDays = current_level - (days * 86400);
//if (days <= 0){
// days = current_level;
//}
var hours = Math.floor(remainingDays/3600);
var remainingHours = remainingDays - (hours * 3600);
//if (hours >= 24){
// hours = 23;
//}
var minutes = Math.floor(remainingHours/60);
var remainingMinutes = remainingHours - (minutes * 60);
//if (minutes >= 60) {
// minutes = 59;
//}
var seconds = remainingMinutes;
document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds;
//if (seconds == 0) {
// clearInterval(countdownTimer);
// document.getElementById('countdown').innerHTML = "Completed";
//}
current_level--;
}
var countdownTimer = setInterval(timer, 1000);
</script>

This code will help you deal with the issue of handling multiple timer on the single page
var seconds_inputs = document.getElementsByClassName('deal_left_seconds');
var total_timers = seconds_inputs.length;
for ( var i = 0; i < total_timers; i++){
var str_seconds = 'seconds_'; var str_seconds_prod_id = 'seconds_prod_id_';
var seconds_prod_id = seconds_inputs[i].getAttribute('data-value');
var cal_seconds = seconds_inputs[i].getAttribute('value');
eval('var ' + str_seconds + seconds_prod_id + '= ' + cal_seconds + ';');
eval('var ' + str_seconds_prod_id + seconds_prod_id + '= ' + seconds_prod_id + ';');
}
function timer() {
for ( var i = 0; i < total_timers; i++) {
var seconds_prod_id = seconds_inputs[i].getAttribute('data-value');
var days = Math.floor(eval('seconds_'+seconds_prod_id) / 24 / 60 / 60);
var hoursLeft = Math.floor((eval('seconds_'+seconds_prod_id)) - (days * 86400));
var hours = Math.floor(hoursLeft / 3600);
var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
var minutes = Math.floor(minutesLeft / 60);
var remainingSeconds = eval('seconds_'+seconds_prod_id) % 60;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('deal_days_' + seconds_prod_id).innerHTML = pad(days);
document.getElementById('deal_hrs_' + seconds_prod_id).innerHTML = pad(hours);
document.getElementById('deal_min_' + seconds_prod_id).innerHTML = pad(minutes);
document.getElementById('deal_sec_' + seconds_prod_id).innerHTML = pad(remainingSeconds);
if (eval('seconds_'+ seconds_prod_id) == 0) {
clearInterval(countdownTimer);
document.getElementById('deal_days_' + seconds_prod_id).innerHTML = document.getElementById('deal_hrs_' + seconds_prod_id).innerHTML = document.getElementById('deal_min_' + seconds_prod_id).innerHTML = document.getElementById('deal_sec_' + seconds_prod_id).innerHTML = pad(0);
} else {
var value = eval('seconds_'+seconds_prod_id);
value--;
eval('seconds_' + seconds_prod_id + '= ' + value + ';');
}
}
}
var countdownTimer = setInterval('timer()', 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" class="deal_left_seconds" data-value="1" value="10">
<div class="box-wrapper">
<div class="date box"> <span class="key" id="deal_days_1">00</span> <span class="value">DAYS</span> </div>
</div>
<div class="box-wrapper">
<div class="hour box"> <span class="key" id="deal_hrs_1">00</span> <span class="value">HRS</span> </div>
</div>
<div class="box-wrapper">
<div class="minutes box"> <span class="key" id="deal_min_1">00</span> <span class="value">MINS</span> </div>
</div>
<div class="box-wrapper hidden-md">
<div class="seconds box"> <span class="key" id="deal_sec_1">00</span> <span class="value">SEC</span> </div>
</div>

const Panel = ({ label, n }) => (
<div className="panel">
<small>{label}</small>
<span>{n < 10 ? '0' + n : n}</span>
</div>
)
const App = () => {
const [secondsLeft, setSecondsLeft] = React.useState(86403)
React.useEffect(() => {
const interval = setInterval(() => {
if (secondsLeft == 0) {
clearInterval(interval)
console.log('Times up!')
} else {
setSecondsLeft(secondsLeft - 1)
}
}, 1000)
return () => clearInterval(interval)
})
const days = Math.floor(secondsLeft / 24 / 60 / 60)
const hoursLeft = Math.floor(secondsLeft - days * 86400)
const hours = Math.floor(hoursLeft / 3600)
const minutesLeft = Math.floor(hoursLeft - hours * 3600)
const minutes = Math.floor(minutesLeft / 60)
const seconds = secondsLeft % 60
return (
<div className="root">
<Panel label="Days" n={days} />
<Panel label="Hours" n={hours} />
<Panel label="Minutes" n={minutes} />
<Panel label="Seconds" n={seconds} />
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
.root {
display: flex;
}
.panel {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 8px;
color: #444;
}
.panel small {
font-size: 9px;
text-transform: uppercase;
font-family: sans-serif;
}
.panel span {
font-size: 3em;
font-weight: bold;
font-family: serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

var upgradeTime = 172801;
var seconds = upgradeTime;
function timer() {
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;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('countdown').innerHTML = pad(days) + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
<span id="countdown" class="timer"></span>

Multiple Raphael Clocks on one page, not passing hours/minutes

Working through a teaching example for very crisp Raphael-library world clocks and I'm missing something somewhere: Clocks display with serverHours and serverMinutes set as static values. Code below does not display. Greatly appreciate 2nd (or more) set of eyes catching what I'm missing. Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Multiple Raphael Clocks on Same Page</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript"
function updateClock()
{
var currentTime = new Date();
var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
</script>
<body onload="updateClock();">
<div id="clock" style="padding:0px;"></div>
<script type="text/javascript">
cities = [['Houston',-6],['Charleston',-5],['London',0],['Malta',1],['Bucharest',2],['Brisbane',10],['San Diego',-9]];
serverHours = currentHours;
serverMinutes = currentMinutes;
clock24 = false;
</script>
<script type="text/javascript">
function Clock( paper, x, y, offH, offM, title, clock24 )
{
this.paper = paper;
this.centerX = x;
this.centerY = y;
this.offsetHour = offH;
this.offsetMinute = offM;
this.title = title;
this.radius = 14;
this.circle;
this.arrowHour;
this.arrowMinute;
this.clock24 = clock24;
this.Clock = function()
{
this.circle = this.paper.circle(this.centerX, this.centerY, this.radius);
this.circle.attr({"fill": "#fff", "stroke": "#fff"});
this.arrowHour = this.paper.path(
"M" + this.centerX + " " + (this.centerY - this.radius + 6) + " "
+ "L" + this.centerX + " " + this.centerY
);
this.arrowHour.attr({"stroke": "#fff", "stroke-width": "2"});
this.arrowMinute = this.paper.path(
"M" + this.centerX + " " + (this.centerY - this.radius + 2) + " "
+ "L" + this.centerX + " " + this.centerY
);
this.arrowMinute.attr({"stroke": "#fff", "stroke-width": "2"});
var label = this.paper.text(this.centerX, (this.centerY + this.radius + 10), title);
label.attr({"fill" : "#666", "font-size" : "9"});
}
this.showTime = function()
{
var date = new Date();
var hours = date.getHours() + this.offsetHour;
if (hours > 24) hours -= 24;
if (hours < 0) hours += 24;
var dHours = hours;
var dPostfix = "";
var color = (13 - Math.ceil(13.0/144.0 * Math.pow(Math.abs(hours-12), 2))).toString(16);
var minutes = date.getMinutes() + this.offsetMinute;
this.arrowMinute.rotate(minutes*6, this.centerX, this.centerY);
if (hours > 12) hours -= 12;
if (!this.clock24)
{
dPostfix = (dHours >= 12 ? " PM" : " AM");
dHours = hours;
}
this.arrowHour.rotate((parseFloat(hours)+parseFloat(minutes)/60)*30, this.centerX, this.centerY);
if (minutes < 10) minutes = "0" + minutes;
this.circle.attr({"fill": "#"+color+color+color, "stroke": "#"+color+color+color, "title": "" + dHours+":"+minutes+dPostfix});
}
this.Clock();
}
var clock = new Array();
function refreshTime()
{
if (clock)
{
for (var i = 0; i < clock.length; i++)
{
clock[i].showTime();
}
}
}
var paper = Raphael("clock", 330, 60);
var date = new Date();
var offsetHours = serverHours - date.getHours();
var offsetMinutes = serverMinutes - date.getMinutes();
var x = 20;
var y = 21;
for (i = 0; i < cities.length; i++)
{
clock.push(new Clock(paper, x, y, offsetHours + cities[i][1], offsetMinutes, cities[i][0], clock24));
x += 55;
}
refreshTime();
setInterval( "refreshTime()", 30000 );
</script>
</body></html>

You have many errors in your JavaScript. Open your page in Google Chrome, press F12, switch to "Console" tab and see all errors marked with red color.
Also you're using #fff fill/stroke color everywhere which is white so it becomes invisible on white background.
Also you're trying to globally use variable "currentHours" etc. which definition is enclosed in function so it becomes not global but local. Move it to a global scope (above all functions).