Entrar
Cadastre-se
Início1
Contador Regressivo Qua Nov 28, 2012 5:19 pm
RafsEstevam
Programador
Minis : 
:00
:00
:00
:00:00:00Mensagens : 395
São vários arquivos css e alguns js... Recomendo que copie todos!
Style CSS:
TEXT CSS
CountDown ( Baixei e tá em inglês )
Base JS
Só juntar e colocar no server ou fazer oque quiser... Não vo fazer tutoriail
- Código:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="pt" />
<title>Contador Regressivo</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="text.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body><div id="header">
<div class="container_12">
<h1 class="grid_12"><span>*</span> Contador Regressivo <span>*</span></h1>
<div id="text" class="grid_12">
<div class="days">DIAS</div>
<div class="hours">HORAS</div>
<div class="minutes">MINUTOS</div>
<div class="seconds">SEGUNDOS</div>
</div>
<div id="counter" class="grid_12"> </div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="media/js/jquery.countdown.js"></script>
<script type="text/javascript" src="media/js/base.js"></script>
</body>
</html>
Style CSS:
- Código:
body {
background: url(img/bg.jpg) top left repeat;
}
#header {
width: 100%;
height: 305px;
text-align: center;
background: url(img/header_bg.jpg) top left repeat-x;
}
#header h1 {
margin: 0;
margin-top: 20px;
text-align: center;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 30px;
color: #fff;
font-weight: normal;
text-shadow: 0px 3px 3px #000000;
filter: dropshadow(color=#000000, offx=0, offy=3);
}
#header h1 span {
color: #ff5640;
}
#header #text {
margin: 0;
margin-top: 50px;
font-family: 'Open Sans', Arial, sans-serif;
color: #eee;
font-size: 14px;
font-weight: 300px;
}
#header #text div {
float: left;
display: inline;
}
#header #text .days {
margin-left: 140px;
}
#header #text .hours {
margin-left: 165px;
}
#header #text .minutes {
margin-left: 155px;
}
#header #text .seconds {
margin-left: 135px;
}
#counter {
width: 880px !important;
height: 140px;
color: #fff;
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 300px;
font-size: 92px;
line-height: 90px;
overflow: hidden;
margin: 0;
padding-left: 80px;
}
#counter p {
float: left;
padding: 0;
margin: 0 17px 0 13px;
color: #fff;
text-shadow: 0px 3px 4px #000000;
filter: dropshadow(color=#000000, offx=0, offy=3);
}
#counter div {
float: left;
position: relative;
margin: 0 5px 0 0;
padding: 0;
}
.digit {
width: 70px;
position: absolute;
top:0;
left:0;
padding:0;
}
#counter div p {
position: relative;
width: 70px;
height: 100px;
line-height: 100px;
padding: 0;
margin: 0;
border: 0;
color: #fff;
text-shadow: 0px 3px 4px #000000;
filter: dropshadow(color=#000000, offx=0, offy=3);
}
#contador p {
float: left;
padding: 0;
margin: 0 17px 0 13px;
color: #fff;
text-shadow: 0px 3px 4px #000000;
filter: dropshadow(color=#000000, offx=0, offy=3);
}
#contador div {
float: left;
position: relative;
margin: 0 5px 0 0;
padding: 0;
}
#contador div p {
position: relative;
width: 70px;
height: 100px;
line-height: 100px;
padding: 0;
margin: 0;
border: 0;
color: #fff;
text-shadow: 0px 3px 4px #000000;
filter: dropshadow(color=#000000, offx=0, offy=3);
}
TEXT CSS
- Código:
body {
font: 13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}
pre,
code {
font-family: 'DejaVu Sans Mono', Menlo, Consolas, monospace;
}
hr {
border: 0 #ccc solid;
border-top-width: 1px;
clear: both;
height: 0;
}
h1 {
font-size: 25px;
}
h2 {
font-size: 23px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 19px;
}
h5 {
font-size: 17px;
}
h6 {
font-size: 15px;
}
ol {
list-style: decimal;
}
ul {
list-style: disc;
}
li {
margin-left: 30px;
}
p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset,
figure {
margin-bottom: 20px;
}
CountDown ( Baixei e tá em inglês )
- Código:
(function($){
// Number of seconds in every time division
var days = 24*60*60,
hours = 60*60,
minutes = 60;
// Creating the plugin
$.fn.countdown = function(prop){
var options = $.extend({
callback : function(){},
timestamp : 0
},prop);
var left, d, h, m, s, positions;
// Initialize the plugin
init(this, options);
positions = this.find('.position');
(function tick(){
// Time left
left = Math.floor((options.timestamp - (new Date())) / 1000);
if(left < 0){
left = 0;
}
// Number of days left
d = Math.floor(left / days);
updateDuo(0, 1, d);
left -= d*days;
// Number of hours left
h = Math.floor(left / hours);
updateDuo(2, 3, h);
left -= h*hours;
// Number of minutes left
m = Math.floor(left / minutes);
updateDuo(4, 5, m);
left -= m*minutes;
// Number of seconds left
s = left;
updateDuo(6, 7, s);
// Calling an optional user supplied callback
options.callback(d, h, m, s);
// Scheduling another call of this function in 1s
setTimeout(tick, 1000);
})();
// This function updates two digit positions at once
function updateDuo(minor,major,value){
switchDigit(positions.eq(minor),Math.floor(value/10)%10);
switchDigit(positions.eq(major),value%10);
}
return this;
};
function init(elem, options){
elem.addClass('countdownHolder');
// Creating the markup inside the container
$.each(['Days','Hours','Minutes','Seconds'],function(i){
$('<span class="count'+this+'">').html(
'<div>\
<p class="position">\
<span class="digit static">0</span>\
</p>\
</div>\
<div>\
<p class="position">\
<span class="digit static">0</span>\
</p>\
</div>'
).appendTo(elem);
if(this!="Seconds"){
elem.append('<p>:</p><span class="countDiv countDiv'+i+'"></span>');
}
});
}
// Creates an animated transition between the two numbers
function switchDigit(position,number){
var digit = position.find('.digit')
if(digit.is(':animated')){
return false;
}
if(position.data('digit') == number){
// We are already showing this number
return false;
}
position.data('digit', number);
var replacement = $('<span>',{
'class':'digit',
css:{
top:0,
opacity:0
},
html:number
});
// The .static class is added when the animation
// completes. This makes it run smoother.
digit
.before(replacement)
.removeClass('static')
.animate({top:0,opacity:0},'fast',function(){
digit.remove();
})
replacement
.delay(100)
.animate({top:0,opacity:1},'fast',function(){
replacement.addClass('static');
});
}
})(jQuery);
Base JS
- Código:
$(function() {
// esconde mensagem de erro
$('#form .error').hide();
// seleciona todo o texto do form ao clicar
$('#form form .input').click(function() {
$(this).select();
});
// inicia contador
$('#counter').countdown({
timestamp : (new Date(2012,8,19,0,0,0)).getTime()
});
// formulario de email
$('#form_newsletter .button').click(function() {
//validacao
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var value = $('#form #email_input').val().toString();
$('#form .error').hide();
//
if (value == "" || value == "informe seu e-mail...") {
$('#form .error').text('ERRO: Você deve informar seu e-mail.');
$('#form #email_input').focus();
$('#form .error').show();
return false;
}
if (!re.test(value)) {
$('#form .error').text('ERRO: Você deve informar um e-mail válido.');
$('#form #email_input').focus();
$('#form .error').show();
return false;
}
//envio
var dataString = 'email='+ value;
$.ajax({
type: "POST",
url: "mail_form.php",
data: dataString,
success: function() {
$('#form').html("<div id='message' class='grid_12'></div>");
$('#message').html("<p class='grid_9'>Obrigado! Em breve entraremos em contato.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' class='grid_1 prefix_2' src='media/img/checkmark.png' />");
});
}
});
return false;
});
});
Só juntar e colocar no server ou fazer oque quiser... Não vo fazer tutoriail
