跟随鼠标移动的时钟

最新推荐文章于 2023-11-18 14:45:21 发布
转载 最新推荐文章于 2023-11-18 14:45:21 发布 · 564 阅读 · 0
文章标签：

#js

本文介绍了一个使用JavaScript实现的动态数字时钟项目。该时钟能够显示小时、分钟和秒，并通过巧妙地运用数学和定位技术使每个数字形成动态排列的效果。支持不同浏览器环境，如NS（Netscape）和IE。
<html>
<script language="JavaScript">
<!-- 
fcol='aecae5';//face colour.
sCol='ff0000';//seconds colour.
mCol='aecae5';//minutes colour.
hCol='aecae5';//hours colour.
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=80;
ClockFromMouseX=0;


//Alter nothing below! Alignments will be lost!


H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
msg='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.5;
ns=(document.layers);
ie=(document.all);
msg=msg.split(' ');
n=msg.length; 
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fcol+">";
Split=360/n;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
y=new Array();
x=new Array();
Y=new Array();
X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
}
if (ie){
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+msg[i]+'</font></div>');
document.write('</div></div>');


document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++){
document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
}
document.write('</div></div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++){
document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
}
document.write('</div></div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++){
document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
}
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+ Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
 var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style; 
 F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
 F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
 }
for (i=0; i < H.length; i++){
 var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
 HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
 HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
 }
for (i=0; i < M.length; i++){
 var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
 ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
 ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
 }
for (i=0; i < S.length; i++){
 var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
 SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
 SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
 }
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',20);
}
if (ns||ie)window.onload=Delay;
//-->
</script>
</html>
JS特效--跟随鼠标移动的日历时钟
桐匠的博客
04-08 1298
跟随鼠标移动的日历时钟
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
10-28
在这个场景中，我们讨论的是如何使用JavaScript实现一个跟随鼠标移动的时钟效果，同时显示中英文日期。 首先，我们需要理解这个效果的核心概念：获取鼠标位置和实时时间更新。在JavaScript中，我们可以使用`...
小巧实用的鼠标时钟跟随特效代码
03-20
随“鼠”而动的表（Javascript）
Aweirl's blog
09-28 1120
将下框内的代码直接拷贝到“选项/配置/静态新闻”下就可以了！其余的特效可以直接查看我主页的源代码，很容易就能找到。我也是靠研究源代码才知道的～～<!--dCol=000000;//date colour.fCol=000000;//face colour.sCol=000000;//seconds colour.mCol=000000;//minutes c
跟随鼠标的时钟
Microblue（严 武）
09-22 510
colors = new Array(330099,00ff00,ff00ff);sCol = ff00ff;mCol = 00ff00;hCol = red;H = ***;H = H.split();H = H.reverse();M = ****;M = M.split();M = M.reverse();S = *****;S = S.split
鼠标移动图层和时钟
2303_76561497的博客
11-18 122
二，完成一个实时显示的时钟，就是每秒都更新，同时可以自定义年月日时分秒。
c语言小球跟随鼠标,一个黑色的“肉球”跟随鼠标移动效果，有点猥琐-_-||，发贴加会员~...
weixin_39525865的博客
05-21 234
该楼层疑似违规已被系统折叠隐藏此楼查看此楼也是老早就写好的代码，得用EGE库才能实现，因为delay_fps(120);这行，这个函数调用只有EGE库才有。。 我用Sleep(1);还是很慢。。。看来得研究时钟中断怎么用了。。效果的实现是用数组实现的，一个圆比一个小，就出来了。。图片上看不出来，这是动态的嘛，自己运行看就知道了。。其他的大家自己琢磨吧。。#include #define MAXO...
[JS特效]时钟随鼠标移动和旋转
CodingMouse的专栏
02-11 1632
[JS特效]时钟随鼠标移动和旋转  注：此示例代码转自月影著《JavaScript王者归来》一书。 Code：dCol=000000;//date colour.fCol=000000;//face colour.sCol=000000;//seconds colour.mCol=000000;//minutes colo
分享一个很有意思的js，动态时钟显示，能跟随鼠标移动
springmvc_springdata的专栏
02-27 1837
分享一个很有意思的js，动态时钟显示，能跟随鼠标移动 源代码下载地址：http://www.zuidaima.com/share/1550463688182784.htm
html5随鼠标移动动画,HTML5跟随鼠标移动的雪花动画
weixin_42373789的博客
06-04 427
JavaScript语言：JaveScriptBabelCoffeeScript确定(function snowflakeCursor() {var possibleEmoji = ["❄️"]var width = window.innerWidth;var height = window.innerHeight;var cursor = {x: width / 2,y: width / 2};...
原生JS表单美化插件，含input和select元素
01-10
下载前可以先看下教程 https://pan.quark.cn/s/a4b39357ea24 在网页构建过程中，表单（Form）扮演着用户与网站之间沟通的关键角色，其主要功能在于汇集用户的各类输入信息。 JavaScript作为网页开发的核心技术，提供了多样化的API和函数来操作表单组件，诸如input和select等元素。 本专题将详细研究如何借助原生JavaScript对form表单进行视觉优化，并对input输入框与select下拉框进行功能增强。 一、表单基础1. 表单组件：在HTML语言中，<form>标签用于构建一个表单，该标签内部可以容纳多种表单组件，包括<input>（输入框）、<select>（下拉框）、<textarea>（多行文本输入区域）等。 2. 表单参数：诸如action（表单提交的地址）、method（表单提交的协议，为GET或POST）等属性，它们决定了表单的行为特性。 3. 表单行为：诸如onsubmit（表单提交时触发的动作）、onchange（表单元素值变更时触发的动作）等事件，能够通过JavaScript进行响应式处理。 二、input元素视觉优化1. CSS定制：通过设定input元素的CSS属性，例如border（边框）、background-color（背景色）、padding（内边距）、font-size（字体大小）等，能够调整其视觉表现。 2. placeholder特性：提供预填的提示文字，以帮助用户明确输入框的预期用途。 3. 图标集成：借助:before和:after伪元素或者额外的HTML组件结合CSS定位技术，可以在输入框中嵌入图标，从而增强视觉吸引力。 三、select下拉框视觉优化1. 复选功能：通过设置multiple属性...
面试自我介绍，做好三个要点，让你的一分钟更精彩.doc
最新发布
01-10
面试自我介绍，做好三个要点，让你的一分钟更精彩
14SQL基础.pdf
01-10
14SQL基础
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值