screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>Vue Js calculate time left to given date</h3> <div class="countdown"> <div> <span class="days">{{ days }}</span> <div class="smalltext">Days</div> </div> <div> <span class="hours">{{ hours }}</span> <div class="smalltext">Hours</div> </div> <div> <span class="minutes">{{ minutes }}</span> <div class="smalltext">Minutes</div> </div> <div> <span class="seconds">{{ seconds }}</span> <div class="smalltext">Seconds</div> </div> </div> </div> <script type="module"> const app = new Vue({ el: "#app", data() { const endDate = new Date(); endDate.setDate(endDate.getDate() + 3); // Set your desired end date here return { endDate, days: 0, hours: 0, minutes: 0, seconds: 0 }; }, mounted() { this.calculateTimeLeft(); setInterval(() => { this.calculateTimeLeft(); }, 1000); }, methods: { calculateTimeLeft() { const now = new Date(); const timeDifference = this.endDate.getTime() - now.getTime(); this.days = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); this.hours = Math.floor((timeDifference / (1000 * 60 * 60)) % 24); this.minutes = Math.floor((timeDifference / 1000 / 60) % 60); this.seconds = Math.floor((timeDifference / 1000) % 60); } } }) </script> <style scoped> #app { font-family: Arial, sans-serif; text-align: center; margin: 50px auto; max-width: 400px; } h3 { font-size: 32px; font-weight: bold; margin-bottom: 20px; color: #333; } .countdown { display: flex; justify-content: space-between; align-items: center; border: 2px solid #ccc; border-radius: 5px; padding: 20px; } .countdown div { display: flex; flex-direction: column; align-items: center; } .countdown div span { font-size: 48px; font-weight: bold; color: #333; } .countdown div .smalltext { font-size: 16px; text-transform: uppercase; color: #777; margin-top: 5px; } </style> </body> </html>