Counter

Developer
Size
3,801 Kb
Views
24,288

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 Previews

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
});
Counter - Script Codes
Counter - Script Codes
Home Page Home
Developer Panstable
Username panstable
Uploaded August 11, 2022
Rating 3
Size 3,801 Kb
Views 24,288
Do you need developer help for Counter?

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!

Panstable (panstable) Script Codes
Create amazing art & images 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!