Christmas Countdown

Developer
Luke Watts
Size
3,948 Kb
Views
46,552
  1. Christmas Countdown Previews
  2. Christmas Countdown HTML Codes
  3. Christmas Countdown CSS Codes
  4. Christmas Countdown JS Codes

How do I make an christmas countdown?

Countdown using the ShineJS light/shadow library.. What is a christmas countdown? How do you make a christmas countdown? This script and codes were developed by Luke Watts on 14 August 2022, Sunday.

Christmas Countdown Previews
IQ Test

Christmas Countdown - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Christmas Countdown</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://s2.wp.com/_static/??-eJyVj90KwjAMhV/IGjaLzAvxWbo2ppX+0XQM3946vBgIFa9yQs53OIE1C51ixVihWgzIoCYNhBGLawfeyaNmPsBPgOvT45c3LCL7hVwzFJx9oiYJmmu39qCcuIq7V64AW1Xe8Gf2qL/+sBLIp1n5XuLqDGHlrTmlZAoqsyXewnU4XaZRynE4P16koYBk'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <header> <h1 id="shine" class="shine-logo">Christmas Countdown</h1> <h1 id="countdown" class="countdown" style="min-height: 2rem;"></h1> <h2> <a href="#"><i class="shine-icon genericon genericon-facebook-alt" style="margin-left:0;"></i></a> <a href="#"><i class="shine-icon genericon genericon-twitter"></i></a> <a href="#"><i class="shine-icon genericon genericon-linkedin"></i></a> <a href="#" /><i class="shine-icon genericon genericon-pinterest"></i></a> </h2> </header> <section> <article><h3>Shine some light on it</h3> <p>&copy; 2014 - Luke Watts</p> </article> </section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://bigspaceship.github.io/shine.js/js/shine.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Christmas Countdown - Script Codes CSS Codes

*,
*::before,
*::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { color: #bfbfbf; font-family: Helvetica,Arial,sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5;
}
header { line-height: 1; text-align: center;
}
header h1 { margin-bottom: 2rem;
}
header .shine-logo { color: #f7f7f7; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12rem; text-rendering: optimizelegibility;
}
header .shine-icon { font-size: 3rem; margin: 1rem;
}
section article { text-align: center;
}
a i.genericon { color: #bfbfbf; transition: all 0.75s ease-in 0s; text-decoration: none;
}
a i.genericon.genericon-facebook-alt:hover { color: #4c66a4;
}
a i.genericon.genericon-twitter:hover { color: #8facef;
}
a i.genericon.genericon-linkedin:hover { color: #287dbd;
}
a i.genericon.genericon-pinterest:hover { color: #ca2b33;
}

Christmas Countdown - Script Codes JS Codes

/*// Our countdown plugin takes a callback, a duration, and an optional message
$.fn.countdown = function (duration, message) { // If no message is provided, we use an empty string message = message || ""; // Get reference to container, and set initial content var container = $(this[0]).html(duration + message); // Get reference to the interval doing the countdown var countdown = setInterval(function () { // If seconds remain if (--duration) { // Update our container's message container.html(duration + message); // Otherwise } else { // Clear the countdown interval clearInterval(countdown); // And fire the callback passing our container as `this` callback.call(container); } // Run interval every 1000ms (1 second) }, 1000);
};
// Use p.countdown as container, pass redirect, duration, and optional message
$(".countdown").countdown(10, " seconds remaining");
*/
// COUNT v2
// set the date we're counting down to
var currentYear = new Date().getFullYear();
var target_date = new Date("Dec 25, " + currentYear).getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () { // find the amount of "seconds" between now and target var current_date = new Date().getTime(); var seconds_left = (target_date - current_date) / 1000; // do some time calculations days = parseInt(seconds_left / 86400); seconds_left = seconds_left % 86400; hours = parseInt(seconds_left / 3600); seconds_left = seconds_left % 3600; minutes = parseInt(seconds_left / 60); seconds = parseInt(seconds_left % 60); // format countdown string + set tag value countdown.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}, 1000);
// SHINE
var shine = new Shine(document.getElementById('shine')); function handleMouseMove(event) { shine.light.position.x = event.clientX; shine.light.position.y = event.clientY; shine.draw(); } window.addEventListener('mousemove', handleMouseMove, false);
Christmas Countdown - Script Codes
Christmas Countdown - Script Codes
Home Page Home
Developer Luke Watts
Username lukewatts
Uploaded August 14, 2022
Rating 4.5
Size 3,948 Kb
Views 46,552
Do you need developer help for Christmas Countdown?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Luke Watts (lukewatts) Script Codes
Name
Animated Hover Effects
Pure CSS Glowing Volume Dial
A Pen by Luke Watts
Automatic Quotes
Affinity4 SVG Logo Animation
Custom Google Maps
Footer Concept 02
Before and After Image Slider
Turnable LED Dial
Sass Get Function
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!