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

總結

以上是生活随笔為你收集整理的生日倒计时炫酷源码html,JS响应式生日倒计时的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。