ساخت چندتا تایمر معکوس زمان در یک صفحه

vc3000 · Oct 3, 2017

با سلام
من می خوام یک استایل به شمارشگر معکوس یدم
کد من به این صورت است

کد:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Sequential Countdown with Multiple Instances</title>

 
   <script src="js/jquery.js"></script>
  <script  src="js/jquery.countdown.min.js"></script>
<style>
.dsCountDown.ds-red {
width:180px;
padding: 10px;
-webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
color:black;
  border: none;
  -webkit-border-radius: 5px;
  border-radius: 5px;
font: normal 18px/normal Impact, tahoma, sans-serif;
  color: rgba(0,0,0,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  letter-spacing: 2px;
  background: -webkit-linear-gradient(0deg, rgba(193,240,50,1) 0, rgba(123,180,0,1) 100%);
  background: -moz-linear-gradient(90deg, rgba(193,240,50,1) 0, rgba(123,180,0,1) 100%);
  background: linear-gradient(90deg, rgba(193,240,50,1) 0, rgba(123,180,0,1) 100%);
  background-position: 50% 50%;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto;
  background-size: auto auto;
  -webkit-transition: all 200ms cubic-bezier(0.6, 0.04, 0.98, 0.335) 10ms;
  -moz-transition: all 200ms cubic-bezier(0.6, 0.04, 0.98, 0.335) 10ms;
  -o-transition: all 200ms cubic-bezier(0.6, 0.04, 0.98, 0.335) 10ms;
  transition: all 200ms cubic-bezier(0.6, 0.04, 0.98, 0.335) 10ms;
  -webkit-transform: rotateZ(1deg)   ;
  transform: rotateZ(1deg)   ;
margin-top:2px;
    box-shadow: 1px 2px 4px 4px #888;
       -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=#F72843)";/*IE 8*/
text-shadow: 1px 1px 0 #35f728;/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=#F72843); /*IE 5.5-7*/
direction:rtl;

}

.xdsoft_digit{.xdsoft_digit{
    width:36px;
    height:51px;
    background-image:url(img/digit-md.png);
   
.dsCountDown {
    display: inline-block;
    zoom: 1;
}

</style>

   
</head>

<body>

<div class="dsCountDown ds-red " data-countdown="10/30/2017 05:06:59"  ><img src="img/off.png"></div><br>
     <div class="dsCountDown ds-red"  data-countdown="10/20/2017"></div><br>
       
          <div class="dsCountDown ds-red" data-countdown="01/01/2017"></div><br>
          <div class="dsCountDown ds-red" data-countdown="01/01/2018"></div><br>
         <div class="dsCountDown ds-red" data-countdown="01/01/2020"></div><br>
 
  
<script>

$(function(){
    $('[data-countdown]').each(function() {
   var $this = $(this), finalDate = $(this).data('countdown');
   $this.countdown(finalDate, function(event) {
     $this.html(event.strftime('%D روز (%H:%M:%S)'));
   });
});
});
</script>
<!--
 
<script type="text/javascript">
  $("#getting-started")
  .countdown("2017/01/01", function(event) {
    $(this).text(
      event.strftime('%D days %H:%M:%S')
    );
  });
</script> 
-->
</body>
</html>

ولی استایلش زیاد خوب نیست لطفا کمک کنید