Add a stylish NEW YEAR countdown timer on your website.

HTML

<div class="nybox">
 <p id="demo" align="center"></p>
 </div>

CSS

.nybox{background-image:url(https://i.extraimage.info/pix/LWBEK.jpg);-webkit-background-size: cover;-moz-background-size:cover;-o-background-size:cover;background-size: cover;}
 #demo p{background:#004d99;color:#fff; padding:5px;font-size:1em;text-align:center;}
 #demo div{display:inline-block;background:#f44336;color:#fff;text-align:center;border-radius:3px;margin:5px 2px 10px 2px;}
 #demo div p{font-size:2em;margin:0px; background:#555;padding:5px 10px;}
 #demo div span{font-size:small;margin:0px;padding:5px 10px;}
 .second{color:#00e600;}
 #demo .yr{display:block;color:#000;background:#aaa;padding:5px;text-align:center;font-size:0.8em;margin:0px;border-radius:0px;}
 #demo h3{font-size: 2em;text-align:center;padding:1px;margin:1px;color:white;text-shadow:1px 1px silver, -1px -1px blue;font-family: 'Indie Flower', cursive;    letter-spacing: 2px;}
 #demo h2{animation:blinkingText 0.8s infinite;font-weight:bold; font-size:2.5em;}
 @keyframes blinkingText{
 0%{ color: #000; }
 49%{ color: #FF00FF; }
 50%{ color: red; }
 99%{ color:yellow;  }
 100%{ color: orange; }}

JavaScript

// Set the date we're counting down to
 var countDownDate = new Date("Jan 1, 2020 00:00:00").getTime();
 
 // Update the count down every 1 second
 var x = setInterval(function() {
 
   // Get today's date and time
   var now = new Date().getTime();
     
   // Find the distance between- now and 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 = "<p>NEW YEAR COUNTDOWN</p><div><p>" + days + "</p><span>DAYS</span></div><div><p>" + hours + "</p><span>HOURS</span></div><div><p>"
   + minutes + "</p><span>MINUTES</span></div><div><p class=second>" + seconds + "</p><span>SECONDS</span></div><div class=yr>Time until Wednesday, 1 January 2020</div>";
     
   // If the count down is over, write some text 
   if (distance < 0) {
     clearInterval(x);
     document.getElementById("demo").innerHTML = "<p>HAPPY NEW YEAR</p><h3>WapMash Wishing You</h3><h2>HAPPY NEW YEAR</h2><div class=yr>Happy New Year 2020</div>";
   }
 }, 1000);

[wp_ad_camp_3]

How to add in Wapkiz Site?

Follow The Steps

Step 1 – At first add CSS

Copy the above CSS and paste it on by going to

• Panel -> Css Theme or
• Panel -> Meta Header (between- <style> and </style> tag) or
• On the same page where' you want to add the Countdown Timer (between- <style> and </style> tag).

Step 2 – Create JavaScript

Follow the steps to create a js file

Panel -> Js File Maker -> Create New Js File -> Paste the above js code and then submit -> Click Get Js File Code -> Now Copy the code (eg. <script src=”/js/1.js”></script>)

Now paste your copied js file code, on the page where' you want to show the Countdown Timer.

Step 3 – Add Html

To display the Countdown timer , paste the above Html Code.

Done !

Or, Just paste the below code anywhere' you want to add coundown

<link rel="stylesheet" type="text/css" href="https://wapmash.xyz/script/new-year/style.css"/>
 <div class="nybox"><p id="demo" align="center"></p></div>
 <script src="https://wapmash.xyz/script/new-year/ny.js"></script>