js时钟实现

最新推荐文章于 2024-07-02 12:22:49 发布
最新推荐文章于 2024-07-02 12:22:49 发布
阅读量324 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mz_shenbian/article/details/8253038
版权

.网页时钟


<table bgcolor="#000000" align=center>
 <tr>
  <td><div id="lclock"></div></td>
 </tr>
</table>
<SCRIPT language="JavaScript">
<!--
function webclock()
{
var dataobj=new Date()
var hours=dataobj.getHours()
var minutes=dataobj.getMinutes()
var seconds=dataobj.getSeconds()

if(minutes<=9)
minutes="0"+minutes
if(seconds<=9)
seconds="0"+seconds
myclock="<font size='7' color='#ffffff' face='Arial black'>"+hours+":"+minutes+":"+seconds+"</font>"
lclock.innerHTML=myclock;
setTimeout("webclock()",1000)
}
webclock();
//-->
</SCRIPT>

带倒影的时钟


<style  type="text/css">
<!--
.time00{
 font-family  :  Comic  Sans  Ms;
 font-size  :  20pt;
 font-weight  :  bold;
 color:  #000000;
}
-->
</style>
<script  Language="JavaScript">
<!--
var  ctimer;
function  init(){
if  (document.all){
time2.style.left=time1.style.posLeft;                    
time2.style.top=time1.style.posTop+time1.offsetHeight-6; 
settimes();
}
}
function  settimes(){
var time=new Date();                                    
hours=time.getHours();                                
mins=time.getMinutes();                               
secs=time.getSeconds();                               
if(mins<10)                                            
mins="0"+mins;
if  (secs<10)                                          
secs="0"+secs;
time1.innerHTML=hours+":"+mins+":"+secs                 
time2.innerHTML=hours+":"+mins+":"+secs                 
ctimer=setTimeout('settimes()',1000);}                 
//-->
</script>
<body  onLoad="init()">
<div  align="center"  Id="time1"  Style="position:absolute;  width:10;  height:10;  top:10;  left:50" class="time00"></div>
<div  Id="time2" Style="position:absolute;  filter:flipv()  alpha(opacity=20);  font-style:italic" class="time00"></div>

 

新款时钟

<SCRIPT language=javascript>
<!--
pX=100;pY=100
obs = new Array(13)
function ob () {
for (i=0; i<13; i++) {
if (document.all)
 obs[i]=new Array (eval('ob'+i).style,0,0)
else
 obs[i] = new Array (eval('document.ob'+i),0,0)
}
}
function cl(a,b,c){
if (document.all) {                     
if (a!=0) b+=-1
eval('c'+a+'.style.pixelTop='+(pY+(c)))  
eval('c'+a+'.style.pixelLeft='+(pX+(b)))
}
else{
if (a!=0) b+=10
eval('document.c'+a+'.top='+(pY+(c))) 
eval('document.c'+a+'.left='+(pX+(b)))
}
}
function runClock() {
for (i=0; i<13; i++) {
obs[i][0].left=obs[i][1]+pX
obs[i][0].top=obs[i][2]+pY
}
}

var last_sec
function timer() {
time = new Date ()                       
sec = time.getSeconds()
if (sec!=last_sec) {

last_sec = sec
sec=Math.PI*sec/30
min=Math.PI*time.getMinutes()/30
hr =Math.PI*((time.getHours()*60)+time.getMinutes())/360
for (i=1;i<6;i++) {                          
obs[i][1] = Math.sin(sec) * (44 - (i-1)*11)-16;
obs[i][2] = -Math.cos(sec) * (44 - (i-1)*11)-27;
}
for (i=6;i<10;i++) {                
obs[i][1] = Math.sin(min) * (40 - (i-6)*10)-16;
obs[i][2] = -Math.cos(min) * (40 - (i-6)*10)-27;
}
for (i=10;i<13;i++) {                       
obs[i][1] = Math.sin(hr) * (37 - (i-10)*11)-16;
obs[i][2] = -Math.cos(hr) * (37 - (i-10)*11)-27;
}
}
}
function setNum(){
cl (0,-67,-65);          
cl (1,10,-51);
cl (2,28,-33);
cl (3,35,-8);
cl (4,28,17);
cl (5,10,35);
cl (6,-15,42);
cl (7,-40,35);
cl (8,-58,17);
cl (9,-65,-8);
cl (10,-58,-33);
cl (11,-40,-51);
cl (12,-16,-56);
}
//-->
</SCRIPT>

<body onLoad="ob(),setNum(),setInterval('timer()',100);setInterval('runClock()',100)">
<div id="c0" style="position:absolute;right:6;top:6; z-index:2;"> </div>
<div id="c1" style="position:absolute;font-size:11px;"><b>1</b></div>
<div id="c2" style="position:absolute;font-size:11px;"><b>2</b></div>
<div id="c3" style="position:absolute;font-size:11px;"><b>3</b></div>
<div id="c4" style="position:absolute;font-size:11px;"><b>4</b></div>
<div id="c5" style="position:absolute;font-size:11px;"><b>5</b></div>
<div id="c6" style="position:absolute;font-size:11px;"><b>6</b></div>
<div id="c7" style="position:absolute;font-size:11px;"><b>7</b></div>
<div id="c8" style="position:absolute;font-size:11px;"><b>8</b></div>
<div id="c9" style="position:absolute;font-size:11px;"><b>9</b></div>
<div id="c10" style="position:absolute;font-size:11px;"><b>10</b></div>
<div id="c11" style="position:absolute;font-size:11px;"><b>11</b></div>
<div id="c12" style="position:absolute;font-size:11px;"><b>12</b></div>
<div id="ob0" style="position:absolute;left:-20;top:-20;z-index:1"> </div>
<div id="ob1" style="position:absolute;left:-20;top:-20;z-index:8"> <font size=6 color="#0000FF">.</font></div>
<div id="ob2" style="position:absolute;left:-20;top:-20;z-index:8"> <font size=6 color="#0000FF">.</font></div>
<div id="ob3" style="position:absolute;left:-20;top:-20;z-index:8"> <font size=6 color="#0000FF">.</font></div>
<div id="ob4" style="position:absolute;left:-20;top:-20;z-index:8"> <font size=6 color="#0000FF">.</font></div>
<div id="ob5" style="position:absolute;left:-20;top:-20;z-index:8"> <font size=6 color="#0000FF"><b>.</b></font></div>
<div id="ob6" style="position:absolute;left:-20;top:-20;z-index:7"> <font size=6 color="#000000">.</font></div>
<div id="ob7" style="position:absolute;left:-20;top:-20;z-index:7"> <font size=6 color="#000000">.</font></div>
<div id="ob8" style="position:absolute;left:-20;top:-20;z-index:7"> <font size=6 color="#000000">.</font></div>
<div id="ob9" style="position:absolute;left:-20;top:-20;z-index:7"> <font size=6 color="#000000">.</font></div>
<div id="ob10" style="position:absolute;left:-20;top:-20;z-index:6"> <font size=6 color="#F30000"></font></div>
<div id="ob11" style="position:absolute;left:-20;top:-20;z-index:6"> <font size=6 color="#F30000">.</font></div>
<div id="ob12" style="position:absolute;left:-20;top:-20;z-index:6"> <font size=6 color="#F30000">.</font></div>
</body>

 

 

mz_shenbian
关注
js实现时钟转动
Zhang_wang_yun的博客
04-17 1181
声明一个`间歇函数`来让时钟每秒自动转动，在里面声明三个`变量`来定义` transform: rotate();`，规定三个钟针旋转多少度。
javascript背景时钟实现方法
10-24
本篇文章将深入探讨如何使用JavaScript实现这样的背景时钟，以及涉及到的关键技术和操作技巧。 首先，要创建一个背景时钟，我们需要用到JavaScript的核心功能——处理时间和日期。在JavaScript中，`Date`对象用于...
js setTime（）详解
xiaozhen0610的博客
06-29 1412
来源：http://www.jb51.net/article/35535.htm#t1 setTimeout setTimeout 语法例子 用 setTimeout 来执行 function 不断重复执行的 setTimeout 设定条件使 setTimeout 停止 计分及计秒的 counter clearTimeout Set flag 1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut(
在js总使用setTimeout的注意事项
懒人改变世界
12-31 2817
setTimeout 在 js 中的使用频率很高，最常见的就是计时器。 setTimeout 的使用方法很简单 var r = setTimeout(func , 1000); 首先它是用返回值，可以利用返回值来清除setTimeout ,clearTimeout(r) setTimeout 的调用方式 setTimeout(func , 1000); setTimeout("fun
js中setTime()
kang1011的博客
06-16 5217
1：js中setTime（） 必需。要设置的日期和时间据 GMT 时间 1970 年 1 月 1 日午夜之间的毫秒数。这种类型的毫秒值可以传递给 Date() 构造函数，可以通过调用 Date.UTC() 和 Date.parse() 方法获得该值。以毫秒形式表示日期可以使它独立于时区。 传入的是毫秒值； <script type="text/javascript"> var d = new Date() d.setTime(77771564221) document.write(d)
Javascript（二）javascript时钟实现
热门推荐
一枝韩独秀的博客
08-05 1万+
时钟实现 实现这个时钟时间需要解决以下三个问题： 获得当前时间，并格式化 如何可以在页面中显示时间 让时间动起来 1、获得当前时间，并格式化 要获得当前时间，可以使用JavaSctipt的Date对象，默认构造函数会返回当前时间。存储日期为自 1970 年 1 月 1 日 00:00:00以来的毫秒数。 setXxx 这些方法用于设置时间和日期值 getXxx 这些方法用于获取时间和...
JavaScript实现时钟计时
几许的博客
07-02 610
1.最开始页面不显示时间，有两个按钮 开始 暂停。开始按钮是可以点击的，暂停按钮不能点击2.当点击开始按钮后，设置开始按钮不可用，暂停按钮可用。然后将当前系统时间放到按钮上面。每隔1秒中更新一下页面显示的时间。3.当点击暂停按钮，设置开始按钮可用，暂停按钮不可用。同时停止时间的走动。
JS 简单实现电子时钟
【chase
08-18 4786
通过Date类拿到的时分秒直接拼接起来可能是这样的：8:2:3，而我们想看到的效果应该是：08:02:03，所以这里我们会对时分秒小于10的情况进行判断，然后再拼接字符串。时钟的确是非常简单的一个功能：我们只需要通过js编写一个方法来获取时间的时分秒，再用定时器每隔一秒进行刷新即可。...
js实现时钟特效
m0_74336209的博客
05-07 465
使用js实现时钟特效
js实现时钟
qq_41743601的博客
07-11 3744
用js写一个时钟 我这个是仿造别人写的。当我拿到别人代码的时候有很多地方都不明白为什么要这么写。但通过自己一步步分析，加深百度最后终于解决了问题。就是关于canvas的save()和restore()还是有点不明白。虽然看了解释但还是没能真正体会它的用处，可能后续还需要多加体会才能够理解吧。虽然这是仿造别人的，但是我希望通过写下这个博客来记录自己的学习经历。希望大家多多指教。 代码部分，其中都有详细的解释。 <!DOCTYPE html> <html lang="en">
js实现电子时钟
m0_46407169的博客
04-25 3092
js实现电子时钟 代码区域 代码如下（示例）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge.
javascript实现动态时钟的启动和停止
10-16
这个简单的动态时钟实现可以作为基础，进一步扩展以满足更复杂的需求，比如添加倒计时功能、自定义时间格式等。同时，也可以通过CSS来美化时钟的样式，使其更加符合整体网页设计。 总结来说，JavaScript实现动态...
js动态实现美观的时钟展示显示
06-02
在JavaScript中，动态实现美观的时钟展示显示是一项常见的任务，它可以用来提升网站或应用的用户体验。本教程将深入探讨如何使用JavaScript来创建一个实时更新、界面美观的时钟组件。 首先，我们需要理解时间的基本...
js时钟翻牌效果实现代码分享
10-23
为了实现一个酷炫的JavaScript时钟翻牌效果，我们需要关注几个关键知识点：HTML结构的设计、CSS样式的应用以及JavaScript的动画实现。 首先，HTML结构是实现时钟翻牌效果的基础。通过上述文件内容可以看出，我们...
js实现中文实时时钟
10-15
根据给定文件内容，我们可以提取以下知识点来详细解读如何使用JavaScript（js）实现一个中文实时时钟。 知识点一：JavaScript日期和时间处理 1. 使用JavaScript内置的Date对象来获取和处理日期时间。Date对象能够...
经济补偿金、赔偿金的核定及劳动合同解除后双方的义务.ppt
09-14
经济补偿金、赔偿金的核定及劳动合同解除后双方的义务.ppt
配电网分布式电源和储能选址定容 以配电网总成本最低为目标函数，其中包括年运行成本，设备维护折损成本、环境成本；以系统潮流运行为约
09-14
配电网分布式电源和储能选址定容 以配电网总成本最低为目标函数，其中包括年运行成本，设备维护折损成本、环境成本；以系统潮流运行为约束条件，采用粒子群算法求解，实现光伏、风电、储能设备的规划。 这是一个使用粒子群算法进行优化的程序。下面我将对程序进行详细的分析和解释。 首先，程序开始时加载了一些数据文件，包括光伏、风电和负荷的数据。然后，定义了一些参数，如蓄电池参数、迭代次数、种群大小、速度更新参数等。 接下来，程序进行了种群的初始化。使用随机数生成种群的初始位置，并初始化速度。然后，对种群中的每个个体进行潮流计算，并计算适应度。适应度的计算包括对电压、网损等进行评估，并考虑了一些约束条件，如储能容量、光伏容量等的限制。 接下来，程序进行了迭代优化过程。在每次迭代中，根据当前的速度和位置，更新粒子的速度和位置。然后，对更新后的粒子进行潮流计算，并计算适应度。如果个体的适应度优于个体历史最佳适应度，则更新个体历史最佳适应度和位置。如果个体的适应度优于全局最佳适应度，则更新全局最佳适应度和位置。 程序通过迭代优化过程不断更新粒子的速度和位置，直到达到指定的迭代次数。最后，程序输出优化结
Cpp-halcono-pencv互相转换
最新发布
09-14
Cpp_halcon_opencv互相转换 python halcon_opencv图像变量互相转换 C++ halcon 和opencv 图像变量互相转换 VS2022工程 无需配置环境即可 使用绝对路径 无需配置 无需配置 无需配置 下载即可编译生成 仅限交流学习使用;仅限交流学习使用;仅限交流学习使用;
××部20xx年人员裁员分流方案表.xlsx
09-14
××部20xx年人员裁员分流方案表.xlsx
纯JavaScript实现的动态时钟
"纯JavaScript时钟的实现代码和方法" 在网页开发中，JavaScript是一种常用的客户端脚本语言，可以用于创建动态和交互性的用户界面。在这个案例中，我们看到一个纯JavaScript实现的时钟，它不仅能够显示时间，还具有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值