网页显示服务器时间-开箱即用的jQuery实现

yjad

已于 2024-06-25 14:50:08 修改

阅读量201

点赞数 3

分类专栏： js 文章标签：服务器 jquery javascript

于 2024-06-21 11:49:03 首次发布

本文链接：https://blog.csdn.net/dou986532/article/details/139857070

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在网站实时显示当前服务器时间：

在初始化时获取服务器时间，以后自动在此时间基础上更新，下次刷新时重新获取服务器时间，
实现了鼠标拖动记录位置，双击改变样式颜色功能

(function($) {
    "use strict";

    // 动态创建并添加时间显示div
    var serverTimeMarkup = '<div id="dragableTime" class="time-display" ' +
                            'style="background: transparent; ' +
                            'padding: 10px; ' +
                            'font-size: 24px; ' +
                            'width: 277px; ' +
                            'margin: 0 auto; ' +
                            'cursor: move;"></div>';
    $('body').append(serverTimeMarkup);

    // 格式化时间的辅助函数
    function formatTime(date) {
        return date.getFullYear() + '-' + padZero(date.getMonth() + 1) + '-' + padZero(date.getDate()) +
               ' ' + padZero(date.getHours()) + ':' + padZero(date.getMinutes()) + ':' + padZero(date.getSeconds());
    }

    // 给单个数字前补零的辅助函数
    function padZero(num) {
        return (num < 10) ? '0' + num : num;
    }

    // 更新时间显示
    function updateTime(curDate) {
        $('#dragableTime').text(formatTime(curDate));
    }

    // 初始化存储的设置
    function initSettings() {
        try {
            var savedPosition = localStorage.getItem(userName + '_dragPosition');
            var isArtisticFontStr = localStorage.getItem('artisticFont');
            var currentColorStr = localStorage.getItem('currentColor') || '#f00';

            if (savedPosition) {
                var position = JSON.parse(savedPosition);
                $('#dragableTime').css({top: position.top, left: position.left});
            }

            var isArtisticFont = (isArtisticFontStr === 'true');
            var currentColor = currentColorStr;

            applyStyles(isArtisticFont, currentColor);
            $('#dragableTime').data('settings', {isArtisticFont: isArtisticFont, currentColor: currentColor});
        } catch (error) {
            console.error("Error initializing settings from localStorage:", error);
        }
    }

    // 应用或更新样式
    function applyStyles(isArtisticFont, color) {
        $('#dragableTime').css({
            'font-family': isArtisticFont ? 'system-ui' : 'Roboto, sans-serif',
            'color': color
        });
    }

    // 初始化设置
    initSettings();

    var i = 0;
    var sysTime = null;
    var intervalId = window.setInterval(handle, 1000);

    function handle() {
        if (i === 0) {
            synchronization();
        } else {
            time();
        }
        i++;
    }

    function time() {
        var curDate = new Date(sysTime);
        curDate.setSeconds(curDate.getSeconds() + 1);
        sysTime = curDate;
        updateTime(curDate);
    }

    function synchronization() {
        var xhr = new XMLHttpRequest();
        try {
            if (!xhr) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.open("HEAD", location.href, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 2) {
                    var time = xhr.getResponseHeader("Date");
                    var curDate = new Date(time);
                    sysTime = curDate;
                    updateTime(curDate);
                }
            };
            xhr.send(null);
        } catch (error) {
            console.error("Error in synchronization:", error);
        }
    }
})(jQuery);

参考自：https://blog.csdn.net/btboyhappy/article/details/86506308

再来个优化版本的，支持限制拖动范围，窗口大小变化后也能展示在窗口可视范围内

(function ($) {
    "use strict";
    var serverTimeMarkup = '<div id="dragableTime" class="time-display" ' +
        'style="background: transparent; ' +
        'padding: 10px; ' +
        'font-size: 24px; ' +
        'width: 277px; ' +
        'cursor: move;"></div>';
    $('body').append(serverTimeMarkup);

    function formatTime(date) {
        return date.getFullYear() + '-' + padZero(date.getMonth() + 1) + '-' + padZero(date.getDate()) +
            ' ' + padZero(date.getHours()) + ':' + padZero(date.getMinutes()) + ':' + padZero(date.getSeconds());
    }

    function padZero(num) {
        return (num < 10) ? '0' + num : num;
    }

    function updateTime(curDate) {
        $('#dragableTime').text(formatTime(curDate));
    }

    // 初始化存储的设置
    function initSettings() {
        try {
            var savedPosition = localStorage.getItem(userName + '_dragPosition');
            var isArtisticFontStr = localStorage.getItem('artisticFont');
            var currentColorStr = localStorage.getItem('currentColor') || '#f00';

            if (savedPosition) {
                var position = JSON.parse(savedPosition);
                $('#dragableTime').css({top: position.top, left: position.left});
            }

            var isArtisticFont = (isArtisticFontStr === 'true');
            var currentColor = currentColorStr;

            applyStyles(isArtisticFont, currentColor);
            $('#dragableTime').data('settings', {isArtisticFont: isArtisticFont, currentColor: currentColor}).trigger('resize');

        } catch (error) {
            console.error("Error initializing settings from localStorage:", error);
        }
    }

    // 实现拖动功能
    $('#dragableTime').draggable({
        drag: function (event, ui) {
            // 获取窗口尺寸
            var windowWidth = $(window).width();
            var windowHeight = $(window).height();
            // 获取元素尺寸
            var elementWidth = $(this).outerWidth();
            var elementHeight = $(this).outerHeight();

            // 计算元素左上角的最大可移动范围，确保元素不会超出窗口
            var maxTop = windowHeight - elementHeight - 20;
            var maxLeft = windowWidth - elementWidth - 2;

            // 限制位置
            var newPosition = {
                top: Math.min(maxTop, Math.max(0, ui.position.top)),
                left: Math.min(maxLeft, Math.max(0, ui.position.left))
            };
            ui.position = newPosition;
        },
        stop: function (event, ui) {
            // 当拖动停止时，保存当前位置到localStorage
            localStorage.setItem(userName + '_dragPosition', JSON.stringify(ui.position));
        }
    });

    $(window).on('resize', function () {
        var $dragableTime = $('#dragableTime');
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var elementWidth = $dragableTime.outerWidth();
        var elementHeight = $dragableTime.outerHeight();

        // 获取元素当前位置
        var savedPosition = localStorage.getItem(userName + '_dragPosition');
        var position = {top: 0, left: 0}
        if (savedPosition) {
            position = JSON.parse(savedPosition);
        }

        var top = position.top;
        var left = position.left;

        // 判断并调整位置，确保元素在可视区域内
        top = Math.min(Math.max(top, 0), windowHeight - elementHeight);
        left = Math.min(Math.max(left, 0), windowWidth - elementWidth);

        $dragableTime.css({top: top, left: left});
    });

    var isArtisticFont = localStorage.getItem('artisticFont') === 'true';
    var currentColor = localStorage.getItem('currentColor') || '#f00'; // 默认颜色设为红
    // 双击事件处理
    $('#dragableTime').on('dblclick', function () {
        isArtisticFont = !isArtisticFont; // 切换字体风格
        currentColor = currentColor === '#f00' ? '#ff0' : '#f00'; // 切换颜色，红色与黄色之间切换

        $(this).css({
            'font-family': isArtisticFont ? 'system-ui' : 'Roboto, sans-serif',
            'color': currentColor
        });

        // 保存变化到localStorage
        localStorage.setItem('artisticFont', isArtisticFont);
        localStorage.setItem('currentColor', currentColor);
    });


    // 应用或更新样式
    function applyStyles(isArtisticFont, color) {
        $('#dragableTime').css({
            'font-family': isArtisticFont ? 'system-ui' : 'Roboto, sans-serif',
            'color': color
        });
    }

    // 初始化设置
    initSettings();

    var i = 0;
    var sysTime = null;
    var intervalId = window.setInterval(handle, 1000);

    function handle() {
        if (i === 0 || i % 60 === 0) {
            synchronization();
        } else {
            time();
        }
        i++;
    }

    function time() {
        var curDate = new Date(sysTime);
        curDate.setSeconds(curDate.getSeconds() + 1);
        sysTime = curDate;
        updateTime(curDate);
    }


    $(document).on('visibilitychange', function () {
        if (document.visibilityState === "visible") {
            // 页面变为可见时，开始定时同步服务器时间
            i = 0
            intervalId = setInterval(handle, 1000);
        } else {
            // 页面变为不可见时，停止定时器
            clearInterval(intervalId);
        }
    });

    function synchronization() {
        var xhr = new XMLHttpRequest();
        try {
            if (!xhr) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.open("HEAD", location.href, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 2) {
                    var time = xhr.getResponseHeader("Date");
                    var curDate = new Date(time);
                    sysTime = curDate;
                    updateTime(curDate);
                }
            };
            xhr.send(null);
        } catch (error) {
            console.error("Error in synchronization:", error);
        }
    }
})(jQuery);