p {
text-align: center;
font-size: 60px;
}
</style>
</head>
<body>
<p id="demo"></p>
<br>
<br>
<button>yup</button>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2018 00:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + " day " + hours + ": "
+ minutes + ": " + seconds;
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>
Please remember to properly format your code for posts. All code must be preceded by a line of three backticks (key below the ESC ) and followed by a line of three backticks. Otherwise it will not be readable.
i want to be able to add hours and days,a “7 days” button and “12 hours” button.
imagine an offer on a website, and there is deadline for that offer which is ticking " counting down to the deadline", but I wanna give my users ability to add more time if they like the offer(“12 hours” button) and even more time if they share that offer on social media(“7 days” button) + couple hours on every minute a user spent opening that offer and looking at it.
so we have to results, more like and shares, more time add to the countdown and more time it stays on my website if no more visitors interact with the offer it will be self-deleted after the deadline is up !