HTML5 add a simple and stylish Countdown plugin tutorial

I. Methods of Use
<script type= "Text/javascript" src= "Js/jquery.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.syotimer.js" ></script>

Second, HTML structure
<div id= "Simple_timer" class= "Timer" >
<div class= "Timer-head-block" ></div>
<div class= "Timer-body-block" >
<div class= "Table-cell Day" >
<div class= "Tab-val" >1</div>
<div class= "Tab-metr" >day</div>
</div>
<div class= "Table-cell hour" >
<div class= "Tab-val" >1</div>
<div class= "Tab-metr" >hour</div>
</div>
<div class= "Table-cell minute" >
<div class= "Tab-val" >1</div>
<div class= "Tab-metr" >minute</div>
</div>
<div class= "Table-cell Second" >
<div class= "Tab-val" >1</div>
<div class= "Tab-metr" >second</div>
</div>
</div>
<div class= "Timer-foot-block" ></div>
</div>

Third, CSS style
. timer{
Text-align:center;
margin:30px Auto 0;
padding:0 0 10px;

border-bottom:2px solid #80a3ca;
}
. timer.table-cell{
Display:inline-block;
Margin:0 5px;
width:79px;
Background:url (./images/timer.png) no-repeat 0 0;
}
. timer. Table-cell. tab-val{
font-size:35px;
Color: #80a3ca;
height:81px;
line-height:81px;

margin:0 0 5px;
}
. timer. Table-cell. tab-metr{
font-family:arial;
font-size:12px;
Text-transform:uppercase;
}

#simple_timer. Timer. Table-cell.day,
#periodic_timer_days. Timer. table-cell.hour{
width:120px;
Background-image:url (./images/timer_long.png);
}

Iv. Initializing Plugins
$ (' #simple_timer '). Syotimer ({
year:2020,
Month:5,
Day:9,
HOUR:20,
Minute:30,
});

Keymob Mobile Advertising Platform application developers and advertisers first mobile advertising optimization platform, is a focus on application development in the development and advertising owners to optimize the platform, is committed to application developers and advertisers greatly improve the fill rate. Thus incomes are also higher.

HTML5 add a simple and stylish Countdown plugin tutorial