GameZer Online


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 Contador Regressivo em Qua Nov 28, 2012 5:19 pm

RafsEstevam

avatar
Programador
Programador
São vários arquivos css e alguns js... Recomendo que copie todos!

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);
}
Algumas partes estão em inglês porque um dos meu sites que eu coloquei para teste tá em english.. ( Meu novo site internacional )

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 Twisted Evil Twisted Evil

2 Re: Contador Regressivo em Qua Nov 28, 2012 5:44 pm

Admin

avatar

Posta uma foto ai para verem como é...

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum