下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。
因为博客首页有个 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>
以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的HTML5 网页 上下翻页时钟效果代码全部内容，希望文章能够帮你解决HTML5 网页 上下翻页时钟效果代码所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）