HTML/CSS

HTML5 网页上下翻页时钟效果代码

也想出现在这里?联系我们
创客云

HTML5 网页上下翻页时钟效果代码-云模板
因为博客首页有个 Flash 的时钟,对于大多数浏览器 Flash 是没有问题的,而 Firefox 等就稍微有些麻烦了,而且 IOS 系统是 Flash 的死对头。很早之前就想着上个 HTML5 的时钟来替代这个 Flash,今天从一个网站弄了点源码,修改了下,总算完工了。

PS:185 行的 urlSize 为显示的宽度,高度自动适应。

也想出现在这里?联系我们
创客主机
  1. <HTML>
  2. <head></head><body>
  3. <script language="JavaScript" type="text/javascript">
  4. /*****************************************
  5.  *
  6.  *	[No need to change] Cross browser requestAnimationFrame
  7.  *  To know more detail, go to the following link
  8.  *  http://paulirish.com/2011/requestanimationframe-for-smart-animating/
  9.  *
  10. *****************************************/
  11. window.requestAnimFrame = (function(callback) {
  12. 	var agent = navigator.userAgent
  13. 	if(agent.search(/iPhone/) != -1 || agent.search(/iPod/) != -1 || agent.search(/iPad/) != -1){
  14. 		return function(callback) {
  15. 			window.setTimeout(callback, 1000 / 60);
  16. 		};
  17. 	}
  18. 	return window.requestAnimationFrame ||
  19. 		window.webkitRequestAnimationFrame ||
  20. 		window.mozRequestAnimationFrame ||
  21. 		window.oRequestAnimationFrame ||
  22. 		window.msRequestAnimationFrame ||
  23. 		function(callback) {
  24. 			window.setTimeout(callback, 1000 / 60);
  25. 		};
  26. })();
  27.  
  28. /*****************************************
  29.  *
  30.  *  [No need to change] AnimFrame Constructor
  31.  *  For manageing the plural animation canvases.
  32.  *  Usage:
  33.  *   1. Instantiate this Constructor: var animeFrame = new AnimFrame();
  34.  *   2. Set animation objects extended from AnimCanvas Constructor: animeFrame.push(anim01); animeFrame.push(anim02); ...
  35.  *   3. Call the start method: animeFrame.start();
  36.  *   4. Be able to stop animations by calling the stop method (no used in Clocklinks): animeFrame.stop();
  37.  *
  38. *****************************************/
  39. var AnimFrame = (function(){
  40. 	function F(){}
  41. 	var stack = [];
  42. 	var isAnimating;
  43.  
  44. 	F.prototype.push = function(instance){
  45. 		stack.push(instance);
  46. 	};
  47. 	F.prototype.stop = function(){
  48. 		isAnimating = false;
  49. 	};
  50. 	F.prototype.start = function(){
  51. 		isAnimating = true;
  52. 		init();
  53. 		animate();
  54. 	};
  55.  
  56. 	function init(){
  57. 		for(var i=0, l=stack.length; i<l; i++) {
  58. 			stack[i].init();
  59. 		}
  60. 	}
  61.  
  62. 	function animate(){
  63. 		if(isAnimating) {
  64. 			requestAnimFrame(function() {
  65. 				animate();
  66. 			});
  67. 		}
  68. 		for(var i=0, l=stack.length; i<l; i++) {
  69. 			stack[i].render();
  70. 		}
  71. 	};
  72. 	return F;
  73. })();
  74.  
  75. /*****************************************
  76.  *
  77.  *  [No need to change] AnimCanvas Constructor
  78.  *  This is used as a base of animation canvas.
  79.  *
  80. *****************************************/
  81. var AnimCanvas = (function(){
  82. 	/* Constructor */
  83. 	function F(){
  84. 		this.id;
  85. 	    this.canvas;
  86. 	    this.context;
  87. 		this.time;
  88. 	    this.startTime;
  89. 		this.fps;
  90. 		this.fpsStep;
  91. 		this.fpsTime;
  92. 	}
  93.  
  94. 	/* Public Methods */	
  95. 	// setCanvas() is required to call for identifying the canvas to use
  96. 	F.prototype.setCanvas = function(canvasId){
  97. 		this.id = canvasId;
  98. 		this.canvas = document.getElementById(this.id);
  99. 		this.context = this.canvas.getContext("2d");
  100. 	};
  101.  
  102. 	// createCanvas() is required to call for 
  103. 	F.prototype.createCanvas = function(width, height){
  104. 		this.canvas = document.createElement("canvas");
  105. 		this.context = this.canvas.getContext("2d");
  106. 		this.canvas.width = width;
  107. 		this.canvas.height = height;
  108. 	};
  109.  
  110. 	// setFps() is arbitrary to change the fps
  111. 	// if not called, the canvas is rendered right when animation gets ready
  112. 	F.prototype.setFps = function(fps){
  113. 		this.fps = fps;
  114. 		this.fpsStep = 1000 / fps;
  115. 		this.fpsFrame;
  116. 	};
  117.  
  118. 	// init() is called by the AnimFrame constructor when starting Animation
  119. 	F.prototype.init = function(){
  120. 		this.startTime = (new Date()).getTime();
  121. 	};
  122.  
  123. 	// render() is called by the AnimFrame constructor each time to render
  124. 	F.prototype.render = function(){
  125. 		this.time = (new Date()).getTime() - this.startTime;
  126.  
  127. 		if(this.fps){
  128. 			var millisecond = this.time % 1000;
  129. 			var currentFpsFrame = Math.floor(millisecond / this.fpsStep);
  130. 			if(this.fpsFrame != currentFpsFrame){
  131. 				this.fpsFrame = currentFpsFrame;
  132. 				this.draw();
  133. 			}
  134. 		} else {
  135. 			this.draw();
  136. 		}
  137. 	};
  138. 	return F;
  139. })();
  140.  
  141. /*****************************************
  142.  *
  143.  *	SimpleCanvas Constructor
  144.  *
  145. *****************************************/
  146. var SimpleCanvas = (function(){
  147. 	/* Constructor */
  148. 	function F(){
  149. 		this.id;
  150. 	    this.canvas;
  151. 	    this.context;
  152. 	}
  153.  
  154. 	/* Public Methods */	
  155. 	// setCanvas() is required to call for identifying the canvas to use
  156. 	F.prototype.setCanvas = function(canvasId){
  157. 		this.id = canvasId;
  158. 		this.canvas = document.getElementById(this.id);
  159. 		this.context = this.canvas.getContext("2d");
  160. 	};
  161.  
  162. 	// createCanvas() is required to call for gerating a new canvas object
  163. 	F.prototype.createCanvas = function(width, height){
  164. 		this.canvas = document.createElement("canvas");
  165. 		this.context = this.canvas.getContext("2d");
  166. 		this.canvas.width = width;
  167. 		this.canvas.height = height;
  168. 	};
  169.  
  170. 	// render() is called by the AnimFrame constructor each time to render
  171. 	F.prototype.render = function(){
  172. 		this.draw();
  173. 	};
  174. 	return F;
  175. })();
  176.  
  177. // Now is Html5 Clock begin, above all is render frame.
  178.  
  179. function isCanvasSupported(){
  180. 	var elem = document.createElement("canvas");
  181. 	return !!(elem.getContext && elem.getContext("2d"));
  182. }
  183. var urlClock = 'Clock-Html5';
  184. var urlTimezone = 'CCT';
  185. var urlSize = '271';
  186. var urlTitle = '';
  187. var urlMessage = '';
  188. var urlTarget = '';
  189. var urlFrom = '2014,1,1,0,0,0';
  190. var urlColor = 'gray';
  191. //var adImageUrl = "";
  192. //var redirectUrl = "";
  193. var serverYear = new Date().getFullYear();
  194. var serverMonth = new Date().getMonth();
  195. var serverDay = new Date().getDay();
  196. var serverHour = new Date().getHours();
  197. var serverMinute = new Date().getMinutes();
  198. var serverSecond = new Date().getSeconds();
  199. var serverMillisecond = new Date().getMilliseconds();
  200. var rootPath = "/";
  201. //var adId = "Clock-Html5-AD";
  202.  
  203. /*
  204.  Global valuables
  205.  - urlClock
  206.  - urlTimezone
  207.  - urlColor
  208.  - urlSize
  209.  - serverYear
  210.  - serverMonth
  211.  - serverDay
  212.  - serverHour
  213.  - serverMinute
  214.  - serverSecond
  215.  - serverMillisecond
  216.  */
  217.  
  218. var baseSize = 227;
  219. var srcPath = rootPath + "html5-008/";
  220.  
  221. document.write('<canvas id="' + urlClock + '" width="' + urlSize + 'px" height="' + urlSize/2.91 + 'px"></canvas>');
  222.  
  223. /*****************************************
  224.  *
  225.  *	Clock Constructor extended by AnimCanvas
  226.  *
  227. *****************************************/
  228. var Clock = (function(){
  229. 	/* Constructor */
  230. 	function F(){}
  231.  
  232. 	/* Inheritance */
  233. 	F.prototype = new AnimCanvas();
  234. 	F.prototype.__super__ = AnimCanvas.prototype;
  235. 	F.prototype.init = function(){
  236. 		this.__super__.init.apply(this, arguments);
  237.  
  238. 		var servertime = new Date();
  239. 		servertime.setYear(serverYear);
  240. 		servertime.setMonth(serverMonth - 1);
  241. 		servertime.setDate(serverDay);
  242. 		servertime.setHours(serverHour);
  243. 		servertime.setMinutes(serverMinute);
  244. 		servertime.setSeconds(serverSecond);
  245. 		unixservertime = servertime.getTime();
  246. 	};
  247.  
  248. 	/* Private Valuables (don't change the values) */
  249. 	var canvas, context, time;
  250. 	var unixservertime,
  251. 		currenttime;
  252. 	var hour,
  253. 		minute,
  254. 		second,
  255. 		millisecond;
  256. 	var previousHour,
  257. 		previousMinute,
  258. 		previousSecond;
  259. 	var scaleValue = 1;
  260.  
  261. 	/* Private Functions */
  262. 	function countTime(){
  263. 		currenttime = new Date();
  264. 		currenttime.setTime(unixservertime + time);
  265. 		hour   = currenttime.getHours();
  266. 		minute = currenttime.getMinutes();
  267. 		second = currenttime.getSeconds();
  268. 		millisecond = currenttime.getMilliseconds()
  269. 	}
  270.  
  271.  
  272. 	/* Public Methods */
  273. 	F.prototype.setScale = function(val){
  274. 		scaleValue = val;
  275. 	};
  276. 	F.prototype.draw = function(){
  277. 		canvas = this.canvas;
  278. 		context = this.context;
  279. 		time = this.time;
  280.  
  281. 		/* Clear and save initial setting  */
  282. 		context.clearRect(0, 0, canvas.width, canvas.height);
  283. 		context.save();
  284.  
  285. 		/********* Draw from here *********/
  286. 		countTime();
  287. 		context.translate(0, canvas.height/2);
  288. 		context.scale(scaleValue, scaleValue);
  289.  
  290. 		// hour panel
  291. 		hourPanel.setNumber(hour);
  292. 		context.drawImage(hourPanel.canvas, 0, -hourPanel.canvas.height/2);
  293.  
  294. 		// minute panel
  295. 		minutePanel.setNumber(minute);
  296. 		context.drawImage(minutePanel.canvas, 77, -minutePanel.canvas.height/2);
  297.  
  298. 		// second panel
  299. 		secondPanel.setNumber(second);
  300. 		context.drawImage(secondPanel.canvas, 154, -secondPanel.canvas.height/2);
  301.  
  302. 		/********* Revert to initial setting *********/
  303. 		context.restore();
  304. 	}
  305. 	return F;
  306. })();
  307.  
  308.  
  309.  
  310. /*****************************************
  311.  *
  312.  *	ClockPanel Constructor extended by AnimCanvas
  313.  *
  314. *****************************************/
  315. var ClockPanel = (function(){
  316. 	/* Constructor */
  317. 	function F(){}
  318.  
  319. 	/* Inheritance */
  320. 	F.prototype = new AnimCanvas();
  321. 	F.prototype.__super__ = AnimCanvas.prototype;
  322. 	F.prototype.init = function(){
  323. 		this.__super__.init.apply(this, arguments);
  324. 		this.currentNum = 0;
  325. 		this.previousNum = 0;
  326. 		this.count = 0;
  327. 	};
  328.  
  329. 	/* Private Valuables (don't change the values) */
  330. 	var canvas, context, time;
  331. 	var flipFrame = 10;
  332.  
  333. 	/* Public Methods */
  334. 	F.prototype.draw = function(){
  335. 		canvas = this.canvas;
  336. 		context = this.context;
  337. 		time = this.time;
  338.  
  339. 		/* Clear and save initial setting  */
  340. 		context.clearRect(0, 0, canvas.width, canvas.height);
  341. 		context.save();
  342.  
  343. 		/********* Draw from here *********/
  344. 		if(this.currentNum == this.previousNum){
  345. 			context.drawImage(this.panelList[this.currentNum].canvas, 0, 0);			
  346. 		} else {
  347. 			this.count++;
  348.  
  349. 			var progress = Math.cos(Math.PI * this.count / flipFrame);
  350. 			var currentPanel = this.panelList[this.currentNum].canvas;
  351. 			var previousPanel = this.panelList[this.previousNum].canvas;
  352.  
  353. 			context.save();
  354. 			context.translate(0, currentPanel.height/2);
  355.  
  356. 			// Upper Current Panel
  357. 			context.drawImage(currentPanel, 0, 0, currentPanel.width, currentPanel.height/2, 0, -currentPanel.height/2, currentPanel.width, currentPanel.height/2);
  358. 			// Lower Previous Panel
  359. 			context.drawImage(previousPanel, 0, previousPanel.height/2, previousPanel.width, previousPanel.height/2, 0, 0, previousPanel.width, previousPanel.height/2);
  360.  
  361. 			if(progress>0){
  362. 				// Upper Previous Panel
  363. 				context.drawImage(previousPanel, 0, 0, previousPanel.width, previousPanel.height/2, 0, -previousPanel.height/2*progress, previousPanel.width, previousPanel.height/2*progress);
  364. 			} else {
  365. 				progress = progress* -1;
  366. 				// Lower Current Panel
  367. 				context.drawImage(currentPanel, 0, currentPanel.height/2, currentPanel.width, currentPanel.height/2, 0, 0, currentPanel.width, currentPanel.height/2*progress);
  368. 			}
  369.  
  370. 			context.restore();
  371.  
  372. 			if(this.count==flipFrame){
  373. 				this.count=0;
  374. 				this.previousNum = this.currentNum;
  375. 			}
  376.  
  377. 		}
  378.  
  379.  
  380. 		/********* Revert to initial setting *********/
  381. 		context.restore();
  382. 	}
  383. 	F.prototype.setPanelList = function(array){
  384. 		this.panelList = array;
  385. 	}
  386.  
  387. 	F.prototype.setNumber = function(num){
  388. 		this.currentNum = num;
  389. 	}
  390. 	return F;
  391. })();
  392.  
  393.  
  394. /*****************************************
  395.  *
  396.  *	General60 Constructor extended by AnimCanvas
  397.  *
  398. *****************************************/
  399. var General60 = (function(){
  400. 	/* Constructor */
  401. 	function F(){}
  402.  
  403. 	/* Inheritance */
  404. 	F.prototype = new SimpleCanvas();
  405.  
  406. 	/* Private Valuables */
  407. 	var canvas, context, time;
  408. 	var corderRound = { x : 10, y : 8 }
  409.  
  410. 	/* Public Methods */
  411. 	F.prototype.draw = function(){
  412. 		canvas = this.canvas;
  413. 		context = this.context;
  414. 		time = this.time;
  415.  
  416. 		/* Clear and save initial setting  */
  417. 		context.clearRect(0, 0, canvas.width, canvas.height);
  418. 		context.save();
  419.  
  420. 		/********* Draw from here *********/
  421. 		// Create Clip Path
  422. 		context.beginPath();
  423. 		context.moveTo(0, corderRound.y);
  424. 		context.quadraticCurveTo(0, 0, corderRound.x, 0);
  425. 		context.lineTo(canvas.width-corderRound.x, 0);
  426. 		context.quadraticCurveTo(canvas.width, 0, canvas.width, corderRound.y);
  427. 		context.lineTo(canvas.width, canvas.height-corderRound.y);
  428. 		context.quadraticCurveTo(canvas.width, canvas.height, canvas.width-corderRound.x, canvas.height);
  429. 		context.lineTo(corderRound.x, canvas.height);
  430. 		context.quadraticCurveTo(0, canvas.height, 0, canvas.height-corderRound.y);
  431. 		context.closePath();
  432. 		// context.clip();
  433.  
  434. 		// Fill Background Color
  435. 		context.fillStyle = this.color;
  436. 		context.fill();
  437. 		// context.fillRect(0, 0, canvas.width, canvas.height);
  438.  
  439. 		// Draw the Number
  440. 		context.font = "62px Arial"
  441. 		context.textAlign = "center";
  442. 		context.textBaseline = "Alphabetic";
  443. 		context.fillStyle = "#ffffff";
  444. 		if(this.color.toLowerCase() == "white" || this.color.toLowerCase() == "#ffffff"){
  445. 			context.fillStyle = "#000000";
  446. 		}
  447. 		context.fillText(this.number, canvas.width/2, canvas.height-8.5);
  448.  
  449. 		// Draw Center Line
  450. 		context.strokeStyle = this.color;
  451. 		context.lineWidth = 1;
  452. 		context.beginPath();
  453. 		context.moveTo(0, canvas.height/2);
  454. 		context.lineTo(canvas.width, canvas.height/2);
  455. 		context.stroke();
  456.  
  457. 		/********* Revert to initial setting *********/
  458. 		context.restore();
  459. 	}
  460. 	F.prototype.setColor = function(color){
  461. 		this.color = color.toString();
  462. 	}
  463. 	F.prototype.setNumber = function(number){
  464. 		this.number = number.toString();
  465. 		if(this.number.length == 1){
  466. 			this.number = "0" + this.number;
  467. 		}
  468. 	}
  469. 	return F;
  470. })();
  471.  
  472. /*****************************************
  473.  *
  474.  *	Hour24 Constructor extended by AnimCanvas
  475.  *
  476. *****************************************/
  477. var Hour24 = (function(){
  478. 	/* Constructor */
  479. 	function F(){
  480. 		this.pm = false;
  481. 	}
  482.  
  483. 	/* Inheritance */
  484. 	F.prototype = new SimpleCanvas();
  485.  
  486. 	/* Private Valuables */
  487. 	var canvas, context, time;
  488. 	var corderRound = { x : 10, y : 8 }
  489.  
  490. 	/* Public Methods */
  491. 	F.prototype.draw = function(){
  492. 		canvas = this.canvas;
  493. 		context = this.context;
  494. 		time = this.time;
  495.  
  496. 		/* Clear and save initial setting  */
  497. 		context.clearRect(0, 0, canvas.width, canvas.height);
  498. 		context.save();
  499.  
  500. 		/********* Draw from here *********/
  501. 		// Create Clip Path
  502. 		context.beginPath();
  503. 		context.moveTo(0, corderRound.y);
  504. 		context.quadraticCurveTo(0, 0, corderRound.x, 0);
  505. 		context.lineTo(canvas.width-corderRound.x, 0);
  506. 		context.quadraticCurveTo(canvas.width, 0, canvas.width, corderRound.y);
  507. 		context.lineTo(canvas.width, canvas.height-corderRound.y);
  508. 		context.quadraticCurveTo(canvas.width, canvas.height, canvas.width-corderRound.x, canvas.height);
  509. 		context.lineTo(corderRound.x, canvas.height);
  510. 		context.quadraticCurveTo(0, canvas.height, 0, canvas.height-corderRound.y);
  511. 		context.closePath();
  512. 		// context.clip();
  513.  
  514. 		// Fill Background Color
  515. 		context.fillStyle = this.color;
  516. 		context.fill();
  517. 		// context.fillRect(0, 0, canvas.width, canvas.height);
  518.  
  519. 		// Draw the Number
  520. 		context.font = "62px Arial"
  521. 		context.textAlign = "center";
  522. 		context.textBaseline = "Alphabetic";
  523. 		context.fillStyle = "#ffffff";
  524. 		if(this.color.toLowerCase() == "white" || this.color.toLowerCase() == "#ffffff"){
  525. 			context.fillStyle = "#000000";
  526. 		}
  527. 		context.fillText(this.number, canvas.width/2, canvas.height-8.5);
  528.  
  529. 		// Draw the Number
  530. 		context.font = "8px Arial"
  531. 		context.textAlign = "left";
  532. 		if(this.pm){
  533. 			context.fillText("PM", 4, canvas.height-8.5);
  534. 		} else {
  535. 			context.fillText("AM", 4, canvas.height-8.5);
  536. 		}
  537.  
  538. 		// Draw Center Line
  539. 		context.strokeStyle = this.color;
  540. 		context.lineWidth = 1;
  541. 		context.beginPath();
  542. 		context.moveTo(0, canvas.height/2);
  543. 		context.lineTo(canvas.width, canvas.height/2);
  544. 		context.stroke();	
  545.  
  546. 		/********* Revert to initial setting *********/
  547. 		context.restore();
  548. 	}
  549. 	F.prototype.setColor = function(color){
  550. 		this.color = color.toString();
  551. 	}
  552. 	F.prototype.setNumber = function(number){
  553. 		this.number = number;
  554. 		if(this.number >= 12){
  555. 			this.pm = true;
  556. 			this.number = this.number - 12
  557. 		}
  558. 		this.number = this.number != 0 ? this.number : 12;
  559. 		this.number = this.number.toString();
  560. 	}
  561. 	return F;
  562. })();
  563.  
  564.  
  565. /* Create Instance */
  566. var color = urlColor;
  567. switch(urlColor){
  568. 	case "black":
  569. 		color = "#000000";
  570. 		break;
  571. 	case "blue":
  572. 		color = "#0000ff";
  573. 		break;
  574. 	case "gray":
  575. 		color = "#808080";
  576. 		break;
  577. 	case "green":
  578. 		color = "#008000";
  579. 		break;
  580. 	case "orange":
  581. 		color = "#ffa500";
  582. 		break;
  583. 	case "pink":
  584. 		color = "#ffc0cb";
  585. 		break;
  586. 	case "red":
  587. 		color = "#ff0000";
  588. 		break;
  589. 	case "white":
  590. 		color = "#ffffff";
  591. 		break;
  592. }
  593.  
  594. var generalNum = [];
  595. var hourNum = [];
  596.  
  597. for(var i=0; i<60; i++){
  598. 	var num = new General60();
  599. 	num.createCanvas(73, 61);
  600. 	num.setColor(color);
  601. 	num.setNumber(i);
  602. 	num.render();
  603. 	generalNum.push(num);
  604. }
  605. for(var i=0; i<24; i++){
  606. 	var num = new Hour24();
  607. 	num.createCanvas(73, 61);
  608. 	num.setColor(color);
  609. 	num.setNumber(i);
  610. 	num.render();
  611. 	hourNum.push(num);
  612. }
  613.  
  614. var hourPanel = new ClockPanel();
  615. hourPanel.createCanvas(73, 61);
  616. hourPanel.setFps(30);
  617. hourPanel.setPanelList(hourNum);
  618.  
  619. var minutePanel = new ClockPanel();
  620. minutePanel.createCanvas(73, 61);
  621. minutePanel.setFps(30);
  622. minutePanel.setPanelList(generalNum);
  623.  
  624. var secondPanel = new ClockPanel();
  625. secondPanel.createCanvas(73, 61);
  626. secondPanel.setFps(30);
  627. secondPanel.setPanelList(generalNum);
  628.  
  629. var clock = new Clock();
  630. clock.setCanvas(urlClock);
  631. clock.setScale(urlSize/baseSize);
  632.  
  633. /* Start Animation */
  634. var animFrame = new AnimFrame();
  635. animFrame.push(clock);
  636. animFrame.push(hourPanel);
  637. animFrame.push(minutePanel);
  638. animFrame.push(secondPanel);
  639. animFrame.start();
  640. </script>
  641. </body>
  642. </html>

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

热销模板

Nastik - 创意企业作品展示网站WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

12

12.12 惠不可挡

每逢双12,难免心潮澎湃,亲们,准备好了吗?

①、原版主题安装冬日暖心价60元/次(原价120元/次) ---》详询客服

①、云主机买一年送一年,买两年送两年,高速、稳定、免备案 ---》云主机

③、双十二限时促销,在模板市场购买任意模板赠送VIP年度会员火热进行中 ---》云模板

咨 询 客 服