<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400);
body {
/*background: #363f48;*/
color: white;
font: normal 12px 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.yi{
background: #fff;
color: #000;
height: 1000px;
}
.er{
background: #363f48;
height: 1000px;
}
.logo{width: 100%;
text-align: center;}
.logo img{width: 50%;}
ul.countdown {
list-style: none;
margin: 5% 0;
padding: 0;
display: block;
text-align: center;
}
ul.countdown li {
display: inline-block;
}
ul.countdown li span {
font-size: 80px;
font-weight: bold;
line-height: 80px;
}
ul.countdown li.seperator {
font-size: 80px;
line-height: 70px;
vertical-align: top;
}
ul.countdown li p {
color: #a7abb1;
font-size: 14px;
}
a {
color: #76949F;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.source {
width: 405px;
margin: 0 auto;
background: #4f5861;
color: #a7abb1;
font-weight: bold;
display: block;
white-space: pre;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.btn {
background: #f56c4c;
margin: 40px auto;
padding: 12px;
display: block;
width: 100px;
color: white;
text-align: center;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.btn:hover {
text-decoration: none;
opacity: .7;
}
</style>
</head>
<body>
<div class="yi" style="float:left;width: 50%">
<p class="logo">
<img src="./640.png">
</p>
<ul class="countdown">
<li> <span id="ycont"></span></li>
<!-- <li class="seperator">-</li>
<li> <span id="mcont"></span></li>
<li class="seperator">-</li>
<li> <span id="dcont"></span></li> -->
</ul>
<h1 align="center" style="margin:2% 0;font-size: 68px">当前时间</h1>
</div>
<div class="er" style="float:left;width: 50%">
<p class="logo">
<img src="./640.png">
</p>
<ul class="countdown">
<li> <span class="days">00</span>
</li>
<li class="seperator">  </li>
<li> <span class="hours">00</span>
</li>
<li class="seperator">:</li>
<li> <span class="minutes">00</span>
</li>
<li class="seperator">:</li>
<li> <span class="seconds">00</span>
</li>
</ul>
<h1 align="center" style="margin:2% 0;font-size: 68px">世界杯倒计时</h1>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.downCount.js"></script>
<script type="text/javascript">
/*var time = new Date();
var year = time.getFullYear();
var month = time.getMonth()+1;
var day = time.getDate();
document.getElementById("ycont").innerHTML=year;
document.getElementById("mcont").innerHTML=month;
document.getElementById("dcont").innerHTML=day;*/
/* var hour = time.getHours();
var minutes = time.getMinutes();
var second = time.getSeconds();
document.getElementById("hcont").innerHTML=hour;
document.getElementById("ncont").innerHTML=minutes;
document.getElementById("scont").innerHTML=second;*/
function showtime(){
var now=new Date();
var year=now.getFullYear();
var month=now.getMonth()+1;
var day=now.getDate();
var hours=now.getHours();
var minutes=now.getMinutes();
var seconds=now.getSeconds();
if(hours<10){hours="0"+hours;}
if(minutes<10){minutes="0"+minutes;}
if(seconds<10){seconds="0"+seconds;}
document.getElementById("ycont").innerHTML=year+"-"+month+"-"+day;
//一秒刷新一次显示时间
}
setInterval(function(){
showtime();
},1000);
//世界杯倒计时封装在jquery.downCount.js里面
(function ($) {
$.fn.downCount = function (options, callback) {
var settings = $.extend({
date: null,
offset: null
}, options);
// Throw error if date is not set
if (!settings.date) {
$.error('Date is not defined.');
}
// Throw error if date is set incorectly
if (!Date.parse(settings.date)) {
$.error('Incorrect date format, it should look like this, 12/24/2012 12:00:00.');
}
// Save container
var container = this;
/**
* Change client's local date to match offset timezone
* @return {Object} Fixed Date object.
*/
var currentDate = function () {
// get client's current date
var date = new Date();
// turn date to utc
var utc = date.getTime() + (date.getTimezoneOffset() * 60000);
// set new Date object
var new_date = new Date(utc + (3600000*settings.offset))
return new_date;
};
/**
* Main downCount function that calculates everything
*/
function countdown () {
var target_date = new Date(settings.date), // set target date
current_date = currentDate(); // get fixed current date
// difference of dates
var difference = target_date - current_date;
// if difference is negative than it's pass the target date
if (difference < 0) {
// stop timer
clearInterval(interval);
if (callback && typeof callback === 'function') callback();
return;
}
// basic math variables
var _second = 1000,
_minute = _second * 60,
_hour = _minute * 60,
_day = _hour * 24;
// calculate dates
var days = Math.floor(difference / _day),
hours = Math.floor((difference % _day) / _hour),
minutes = Math.floor((difference % _hour) / _minute),
seconds = Math.floor((difference % _minute) / _second);
// fix dates so that it will show two digets
days = (String(days).length >= 2) ? days : '0' + days;
hours = (String(hours).length >= 2) ? hours : '0' + hours;
minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;
// based on the date change the refrence wording
var ref_days = (days === 1) ? 'day' : 'days',
ref_hours = (hours === 1) ? 'hour' : 'hours',
ref_minutes = (minutes === 1) ? 'minute' : 'minutes',
ref_seconds = (seconds === 1) ? 'second' : 'seconds';
// set to DOM
container.find('.days').text(days);
container.find('.hours').text(hours);
container.find('.minutes').text(minutes);
container.find('.seconds').text(seconds);
container.find('.days_ref').text(ref_days);
container.find('.hours_ref').text(ref_hours);
container.find('.minutes_ref').text(ref_minutes);
container.find('.seconds_ref').text(ref_seconds);
};
// start
var interval = setInterval(countdown, 1000);
};
})(jQuery);
$('.countdown').downCount({
date: '06/14/2018 00:00:00',
offset: +10
}, function () {
alert('倒计时结束!');
});
</script>
</div>
</body>
</html>