纯js代码制作的网页时钟特效【附实例】


Posted in Javascript onMarch 30, 2016

纯js代码制作的网页时钟特效,需要的码农可以拿去看一下。给大家做个参考。

<HTML><HEAD> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<META content="MSHTML 6.00.6000.16414" name=GENERATOR></HEAD> 
<BODY> 
<DIV 
style="LEFT: 155px; WIDTH: 400px; ZOOM: 1; POSITION: absolute; TOP: 133px; HEIGHT: 300px"> 
<DIV id=bg 
style="LEFT: -22px; WIDTH: 150px; ZOOM: 1.5; POSITION: absolute; TOP: -57px; HEIGHT: 150px"><IMG 
style="Z-INDEX: 22; WIDTH: 129px; HEIGHT: 129px" src="//img.jbzj.com/upload/novelty.gif"> 
</DIV> 
<DIV id=h 
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 129px; PADDING-TOP: 5px; POSITION: absolute; HEIGHT: 129px"><IMG 
style="Z-INDEX: 22; WIDTH: 129px; HEIGHT: 129px" src="//img.jbzj.com/upload/novelty_h.gif"> 
</DIV> 
<DIV id=m 
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 129px; PADDING-TOP: 5px; POSITION: absolute; HEIGHT: 129px"><IMG 
style="Z-INDEX: 22; WIDTH: 129px; HEIGHT: 129px" src="//img.jbzj.com/upload/novelty_m.gif"> 
</DIV> 
<DIV id=s 
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 129px; PADDING-TOP: 5px; POSITION: absolute; HEIGHT: 129px"><IMG 
style="Z-INDEX: 22; WIDTH: 129px; HEIGHT: 129px" src="//img.jbzj.com/upload/novelty_s.gif"> 
</DIV> 
<DIV id=dot 
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 129px; PADDING-TOP: 5px; POSITION: absolute; HEIGHT: 129px"><IMG 
style="Z-INDEX: 22; WIDTH: 129px; HEIGHT: 129px" src="//img.jbzj.com/upload/novelty_dot.gif"> 
</DIV> 
<DIV> 
<SCRIPT> 
//oObj input requires that a matrix filter be applied. 
//deg input defines the requested angle of rotation. 
var deg2radians = Math.PI * 2 / 360; 
function MatrixFilter(obj) 
{  
 if(!obj.filters)return; 
 //alert(obj.filters.item(0)); 
 var Matrix; 
 for(p in obj.filters) 
 {  
  if(p=="DXImageTransform.Microsoft.Matrix")Matrix=obj.filters["DXImageTransform.Microsoft.Matrix"]; 
 } 
 if(!Matrix) 
 { 
  obj.style.filter+="progid:DXImageTransform.Microsoft.Matrix()"; 
 } 
 Matrix=obj.filters["DXImageTransform.Microsoft.Matrix"]; 
 this.equal=function(Matrix2D_x) 
 { 
  if(Matrix2D_x.M11)Matrix.M11 = Matrix2D_x.M11; 
  if(Matrix2D_x.M12)Matrix.M12 = Matrix2D_x.M12; 
  if(Matrix2D_x.M21)Matrix.M21 = Matrix2D_x.M21; 
  if(Matrix2D_x.M22)Matrix.M22 = Matrix2D_x.M22; 
 } 
  
 if(arguments[1])this.equal(arguments[1]); 
  
 this.Rotate=function(deg) 
 { 
  rad = deg * deg2radians; 
  costheta = Math.cos(rad); 
  sintheta = Math.sin(rad); 
  var d=new Matrix2D(costheta,-sintheta,sintheta,costheta); 
  this.equal(Matrix2D.Mul(Matrix,d)); 
 } 
 this.RotateTo=function(deg) 
 { 
  rad = deg * deg2radians; 
  costheta = Math.cos(rad); 
  sintheta = Math.sin(rad); 
  var d=new Matrix2D(costheta,-sintheta,sintheta,costheta); 
  this.equal(d); 
 } 
 this.RotateAt=function(deg,sx,sy) 
 { 
  rad = deg * deg2radians; 
  costheta = Math.cos(rad); 
  sintheta = Math.sin(rad); 
  var d=new Matrix2D(costheta,-sintheta,sintheta,costheta); 
  var x=sx-Matrix.Dx; 
  var y=sy-Matrix.Dy; 
  this.MoveTo(x*costheta+y*sintheta-x,-x*sintheta+y*costheta-y); 
  this.equal(Matrix2D.Mul(Matrix,d));  
 } 
 this.RotateToAt=function(deg,sx,sy) 
 { 
  rad = deg * deg2radians; 
  costheta = Math.cos(rad); 
  sintheta = Math.sin(rad); 
  var d=new Matrix2D(costheta,-sintheta,sintheta,costheta); 
  var x=sx; 
  var y=sy; 
  this.MoveTo(x-(x*costheta-y*sintheta),-(x*sintheta+y*costheta-x)); 
  this.equal(d); 
 } 

 this.MoveTo=function(sx,sy) 
 { 
  Matrix.Dx=sx; 
  Matrix.Dy=sy; 
 } 
 this.toMatrix2D=function() 
 { 
  return new Matrix2D(Matrix.M11,Matrix.M12,Matrix.M21,Matrix.M22); 
 } 
 this.ZoomBy=function(sx,sy) 
 { 
  var d=new Matrix2D(sx,0,0,sy); 
  this.equal(Matrix2D.Mul(Matrix,d)); 
 } 
 this.toString=function() 
 { 
  return ""+Matrix.M11+" "+Matrix.M12+"\n"+Matrix.M21+" "+Matrix.M22+"\n" 
 } 
 //Matrix.SizingMethod='clip to original'; 
 //this.fnSetRotation(30); 
 //alert(Matrix.M11); 
 //alert(obj.filters["DXImageTransform.Microsoft.Matrix"]); 
} 
function Matrix2D() 
{ 
 this.M11 = arguments[0]||1; 
 this.M12 = arguments[1]||0; 
 this.M21 = arguments[2]||0; 
 this.M22 = arguments[3]||1; 
 this.Mul_Matrix2D=function(Matrix2D_b) 
 { 
  var r=new Matrix2D(); 
  r=Matrix2D.Mul(this,Matrix2D_b);   
  return r;  
 } 
 this.toString=function() 
 { 
  return ""+this.M11+" "+this.M12+"\n"+this.M21+" "+this.M22+"\n" 
 } 
} 
Matrix2D.Mul=function(Matrix2D_a,Matrix2D_b) 
{ 
 var r=new Matrix2D(); 
 r.M11=Matrix2D_a.M11*Matrix2D_b.M11+Matrix2D_a.M12*Matrix2D_b.M21; 
 r.M12=Matrix2D_a.M11*Matrix2D_b.M12+Matrix2D_a.M12*Matrix2D_b.M22; 
 r.M21=Matrix2D_a.M21*Matrix2D_b.M11+Matrix2D_a.M22*Matrix2D_b.M21; 
 r.M22=Matrix2D_a.M21*Matrix2D_b.M12+Matrix2D_a.M22*Matrix2D_b.M22; 
 return r;  
} 


var ms=new MatrixFilter(s); 
var mm=new MatrixFilter(m); 
var mh=new MatrixFilter(h); 
var i=1; 
setInterval("ms.RotateToAt((new Date()).getSeconds()*6+6,69,69)",500); 
setInterval("mm.RotateToAt((new Date()).getMinutes()*6+6,69,69)",500); 
setInterval("mh.RotateToAt(((new Date()).getHours()+(new Date()).getMinutes()/60)*30,69,69)",500); 
//mf.MoveTo(30,70); 
//mf.ZoomBy(1.5,1.5); 
//mf.ZoomBy(1.5,1.5); 
//alert(mf.toMatrix2D()); 

//alert(Matrix2D.Mul(m2d1,m2d2)); 
//fnSetRotation(oDiv.filters.item(0),30); 
</SCRIPT> 
</DIV></DIV></BODY></HTML>

以上这篇纯js代码制作的网页时钟特效【附实例】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 #Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 #Javascript
Jquery判断form表单数据是否变化
Mar 30 #Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 #Javascript
javascript实现数字倒计时特效
Mar 30 #Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 #Javascript
网页中JS函数自动执行常用三种方法
Mar 30 #Javascript
You might like
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
php 高性能书写
2010/12/11 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php微信开发之上传临时素材
2016/06/24 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
Python管理Windows服务小脚本
2018/03/12 Python
基于Python实现用户管理系统
2019/02/26 Python
python绘制规则网络图形实例
2019/12/09 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
python代码xml转txt实例
2020/03/10 Python
哪些是python中web开发框架
2020/06/17 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
生物技术毕业生自荐信
2013/10/23 职场文书
优秀会计求职信
2014/07/04 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
2015年社区工作总结
2015/04/08 职场文书
西安事变观后感
2015/06/12 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python