Counter
How do I make an counter?
What is a counter? How do you make a counter? This script and codes were developed by Panstable on 11 August 2022, Thursday.
Counter - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Counter</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<div class="container"> <div class="row"> <p style="text-align:center;margin:25px 0 0 0;"><!--<i style="font-size:30px;color:#999;" class="fa fa-history "></i>--><img width="60" src="http://api.drp.io/files/5465f5a4e5dfb.png"/></p> <h2 class="title">FOOD COUNTER</h2> <p class="desc">Happy food counter.</p></div> <div class="row"> <div class="col-md-4"> <div class="color pastel-7"> <ul class="countdown-burger "> <li class=""> <span class="days"></span> <p class="timeRefDays"></p> </li> <li class=""> <span class="hours"></span> <p class="timeRefHours"></p> </li> <li class=""> <span class="minutes"></span> <p class="timeRefMinutes"></p> </li> <li class=""> <span class="seconds"></span> <p class="timeRefSeconds"></p> </li> </ul> </div> <div class="code"><i class="fa fa-heart icn "></i>BURGER KING <span class="info">( 01 Gün 02 Saat 27 Dakika'dır bekleniyor.. )</span></div> </div> <div class="col-md-4"> <div class="color pastel-6"> <ul class="countdown-pizza-bulls "> <li class=""> <span class="days"></span> <p class="timeRefDays"></p> </li> <li class=""> <span class="hours"></span> <p class="timeRefHours"></p> </li> <li class=""> <span class="minutes"></span> <p class="timeRefMinutes"></p> </li> <li class=""> <span class="seconds"></span> <p class="timeRefSeconds"></p> </li> </ul> </div> <div class="code"><i class="fa fa-heart icn "></i>PIZZA BULLS <span class="info"> ( 16 Gün 09 Saat 24 Dakika'dır bekleniyor.. )</span></div> </div> <div class="col-md-4"> <div class="color pastel-5"> <ul class="countdown-nutella "> <li class=""> <span class="days"></span> <p class="timeRefDays"></p> </li> <li class=""> <span class="hours"></span> <p class="timeRefHours"></p> </li> <li class=""> <span class="minutes"></span> <p class="timeRefMinutes"></p> </li> <li class=""> <span class="seconds"></span> <p class="timeRefSeconds"></p> </li> </ul> </div> <div class="code"><i class="fa fa-heart icn "></i>NUTELLA <span class="info"> ( 04 Gün 18 Saat 05 Dakika'dır bekleniyor.. )</span></div> </div> <!-- <div class="col-md-4"> <div class="color pastel-4"> <i class="fa fa-eyedropper color-icon"></i></div> <div class="code">#9aadbc</div> </div> <div class="col-md-4"> <div class="color pastel-5"> <i class="fa fa-eyedropper color-icon"></i></div> <div class="code">#c2665b</div> </div> <div class="col-md-4"> <div class="color pastel-6"> <i class="fa fa-eyedropper color-icon"></i></div> <div class="code">#4a9abd</div> </div> --> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Counter - Script Codes CSS Codes
body{background:#fff;font-family: 'Open Sans', sans-serif;}
li{list-style: none;
float: left;
width:25%;
font-size: 25px;
font-weight: 600;
color: #444;
margin-top: 31px;}
.code .info{font-size: 10px;
margin-top: -7px;
color: #999;}
li p{font-size:13px;}
ul{padding:0;width:70%;margin:0 auto;display:block;}
.container{margin:20px auto;}
.color{text-align:center;float:left;width:100%;height:120px;border-radius:2px;}
.desc{font-weight:300;text-align:center;font-size:20px;color:#888;margin-bottom:60px;}
.title{color:#666;text-align:center;margin:20px 0 5px 0;}
.color-icon{font-size:20px !important;opacity:0.9;margin:48px 0;color:#fff;}
.code{color:#555;font-weight:bold;margin:5px 0 0 0;height:30px;width:100%;display:block;float:left;padding:5px 0 0 5px;}
.centered-img{width:60%;margin: 0 auto;}
.pastel-1{background-color:#c2e3f2;}
.pastel-2{background-color:#ea9696;}
.pastel-3{background-color:#efc45b;}
.pastel-4{background-color:#9aadbc;}
.pastel-5{background-color:#c2665b;}
.pastel-6{background-color:#4a9abd;}
.pastel-7{background-color:#3db29d;}
.hours,.days,.minutes,.seconds{color:#fff}
.timeRefSeconds,.timeRefMinutes,.timeRefDays,.timeRefHours{color:#fff;font-weight:300;}
.icn{margin:0 10px 0 0;color:#ef5051;}
Counter - Script Codes JS Codes
//Countdown plugin
(function($) { $.fn.countdown = function(options, callback) { //custom 'this' selector var thisEl = $(this); //array of custom settings var settings = { 'date': null, 'format': null }; //append the settings array to options if(options) { $.extend(settings, options); } //main countdown function var countdown_proc = function () { var eventDate = Date.parse(settings['date']) / 1000; var currentDate = Math.floor($.now() / 1000); if(eventDate <= currentDate) { callback.call(this); clearInterval(interval); }; var seconds = eventDate - currentDate; var days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed var hours = Math.floor(seconds / (60 * 60)); seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed var minutes = Math.floor(seconds / 60); seconds -= minutes * 60; //update the seconds variable with no. of minutes removed //conditional Ss if (days == 1) { thisEl.find(".timeRefDays").text("Day"); } else { thisEl.find(".timeRefDays").text("Gün"); } if (hours == 1) { thisEl.find(".timeRefHours").text("Hour"); } else { thisEl.find(".timeRefHours").text("Saat"); } if (minutes == 1) { thisEl.find(".timeRefMinutes").text("Minute"); } else { thisEl.find(".timeRefMinutes").text("Dakika"); } if (seconds == 1) { thisEl.find(".timeRefSeconds").text("Second"); } else { thisEl.find(".timeRefSeconds").text("Saniye"); } //logic for the two_digits ON setting if(settings['format'] == "on") { days = (String(days).length >= 2) ? days : "0" + days; hours = (String(hours).length >= 2) ? hours : "0" + hours; minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes; seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds; } //update the countdown's html values. if(!isNaN(eventDate)) { thisEl.find(".days").text(days); thisEl.find(".hours").text(hours); thisEl.find(".minutes").text(minutes); thisEl.find(".seconds").text(seconds); } else { alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00"); clearInterval(interval); } } //run the function countdown_proc(); //loop the function interval = setInterval(countdown_proc, 1000); }
}) (jQuery); $(".countdown-burger").countdown({ date: "20 february 2015 13:45:00", // add the countdown's end date (i.e. 3 november 2012 12:00:00) format: "on" // on (03:07:52) | off (3:7:52) - two_digits set to ON maintains layout consistency
}); $(".countdown-nutella").countdown({ date: "30 january 2015 00:45:00", // add the countdown's end date (i.e. 3 november 2012 12:00:00) format: "on" // on (03:07:52) | off (3:7:52) - two_digits set to ON maintains layout consistency
}); $(".countdown-pizza-bulls").countdown({ date: "22 january 2015 14:45:00", // add the countdown's end date (i.e. 3 november 2012 12:00:00) format: "on" // on (03:07:52) | off (3:7:52) - two_digits set to ON maintains layout consistency
});
Developer | Panstable |
Username | panstable |
Uploaded | August 11, 2022 |
Rating | 3 |
Size | 3,801 Kb |
Views | 24,288 |
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!
Name | Size |
CSS3 Accordion Basic | 2,429 Kb |
A Pen by panstable | 2,940 Kb |
Simple Slider - Carousel | 2,711 Kb |
Modal | 2,468 Kb |
Admin Template | 2,904 Kb |
Pastel Color Code | 2,156 Kb |
Cool Buttons | 4,283 Kb |
Updated Reservation Interaction - Dribbble | 2,487 Kb |
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!
Name | Username | Size |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Out of the blue | Giaco | 2,537 Kb |
Ocean | Gordonnl | 2,817 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
The Fantastic Mr Fox | MalZiiirA | 10,435 Kb |
Login with flip 3d animation | Afiq | 3,012 Kb |
HEXAGON | Aurumlux | 1,684 Kb |
Horizontal slider on scroll | Alojzije | 2,672 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!