生日倒计时炫酷源码html,JS响应式生日倒计时
HtmlCssJs
距离亲爱的生日到来还有：
天
时
分
秒
/*
Base Reset CSS
*/
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
body {
font-family:"Microsoft Yahei";
background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1486823066&di=c88093f821a497bdbb6b0cd5d5cefcfe&src=http://pic1.win4000.com/wallpaper/e/57ac30eb52fcb.jpg) no-repeat;
background-size:cover;
background-position:center center;
background-attachment:fixed;
}
a {
text-decoration:none;
}
ul,li {
padding:0;
margin:0;
list-style:none;
}
/*
Common
*/
.container h1 {
color:#333;
font-weight:100;
background:rgba(255,255,255,.5);
text-align:center;
}
.container ul li {
font-size:60px;
font-weight:100;
color:#fff;
border-radius:10px;
text-align:center;
}
.container ul li:nth-child(1) {
background:rgba(255,102,102,.7);
}
.container ul li:nth-child(2) {
background:rgba(0,204,153,.75);
}
.container ul li:nth-child(3) {
background:rgba(204,153,204,.55);
}
.container ul li:nth-child(4) {
background:rgba(255,255,255,.2);
}
sub {
font-weight:400;
font-size:15px;
}
/*
桌面显示器,width>=992px
*/
@media (min-width:992px) {
.container {
position:absolute;
top:50%;
left:50%;
margin:-240px 0 0 -480px;
width:960px;
height:480px;
text-align:center;
background:rgba(0,0,0,.3);
border-radius:10px;
transition:all 0.5s;
}
.container h1 {
margin:50px 0;
padding:20px;
font-size:40px;
}
.container ul {
overflow:auto;
}
.container ul li {
display:inline-block;
width:180px;
height:180px;
line-height:180px;
font-size:60px;
font-weight:100;
color:#fff;
border-radius:10px;
}
.container ul li:nth-child(2) {
margin:0 15px;
}
.container ul li:nth-child(3) {
margin:0 15px 0 0;
}
}/*
平板,768px=
//封装获取ID的方法
function $(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
}
/**
* [checkTime description]
*/
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
/**
* [showTime description]
* @return {[type]} [展示时间]
*/
function showTime() {
var curtime = new Date(); //当前时间
var endtime = new Date("2017/12/1,00:00:00"); //目标时间
var leftTime = (endtime.getTime() - curtime.getTime()) / 1000; //毫秒(ms)
var leftDay = parseInt(leftTime / (24 * 60 * 60)); //剩余天数
var leftHour = parseInt(leftTime / (60 * 60) % 24); //剩余小时
var leftMin = parseInt(leftTime / 60 % 60); //剩余分钟
var leftSec = parseInt(leftTime % 60); //剩余秒
$('day').innerHTML = checkTime(leftDay);
$('hour').innerHTML = checkTime(leftHour);
$('min').innerHTML = checkTime(leftMin);
$('sec').innerHTML = checkTime(leftSec);
if (leftTime <= 0) {
$('title').innerHTML = "再见2016，2017你好";
$('day').innerHTML = 0;
$('hour').innerHTML = 0;
$('min').innerHTML = 0;
$('sec').innerHTML = 0;
}
setTimeout(showTime, 1000);
}
showTime();
↑上面代码改变，会自动显示代码结果
jQuery调用版本：1.11.3