纯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 相关文章推荐
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 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 Hex RGB颜色值互换的使用
2013/05/10 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
PHP导入导出Excel代码
2015/07/07 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
jQuery.each使用详解
2015/07/07 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
Python 实现自动导入缺失的库
2019/10/29 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
python实现AdaBoost算法的示例
2020/10/03 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
工程力学专业毕业生求职信
2013/10/06 职场文书
小学学校评估方案
2014/06/08 职场文书
节能环保标语
2014/06/12 职场文书
同学会演讲稿
2019/04/02 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript