NEW YEAR 2020 Countdown Timer Code

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);

How to add in Wapkiz Site?

Follow The Steps

Step 1At 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 2Create 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 3Add 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>

Leave a Reply

Your email address will not be published.


*