js当前时间不关闭浏览器会实时更新最新时间+js倒计时，
?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計(jì)時(shí)</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">當(dāng)前時(shí)間</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">世界杯倒計(jì)時(shí)</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;
//一秒刷新一次顯示時(shí)間
}
setInterval(function(){
showtime();
???????????
},1000);
?
//世界杯倒計(jì)時(shí)封裝在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('倒計(jì)時(shí)結(jié)束!');
});
</script>
</div>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/happiness-mumu/p/9082843.html
總結(jié)
以上是生活随笔為你收集整理的js当前时间不关闭浏览器会实时更新最新时间+js倒计时，的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Codeforces 985C (贪心)
- 下一篇： Mysql Group by 分组取最小