CODEWITHSUNDEEP
javascript
Yasela Wathsala
Yasela Wathsala

Reputation: 23

How to get countdown from end of day in Javascript?

How to display a countdown in Hours and Minutes from end of the day + 16 hours using JavaScript.

Assume i have a woocommerce shop and i provide a option to customers, When they order before 4.00 P.M Next Day. I ship the Product On same day. I want to display a count down on my page something like this

"Order in next X hours Y Minutes to get it by AA BB CC"

Here AA = Date, BB=Month, CCC=Year

Example :

Considering time right now is 9.30 P.M on 1st February 2021. I want the countdown to display just like following "Order in next 18 hours 30 Minutes to get it by 4th February 2021" [If customer is going to order Now]

I deliver it within 3 days. So if they order the product in 1st February 2021 they will get it 4th February 2021.

Upvotes: 1

Views: 1780

Answers (4)

Ogi22
Ogi22

Reputation: 37

(i)The code may not be correct.
But it works like a countdown.
// Fork from https://codepen.io/afarrar/pen/JRaEjP

HTML

<div id="MyClockDisplay" class="clock" onload="showTime()"></div>

CSS

body {
background: black;
}

.clock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #17D4FE;
    font-size: 60px;
    font-family: Orbitron;
    letter-spacing: 7px;
}

JS

function showTime(){
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    
    
    
    // Clock shift
    h = h+2;
    // The minus values for h that arise in this way need to be corrected
    // for example, by changing the time zone
    
    
    
    // Turn the clock to count down
    h = 23-h;
    m = 59-m;
    s = 59-s;
    
    
    
    // if (Correction if h<0)
    // else if (1:1:1 -> 01:01:01)
    if(h < 0){
        h="xx"
        m="xx"
        s="xx"  
    }
    else if(h < 10){
    h = (h < 10) ? "0" + h : h;}
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    
    
    
    var time = h + ":" + m + ":" + s;
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;
    setTimeout(showTime, 1000);
}

showTime();

Upvotes: 0

user15090582
user15090582

Reputation:

HTML

<div class="box">
    <div class="box-in">
        <h4 id="timer-text"></h4>
    </div>
</div>

CSS

.box {
    display: flex;
    justify-content: center;
}

.box-in {
    display: flex;
    justify-content: center;
    margin: 50px;
    height: 100px;
    width: 600px;
    border: 1px solid green;
}

#timer-text {
    color: green;
}

JS (by learning from here)

var date = new Date();
var second = date.getSeconds();
var minute = date.getMinutes();
var hour = date.getHours();
var day = date.getDay();
var month = date.getMonth();
var year = date.getFullYear();

var leftHour = 23 - hour;
var leftMinute = 59 - minute;
var leftSeconds = 59 - second;


var leftTime = (leftHour * 3600) + (leftMinute * 60) + leftSeconds;
var timer = document.getElementById('timer-text');

setInterval(updateTimer, 1000);

function updateTimer() {
    var h = Math.floor(leftTime / 3600);
    var m = Math.floor((leftTime - (h * 3600)) / 60);
    var s = Math.floor(leftTime % 60);

    timer.innerHTML =  "Order in next " + h + " : " + m + " : " + (s+1) +
       " hours to get it by " + (day + 3) + "th " +
        (month + 1) + " " + year;

    leftTime--;
}

Upvotes: 0

user15090582
user15090582

Reputation:

Try this one

var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var day = date.getDay();
var month = date.getMonth();
var year = date.getFullYear();

var leftHour = 23 - hour;
var leftMinute = 59 - minute;

alert( "Order in next " + leftHour + " hours " + leftMinute + " minutes to get it by " + 
  (day + 3) + "th " + (month + 1) + " " + year);

Upvotes: 1

Bhumit 070
Bhumit 070

Reputation: 426

first of all what you need to do is first find the difference between the 2 time suppose order before 8 hours to get this in 3 days

so check if order is not placed then show counter for the time refer this to make countdown https://www.w3schools.com/howto/howto_js_countdown.asp

if the order is placed then show the counter for 3 days

Upvotes: 0

Related Questions