HTML5 网页 上下翻页时钟效果代码
|
以下代码由PHP站长网 52php.cn收集自互联网现在PHP站长网小编把它分享给大家，仅供参考
因为博客首页有个 Flash 的时钟，对于大多数浏览器 Flash 是没有问题的，而 Firefox 等就稍微有些麻烦了，而且 IOS 系统是 Flash 的死对头。很早之前就想着上个 HTML5 的时钟来替代这个 Flash，今天从一个网站弄了点源码，修改了下，总算完工了。 效果暂且可见：Html5 Clock PS：185 行的 urlSize 为显示的宽度，高度自动适应。 <html> <head></head><body> <script language="JavaScript" type="text/javascript"> /***************************************** * * [No need to change] Cross browser requestAnimationFrame * To know more detail,go to the following link * http://paulirish.com/2011/requestanimationframe-for-smart-animating/ * *****************************************/ window.requestAnimFrame = (function(callback) { var agent = navigator.userAgent if(agent.search(/iPhone/) != -1 || agent.search(/iPod/) != -1 || agent.search(/iPad/) != -1){ return function(callback) { window.setTimeout(callback,1000 / 60); }; } return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback,1000 / 60); }; })(); /***************************************** * * [No need to change] AnimFrame Constructor * For manageing the plural animation canvases. * Usage: * 1. Instantiate this Constructor: var animeFrame = new AnimFrame(); * 2. Set animation objects extended from AnimCanvas Constructor: animeFrame.push(anim01); animeFrame.push(anim02); ... * 3. Call the start method: animeFrame.start(); * 4. Be able to stop animations by calling the stop method (no used in Clocklinks): animeFrame.stop(); * *****************************************/ var AnimFrame = (function(){ function F(){} var stack = []; var isAnimating; F.prototype.push = function(instance){ stack.push(instance); }; F.prototype.stop = function(){ isAnimating = false; }; F.prototype.start = function(){ isAnimating = true; init(); animate(); }; function init(){ for(var i=0,l=stack.length; i<l; i++) { stack[i].init(); } } function animate(){ if(isAnimating) { requestAnimFrame(function() { animate(); }); } for(var i=0,l=stack.length; i<l; i++) { stack[i].render(); } }; return F; })(); /***************************************** * * [No need to change] AnimCanvas Constructor * This is used as a base of animation canvas. * *****************************************/ var AnimCanvas = (function(){ /* Constructor */ function F(){ this.id; this.canvas; this.context; this.time; this.startTime; this.fps; this.fpsStep; this.fpsTime; } /* Public Methods */ // setCanvas() is required to call for identifying the canvas to use F.prototype.setCanvas = function(canvasId){ this.id = canvasId; this.canvas = document.getElementById(this.id); this.context = this.canvas.getContext("2d"); }; // createCanvas() is required to call for F.prototype.createCanvas = function(width,height){ this.canvas = document.createElement("canvas"); this.context = this.canvas.getContext("2d"); this.canvas.width = width; this.canvas.height = height; }; // setFps() is arbitrary to change the fps // if not called,the canvas is rendered right when animation gets ready F.prototype.setFps = function(fps){ this.fps = fps; this.fpsStep = 1000 / fps; this.fpsFrame; }; // init() is called by the AnimFrame constructor when starting Animation F.prototype.init = function(){ this.startTime = (new Date()).getTime(); }; // render() is called by the AnimFrame constructor each time to render F.prototype.render = function(){ this.time = (new Date()).getTime() - this.startTime; if(this.fps){ var millisecond = this.time % 1000; var currentFpsFrame = Math.floor(millisecond / this.fpsStep); if(this.fpsFrame != currentFpsFrame){ this.fpsFrame = currentFpsFrame; this.draw(); } } else { this.draw(); } }; return F; })(); /***************************************** * * SimpleCanvas Constructor * *****************************************/ var SimpleCanvas = (function(){ /* Constructor */ function F(){ this.id; this.canvas; this.context; } /* Public Methods */ // setCanvas() is required to call for identifying the canvas to use F.prototype.setCanvas = function(canvasId){ this.id = canvasId; this.canvas = document.getElementById(this.id); this.context = this.canvas.getContext("2d"); }; // createCanvas() is required to call for gerating a new canvas object F.prototype.createCanvas = function(width,height){ this.canvas = document.createElement("canvas"); this.context = this.canvas.getContext("2d"); this.canvas.width = width; this.canvas.height = height; }; // render() is called by the AnimFrame constructor each time to render F.prototype.render = function(){ this.draw(); }; return F; })(); // Now is Html5 Clock begin,above all is render frame. function isCanvasSupported(){ var elem = document.createElement("canvas"); return !!(elem.getContext && elem.getContext("2d")); } var urlClock = 'Clock-Html5'; var urlTimezone = 'CCT'; var urlSize = '271'; var urlTitle = ''; var urlMessage = ''; var urlTarget = ''; var urlFrom = '2014,1,0'; var urlColor = 'gray'; //var adImageUrl = ""; //var redirectUrl = ""; var serverYear = new Date().getFullYear(); var serverMonth = new Date().getMonth(); var serverDay = new Date().getDay(); var serverHour = new Date().getHours(); var serverMinute = new Date().getMinutes(); var serverSecond = new Date().getSeconds(); var serverMillisecond = new Date().getMilliseconds(); var rootPath = "/"; //var adId = "Clock-Html5-AD"; /* Global valuables - urlClock - urlTimezone - urlColor - urlSize - serverYear - serverMonth - serverDay - serverHour - serverMinute - serverSecond - serverMillisecond */ var baseSize = 227; var srcPath = rootPath + "html5-008/"; document.write('<canvas id="' + urlClock + '" width="' + urlSize + 'px" height="' + urlSize/2.91 + 'px"></canvas>'); /***************************************** * * Clock Constructor extended by AnimCanvas * *****************************************/ var Clock = (function(){ /* Constructor */ function F(){} /* Inheritance */ F.prototype = new AnimCanvas(); F.prototype.__super__ = AnimCanvas.prototype; F.prototype.init = function(){ this.__super__.init.apply(this,arguments); var servertime = new Date(); servertime.setYear(serverYear); servertime.setMonth(serverMonth - 1); servertime.setDate(serverDay); servertime.setHours(serverHour); servertime.setMinutes(serverMinute); servertime.setSeconds(serverSecond); unixservertime = servertime.getTime(); }; /* Private Valuables (don't change the values) */ var canvas,context,time; var unixservertime, currenttime; var hour, minute, second, millisecond; var previousHour, previousMinute, previousSecond; var scaleValue = 1; /* Private Functions */ function countTime(){ currenttime = new Date(); currenttime.setTime(unixservertime + time); hour = currenttime.getHours(); minute = currenttime.getMinutes(); second = currenttime.getSeconds(); millisecond = currenttime.getMilliseconds() } /* Public Methods */ F.prototype.setScale = function(val){ scaleValue = val; }; F.prototype.draw = function(){ canvas = this.canvas; context = this.context; time = this.time; /* Clear and save initial setting */ context.clearRect(0,canvas.width,canvas.height); context.save(); /********* Draw from here *********/ countTime(); context.translate(0,canvas.height/2); context.scale(scaleValue,scaleValue); // hour panel hourPanel.setNumber(hour); context.drawImage(hourPanel.canvas,-hourPanel.canvas.height/2); // minute panel minutePanel.setNumber(minute); context.drawImage(minutePanel.canvas,77,-minutePanel.canvas.height/2); // second panel secondPanel.setNumber(second); context.drawImage(secondPanel.canvas,154,-secondPanel.canvas.height/2); /********* Revert to initial setting *********/ context.restore(); } return F; })(); /***************************************** * * ClockPanel Constructor extended by AnimCanvas * *****************************************/ var ClockPanel = (function(){ /* Constructor */ function F(){} /* Inheritance */ F.prototype = new AnimCanvas(); F.prototype.__super__ = AnimCanvas.prototype; F.prototype.init = function(){ this.__super__.init.apply(this,arguments); this.currentNum = 0; this.previousNum = 0; this.count = 0; }; /* Private Valuables (don't change the values) */ var canvas,time; var flipFrame = 10; /* Public Methods */ F.prototype.draw = function(){ canvas = this.canvas; context = this.context; time = this.time; /* Clear and save initial setting */ context.clearRect(0,canvas.height); context.save(); /********* Draw from here *********/ if(this.currentNum == this.previousNum){ context.drawImage(this.panelList[this.currentNum].canvas,0); } else { this.count++; var progress = Math.cos(Math.PI * this.count / flipFrame); var currentPanel = this.panelList[this.currentNum].canvas; var previousPanel = this.panelList[this.previousNum].canvas; context.save(); context.translate(0,currentPanel.height/2); // Upper Current Panel context.drawImage(currentPanel,currentPanel.width,currentPanel.height/2,-currentPanel.height/2,currentPanel.height/2); // Lower Previous Panel context.drawImage(previousPanel,previousPanel.height/2,previousPanel.width,previousPanel.height/2); if(progress>0){ // Upper Previous Panel context.drawImage(previousPanel,-previousPanel.height/2*progress,previousPanel.height/2*progress); } else { progress = progress* -1; // Lower Current Panel context.drawImage(currentPanel,currentPanel.height/2*progress); } context.restore(); if(this.count==flipFrame){ this.count=0; this.previousNum = this.currentNum; } } /********* Revert to initial setting *********/ context.restore(); } F.prototype.setPanelList = function(array){ this.panelList = array; } F.prototype.setNumber = function(num){ this.currentNum = num; } return F; })(); /***************************************** * * General60 Constructor extended by AnimCanvas * *****************************************/ var General60 = (function(){ /* Constructor */ function F(){} /* Inheritance */ F.prototype = new SimpleCanvas(); /* Private Valuables */ var canvas,time; var corderRound = { x : 10,y : 8 } /* Public Methods */ F.prototype.draw = function(){ canvas = this.canvas; context = this.context; time = this.time; /* Clear and save initial setting */ context.clearRect(0,canvas.height); context.save(); /********* Draw from here *********/ // Create Clip Path context.beginPath(); context.moveTo(0,corderRound.y); context.quadraticCurveTo(0,corderRound.x,0); context.lineTo(canvas.width-corderRound.x,0); context.quadraticCurveTo(canvas.width,corderRound.y); context.lineTo(canvas.width,canvas.height-corderRound.y); context.quadraticCurveTo(canvas.width,canvas.height,canvas.width-corderRound.x,canvas.height); context.lineTo(corderRound.x,canvas.height); context.quadraticCurveTo(0,canvas.height-corderRound.y); context.closePath(); // context.clip(); // Fill Background Color context.fillStyle = this.color; context.fill(); // context.fillRect(0,canvas.height); // Draw the Number context.font = "62px Arial" context.textAlign = "center"; context.textBaseline = "Alphabetic"; context.fillStyle = "#ffffff"; if(this.color.toLowerCase() == "white" || this.color.toLowerCase() == "#ffffff"){ context.fillStyle = "#000000"; } context.fillText(this.number,canvas.width/2,canvas.height-8.5); // Draw Center Line context.strokeStyle = this.color; context.lineWidth = 1; context.beginPath(); context.moveTo(0,canvas.height/2); context.lineTo(canvas.width,canvas.height/2); context.stroke(); /********* Revert to initial setting *********/ context.restore(); } F.prototype.setColor = function(color){ this.color = color.toString(); } F.prototype.setNumber = function(number){ this.number = number.toString(); if(this.number.length == 1){ this.number = "0" + this.number; } } return F; })(); /***************************************** * * Hour24 Constructor extended by AnimCanvas * *****************************************/ var Hour24 = (function(){ /* Constructor */ function F(){ this.pm = false; } /* Inheritance */ F.prototype = new SimpleCanvas(); /* Private Valuables */ var canvas,canvas.height-8.5); // Draw the Number context.font = "8px Arial" context.textAlign = "left"; if(this.pm){ context.fillText("PM",4,canvas.height-8.5); } else { context.fillText("AM",canvas.height-8.5); } // Draw Center Line context.strokeStyle = this.color; context.lineWidth = 1; context.beginPath(); context.moveTo(0,canvas.height/2); context.stroke(); /********* Revert to initial setting *********/ context.restore(); } F.prototype.setColor = function(color){ this.color = color.toString(); } F.prototype.setNumber = function(number){ this.number = number; if(this.number >= 12){ this.pm = true; this.number = this.number - 12 } this.number = this.number != 0 ? this.number : 12; this.number = this.number.toString(); } return F; })(); /* Create Instance */ var color = urlColor; switch(urlColor){ case "black": color = "#000000"; break; case "blue": color = "#0000ff"; break; case "gray": color = "#808080"; break; case "green": color = "#008000"; break; case "orange": color = "#ffa500"; break; case "pink": color = "#ffc0cb"; break; case "red": color = "#ff0000"; break; case "white": color = "#ffffff"; break; } var generalNum = []; var hourNum = []; for(var i=0; i<60; i++){ var num = new General60(); num.createCanvas(73,61); num.setColor(color); num.setNumber(i); num.render(); generalNum.push(num); } for(var i=0; i<24; i++){ var num = new Hour24(); num.createCanvas(73,61); num.setColor(color); num.setNumber(i); num.render(); hourNum.push(num); } var hourPanel = new ClockPanel(); hourPanel.createCanvas(73,61); hourPanel.setFps(30); hourPanel.setPanelList(hourNum); var minutePanel = new ClockPanel(); minutePanel.createCanvas(73,61); minutePanel.setFps(30); minutePanel.setPanelList(generalNum); var secondPanel = new ClockPanel(); secondPanel.createCanvas(73,61); secondPanel.setFps(30); secondPanel.setPanelList(generalNum); var clock = new Clock(); clock.setCanvas(urlClock); clock.setScale(urlSize/baseSize); /* Start Animation */ var animFrame = new AnimFrame(); animFrame.push(clock); animFrame.push(hourPanel); animFrame.push(minutePanel); animFrame.push(secondPanel); animFrame.start(); </script> </body> </html> 以上内容由PHP站长网【52php.cn】收集整理供大家参考研究如果以上内容对您有帮助，欢迎收藏、点赞、推荐、分享。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
