首页 > 代码库 > 网页上显示时间脚本(摘抄)

网页上显示时间脚本(摘抄)

技术分享

主要 HTML 标签如下:

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="theme-color" content="#2932e1">
    <title>时间_百度搜索</title>
</head>
<body link="#0000cc">
    <div id="wrapper" class="wrapper_l">
        <div id="wrapper_wrapper">
            <div id="container" class="container_l">
                <div id="content_left">
                    <div class="result-op c-container" srcid="11471" fk="11471_时间" id="1" tpl="beijingtime">
                        <div class="op-beijingtime">
                            <canvas class="op-beijingtime-background" width="538" height="100"></canvas>
                            <div class="op-beijingtime-box c-clearfix">
                                <p class="op-beijingtime-time">
                                    11<span>:</span>14<span class="op-beijingtime-small c-gap-left">36</span>
                                </p>
                                <p class="op-beijingtime-datebox">
                                    <span class="op-beijingtime-week">星期六</span>
                                    <span class="op-beijingtime-date">2017年6月10日</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

主要脚本如下:

A.merge("beijingtime", function () {
    A.setup(function () {
        var baidu = A.baidu,
            _this = this,
            getServerTime,
            drawBackground,
            drawMark,
            drawHands,
            STAR_NUM = 200,
            TIME_ZONE = 8,
            now,
            countTimeZone,
            timeZone = _this.data.timeZone || 8,
            ensureTime, bjConmunu,
            dst = _this.data.dst,
            countDayLight,
            dayLight = _this.data.dayLight,
            dayLightStatus,
            secondTimer,
            minuteTimer,
            timeFormat,
            setDateTime,
            dateSetter,
            contextFlag,
            contextEvent,
            initialize,
            initForIE,
            hourTime = 36e5,
            supportCanvas = !!document.createElement("canvas").getContext,
            $container = _this.find(".op-beijingtime"),
            bgCanvas,
            markCanvas,
            handsCanvas;

        if (
            countTimeZone = function (time, timeZone) {
                var curZone = time.getTimezoneOffset(), curDate, month, day, hour;
                if (curDate = new Date(time.getTime() + 6e4 * curZone), curDate.setTime(curDate.getTime() + timeZone * hourTime), dst) {
                    if (new Date(curDate.year, dst.month - 1, dst.day, dst.hour, 0, 0) < curDate &&
                        new Date(curDate.year, dst.endMonth - 1, dst.endDay, dst.endHour, 0, 0)) {
                        curDate.setTime(curDate.getTime() + hourTime);
                    }
                }
                return curDate
            }
            , ensureTime = function (time, timeZone) {
                var curTimezone = time.getTimezoneOffset();
                return new Date(time.getTime() + 6e4 * (time.getTimezoneOffset() - timeZone))
            }
            , getServerTime = function (callback) {
                function oncallback(jqXHR) {
                    var time = jqXHR && jqXHR.getResponseHeader("Date");
                    if (time) callback(new Date(time))
                }
                if ("function" == typeof callback) {
                    $.ajax({ url: "//www.baidu.com/nocache/fesplg/time.gif ", type: "HEAD" })
                        .done(function (data, textStatus, jqXHR) {
                            oncallback(jqXHR)
                        })
                        .fail(function (jqXHR, textStatus, errorThrown) {
                            oncallback(jqXHR)
                        })
                }
            }
            , setDateTime = function (date, time) {
                var t = time.split(":");
                return date.setHours(t[0]), date.setMinutes(t[1] || 0), date.setSeconds(t[2] || 0), date
            }
            , countDayLight = function () {
                var startTime = dayLight.start, endTime = dayLight.end;
                return startTime = setDateTime(new Date(now.getTime()), startTime),
                    endTime = setDateTime(new Date(now.getTime()), endTime),
                    startTime < now && endTime > now ? "daylight" : "night"
            }
            , drawBackground = function (isNight) {
                var ctx = bgCanvas.getContext("2d"),
                    width = bgCanvas.offsetWidth,
                    height = bgCanvas.offsetHeight,
                    grd,
                    drawStar;
                if (!dayLightStatus || dayLightStatus != isNight) {
                    if (dayLightStatus = isNight, ctx.clearRect(0, 0, width, height), drawStar = function () {
                        var i, x, y, radGrd, radius, startColor, opacity, unit;
                        for (unit = supportCanvas ? 1 : .5, i = 0; i < STAR_NUM; i++) {
                            x = Math.random() * width,
                                y = Math.random() * height,
                                radius = Math.random() + unit, opacity = radius - unit,
                                supportCanvas && (opacity /= 2),
                                radGrd = ctx.createRadialGradient(x, y, 1, x, y, radius),
                                radGrd.addColorStop(0, "rgba( 175, 175, 175, " + opacity + " )"),
                                radGrd.addColorStop(1, "rgba( 175, 175, 175, 0 )"),
                                ctx.fillStyle = radGrd,
                                ctx.beginPath(),
                                ctx.arc(x, y, radius, 0, 2 * Math.PI, true),
                                ctx.fill(),
                                ctx.closePath()
                        }
                    }, isNight) {
                        grd = ctx.createLinearGradient(0, 0, 0, height),
                            grd.addColorStop(0, "rgb(24, 50, 89)"),
                            grd.addColorStop(1, "rgb(52, 130, 186)");
                    }
                    else {
                        grd = ctx.createLinearGradient(0, 0, 0, height),
                            grd.addColorStop(0, "#0067bf"),
                            grd.addColorStop(1, "#6eabe2");
                    }
                    if (ctx.fillStyle = grd, ctx.fillRect(0, 0, width, height), isNight)
                        drawStar()
                }

            }
            , drawMark = function () {
                var ctx = markCanvas.getContext("2d"), i, lineLength, radius = markCanvas.offsetWidth / 2;
                for (ctx.translate(radius, radius), i = 0; i < 60; i++) {
                    if (ctx.lineWidth = 1, ctx.strokeStyle = "rgba( 255, 255, 255, 0.3 )", lineLength = 4, i % 5 == 0) {
                        lineLength = 8, ctx.strokeStyle = "#fff";
                    }
                    ctx.beginPath(),
                        ctx.moveTo(0, lineLength - radius),
                        ctx.lineTo(0, -radius),
                        ctx.stroke(),
                        ctx.closePath(),
                        ctx.rotate(Math.PI / 30)
                }
            }
            , drawHands = function (date) {
                var hour = date.getHours(),
                    minute = date.getMinutes(),
                    second = date.getSeconds(),
                    ctx = handsCanvas.getContext("2d"),
                    radius = handsCanvas.offsetWidth / 2,
                    draw;
                hour > 12 && (hour -= 12),
                    hour += minute / 60,
                    minute += second / 60,
                    ctx.clearRect(0, 0, 2 * radius, 2 * radius),
                    draw = function (lineWidth, strokeStyle, rotate, start, end) {
                        ctx.save(),
                            ctx.lineWidth = lineWidth,
                            ctx.strokeStyle = strokeStyle,
                            ctx.translate(radius, radius),
                            ctx.rotate(rotate),
                            ctx.beginPath(),
                            ctx.moveTo(0, start),
                            ctx.lineTo(0, end),
                            ctx.stroke(),
                            ctx.closePath(),
                            ctx.restore()
                    }
                    , draw(3, "#fff", Math.PI / 6 * hour, 6, -16),
                    draw(2, "#fff", Math.PI / 30 * minute, 6, -24),
                    draw(1, "#d93c3c", Math.PI / 30 * second, 6, -24)
            }
            , timeFormat = function (str) { return ("0" + str).slice(-2) }
            , dateSetter = {
                time: null,
                week: null,
                date: null,
                init: function () {
                    this.time = _this.find(".op-beijingtime-time")[0],
                        this.week = _this.find(".op-beijingtime-week")[0],
                        this.date = _this.find(".op-beijingtime-date")[0],
                        this.setTime(),
                        this.minuteSet()
                }
                , setTime: function () {
                    this.time.innerHTML = timeFormat(now.getHours()) + "<span>:</span>"
                        + timeFormat(now.getMinutes())
                        + ‘<span class="op-beijingtime-small c-gap-left">‘
                        + timeFormat(now.getSeconds())
                        + "</span>"
                }
                , setWeek: function () {
                    this.week.innerHTML = "星期" + "日一二三四五六".charAt(now.getDay())
                }
                , setDate: function () {
                    this.date.innerHTML = now.getFullYear() + "年" + (now.getMonth() + 1) + "月" + now.getDate() + "日"
                }
                , minuteSet: function () {
                    this.setWeek(), this.setDate()
                }
            }
            , minuteTimer = function () {
                getServerTime(function (time) {
                    now = countTimeZone(time, timeZone),
                        dateSetter.minuteSet(),
                        drawBackground("night" == countDayLight())
                }
                )
            }
            , bjConmunu = function () {
                contextFlag = true
            }
            , contextEvent = function () {
                $(document).bind("contextmenu", bjConmunu)
            }
            , initialize = function () {
                var tpl = ‘<canvas class="op-beijingtime-background" width= "#{width} " height= "100" ></canvas >                              <div class="op- beijingtime - box c- clearfix" >                                < canvas class="op- beijingtime - hands" width="65" height="65" ></canvas >                                <canvas class="op- beijingtime - mark" width="65" height="65"></canvas>                                <p class="op- beijingtime - time"></p>                                <p class="op- beijingtime - datebox">                                    <span class="op- beijingtime - week"></span>                                    <span class="op- beijingtime - date"></span>                                </p>                            </div>;
                if ($container.html($.format(tpl, { width: _this.container.offsetWidth })),
                    bgCanvas = _this.find(".op-beijingtime-background")[0],
                    markCanvas = _this.find(".op-beijingtime-mark")[0],
                    handsCanvas = _this.find(".op-beijingtime-hands")[0],
                    !supportCanvas) {
                    A.ui.canvas.init([bgCanvas, markCanvas, handsCanvas]);
                }
                $(document).ready(function () {
                    getServerTime(function (time) {
                        now = time, contextEvent(),
                            now = countTimeZone(now, timeZone),
                            drawBackground("night" == countDayLight()),
                            drawMark(),
                            drawHands(now),
                            dateSetter.init(),
                            secondTimer = window.setInterval(function () {
                                var timeObj, timezone;
                                if (0 == now.getSeconds() || true == contextFlag)
                                    minuteTimer(), contextFlag = false;
                                if (timezone = now.getTimezoneOffset(), now = new Date(now.getTime() + 1e3), now.getTimezoneOffset() != timezone) {
                                    now = ensureTime(now, timezone);
                                }
                                drawHands(now), dateSetter.setTime()
                            }, 1e3)
                    })
                })
            }
            , supportCanvas) {
            initialize();
        }
        else {
            A.use("canvas", function () { initialize() });
        }
        this.dispose = function () {
            window.clearInterval(secondTimer), $(document).unbind("contextmenu", bjConmunu)
        }
    });
});

 

网页上显示时间脚本(摘抄)