Html
    Css
    Js

    
                        
html {
	display:grid;
	min-height:100%;
}
body {
	display:grid;
	background:#183059;
}
.container {
	position:relative;
	margin:auto;
	overflow:hidden;
	width:650px;
	height:180px;
}
h1 {
	font-family:"Lato",sans-serif;
	text-align:center;
	margin-top:2em;
	font-size:1em;
	text-transform:uppercase;
	letter-spacing:5px;
	color:#F6F4F3;
}
#timer {
	color:#F6F4F3;
	text-align:center;
	text-transform:uppercase;
	font-family:"Lato",sans-serif;
	font-size:.7em;
	letter-spacing:5px;
}
.days,.hours,.minutes,.seconds {
	display:inline-block;
	padding:20px;
	width:100px;
	border-radius:5px;
}
.days {
	background:#EF2F3C;
}
.hours {
	background:#F6F4F3;
	color:#183059;
}
.minutes {
	background:#276FBF;
}
.seconds {
	background:#F0A202;
}
.numbers {
	font-family:"Montserrat",sans-serif;
	color:#183059;
	font-size:5em;
}
footer {
	position:absolute;
	bottom:0;
	right:0;
	text-transform:uppercase;
	padding:10px;
	font-family:"Lato",sans-serif;
	font-size:0.7em;
}
footer p {
	letter-spacing:3px;
	color:#EF2F3C;
}
footer a {
	color:#F6F4F3;
	text-decoration:none;
}
footer a:hover {
	color:#276FBF;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.10.2
 立即下载

js设置日期倒计时代码

这是用js设置日期倒计时的插件,非常简单方便!

0