js当前时间不关闭浏览器会实时更新最新时间+js倒计时，

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>

</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>
      
   </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">&nbsp&nbsp</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>

//世界杯倒计时封装在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>

转载于:https://www.cnblogs.com/happiness-mumu/p/9082843.html

js当前时间不关闭浏览器会实时更新最新时间+js倒计时，相关推荐

Android开发之实时更新系统时间
实现功能跟手机的时间一样,可模仿秒钟的跳动,实时更新时间到textView中封装的方法: /** * 时间变化handler */ @SuppressLint("HandlerLeak&q ...
mysql 自动更新时间_如何设置mysql自动更新创建时间和更新时间
做项目时,希望: 新增记录时,mysql自动将系统的当前时间set到创建时间和更新时间这两个字段中. 更新记录时,mysql只update更新时间字段的时间. 设置mysql自动更新创建时间和更新时间 ...
html绘制地铁线路图,Plotly绘制成都地铁全线路图（线路可实时更新最新线路 + 完整代码）...
#!/usr/bin/env python3 # -*- coding: utf-8 -*- """ Created on Fri Nov 6 11:16:45 2020 ...
Plotly绘制成都地铁全线路图（线路可实时更新最新线路 + 完整代码）
Plotly绘制成都地铁全线路图最近做一个地图可视化的项目需要在地图上画出成都已开通的地铁线路图,中间还是踩了几个小坑,记录一下整个过程. 1. 开发环境 python 3.8 plotly(没安装 ...
html页面显示动态日期时间,如何在网页中动态显示当前日期和时间（js调用）
很多网站都会在顶部显示实时的日期,时间,而且时间可以根据自己电脑的时间自动的更新.就像网站上装了一个时钟一样,当用户进入我们做的网站时就会看到今天是哪一年,哪一月,哪一日,星期几,时,分,秒,并且它是 ...
JS全屏代码，解决PDF.js在iframe中部分浏览器全屏功能错误
JS全屏代码,解决PDF.js在iframe中部分浏览器全屏功能错误 PDF.js在iframe模式在火狐浏览器中按钮被屏蔽经分析,viewer.js 发现了判断逻辑 debug发现第二个判断后为 ...
前端页面更新，解决浏览器缓存不更新问题
问题在写静态网站的时候,经常回面临某些页面上传更新后,查看时会出现没有更新的清空,就是因为浏览器读取了缓存造成的,需要清空缓存刷新才可以看到页面的更新,但是有些用户不知道这些操作.就很头痛浏览器缓 ...
数据采集-数据抓取-java-php-go-Python-爬虫-全自动-微信公众号文章阅读量点击量-多个公众号-实时更新
数据采集-微信公众号文章今天是个值得纪念的日子优点现有网络流传采集方法具体实现使用软件实现流程思路使用流程请求分析关键字段踩过的坑实现代码总结今天是个值得纪念的日子今天开 ...
chrome无法加载更新后的js文件
今天写代码时,修改了js代码,在ie浏览器可以成功载入新的js,实现相应功能,但是在chrome中却无法实现同样的效果.后来经过查找,找到了解决方法,具体如下. (1)在chrome页面按F12,然后 ...

js当前时间不关闭浏览器会实时更新最新时间+js倒计时，

js当前时间不关闭浏览器会实时更新最新时间+js倒计时，相关推荐

最新文章

热门文章