纯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支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
vue2路由基本用法实例分析
2020/03/06 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
python统计文本文件内单词数量的方法
2015/05/30 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
django Serializer序列化使用方法详解
2018/10/16 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
志愿者宣传口号
2014/06/17 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
运动会宣传稿100字
2015/07/23 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书