首页 > 代码库 > 网页上显示时间脚本(摘抄)
网页上显示时间脚本(摘抄)
主要 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) } }); });
网页上显示时间脚本(摘抄)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。