纯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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
详解Vue之事件处理
Jul 10 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获得文件扩展名三法
2006/11/25 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
javascript中的作用域scope介绍
2010/12/28 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
Three.js基础部分学习
2017/01/08 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
Python socket 套接字实现通信详解
2019/08/27 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
会计系毕业求职信
2014/08/07 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
高效课堂教学反思
2016/02/24 职场文书
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript