html中嵌入电子时钟和指针时钟的js代码

最新推荐文章于 2024-01-26 11:25:59 发布
最新推荐文章于 2024-01-26 11:25:59 发布
阅读量7.3k 收藏 2
点赞数
文章标签： html div function timer c javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuanghusun/article/details/3960103
版权

电子时钟

 

<BODY  οnlοad=showclock() >

<!-- [Step1]: 这里可以调整时钟的方位 -->
<span id=liveclock style=position:absolute;left:250px;top:122px;; width: 109px; height: 15px>
</span>  
<SCRIPT language=javascript>

function showclock() {if(!document.layers&&!document.all)
return
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="AM"
if(hours>12){dn="PM"
hours=hours-12
}if(hours==0)
hours=12
if(minutes<=9)
minutes="0"+minutes
if(seconds<=9)
seconds="0"+seconds
<!-- [Step2]:这里可以改变时钟的大小 -->
myclock="<font size='5' face='Arial'><b>"+hours+":"+minutes+":"
+seconds+" "+dn+"</b></font>"
if(document.layers){document.layers.liveclock.document.write(myclock)
document.layers.liveclock.document.close()
}else if(document.all)
liveclock.innerHTML=myclock
setTimeout("showclock()",1000)
}
</SCRIPT>

<!-- 案例代码结束 -->

</BODY>

 

 

指针时钟

 

<BODY   onLoad="Timeclock(),setNum(),setInterval('timer()',100);setInterval('runTimeClock()',100)" >
<!-- 案例代码1开始 -->

<SCRIPT language=javascript>
<!-- [Step1]:这里可以改变时钟的位置 -->
pX=300;pY=200
Timeclocks = new Array(13)

function Timeclock () {
for (i=0; i<13; i++) {
    if (document.all) Timeclocks[i]=new Array (eval('Timeclock'+i).style,-100,-100)
    else Timeclocks[i] = new Array (eval('document.Timeclock'+i),-100,-100)
    }
}

function runTimeClock() {
    for (i=0; i<13; i++) {
        Timeclocks[i][0].left=Timeclocks[i][1]+pX
        Timeclocks[i][0].top=Timeclocks[i][2]+pY
    }
}

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)))
}
if (document.all) c0.style.pixelLeft=26
}

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);
}

var lastsec
function timer() {
    time = new Date ()
    sec = time.getSeconds()
    if (sec!=lastsec) {
        lastsec = 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++) {
            Timeclocks[i][1] = Math.sin(sec) * (44 - (i-1)*11)-16;
            if (document.layers)Timeclocks[i][1]+=10;
            Timeclocks[i][2] = -Math.cos(sec) * (44 - (i-1)*11)-27;
        }
        for (i=6;i<10;i++) {
            Timeclocks[i][1] = Math.sin(min) * (40 - (i-6)*10)-16;
            if (document.layers)Timeclocks[i][1]+=10;
            Timeclocks[i][2] = -Math.cos(min) * (40 - (i-6)*10)-27;
        }
        for (i=10;i<13;i++) {
            Timeclocks[i][1] = Math.sin(hr) * (37 - (i-10)*11)-16;
            if (document.layers)Timeclocks[i][1]+=10;
            Timeclocks[i][2] = -Math.cos(hr) * (37 - (i-10)*11)-27;
        }   }}
</SCRIPT>

<!-- 案例代码1结束 -->


<!-- 案例代码2开始 -->
<div id="c0" style="position:absolute;right:6;top:6; z-index:2;">    </div>
<!-- [Step2]: 这里可以更该时钟数的大小、字体 -->
        <div id="c1" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>1</b></div>
        <div id="c2" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>2</b></div>
        <div id="c3" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>3</b></div>
        <div id="c4" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>4</b></div>
        <div id="c5" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>5</b></div>
        <div id="c6" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>6</b></div>
        <div id="c7" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>7</b></div>
        <div id="c8" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>8</b></div>
        <div id="c9" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>9</b></div>
        <div id="c10" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>10</b></div>
        <div id="c11" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>11</b></div>
        <div id="c12" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>12</b></div>
        <div id="Timeclock0" style="position:absolute;left:-20;top:-20;z-index:1">  </div>
<!-- [Step3]: 这里可以更该秒针的大小、颜色、字体 -->
        <div id="Timeclock1" style="position:absolute;left:-20;top:-20;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div>
        <div id="Timeclock2" style="position:absolute;left:-20;top:-20;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div>
        <div id="Timeclock3" style="position:absolute;left:-20;top:-20;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div>
        <div id="Timeclock4" style="position:absolute;left:-20;top:-20;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div>
        <div id="Timeclock5" style="position:absolute;left:-20;top:-20;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div>
<!-- [Step4]: 这里可以更该分针的大小、颜色、字体 -->
        <div id="Timeclock6" style="position:absolute;left:-20;top:-20;z-index:7"> <font size="+3" color="#00FFFF"><b>.</b></font></div>
        <div id="Timeclock7" style="position:absolute;left:-20;top:-20;z-index:7"> <font size="+3" color="#00FFFF"><b>.</b></font></div>
        <div id="Timeclock8" style="position:absolute;left:-20;top:-20;z-index:7"> <font size="+3" color="#00FFFF"><b>.</b></font></div>
        <div id="Timeclock9" style="position:absolute;left:-20;top:-20;z-index:7"> <font size="+3" color="#00FFFF"><b>.</b></font></div>
<!-- [Step5]: 这里可以更该时针的大小、颜色、字体 -->
        <div id="Timeclock10" style="position:absolute;left:-20;top:-20;z-index:6"> <font size="+3" color="#F30000"><b>.</b></font></div>
        <div id="Timeclock11" style="position:absolute;left:-20;top:-20;z-index:6"> <font size="+3" color="#F30000"><b>.</b></font></div>
        <div id="Timeclock12" style="position:absolute;left:-20;top:-20;z-index:6"> <font size="+3" color="#F30000"><b>.</b></font></div>

<!-- 案例代码2结束 -->

</BODY>

still
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何在HTML 中嵌入 PHP 代码
12-19
所以这里介绍如何在常规的 HTML 代码中嵌入 PHP 代码。 在常规的 HTML 中嵌入 PHP 代码 创建一个 hello 脚本，命名为 hello.php： <html> <head> <title>PHP Test</title> </head> &...
Html5代码实现动态时钟
DICA的SEOer专栏
04-07 4485
该示例使用了HTML5，CSS和JavaScript来创建一个简单的动态时钟。CSS样式用于设置页面的背景颜色，文本颜色，字体大小，字体样式和文本对齐方式。JavaScript代码用于获取当前时间，并将其格式化为HH：MM：SS字符串，然后将其显示在页面上的一个DIV元素中。setInterval函数用于每秒钟调用一次updateTime函数，以便时钟可以动态更新。 该示例使用了HTML5的canvas元素和JavaScript来创建一个动态时钟表盘。
用HTML5 Canvas绘制时钟
weixin_63929524的博客
06-28 629
HTML5的Canvas元素提供了一种在网页上绘制图形的强大方式。结合JavaScript，我们可以使用Canvas绘制出各种图形，包括时钟。本文将介绍如何使用Canvas和JavaScript来实现一个时钟，以及每个步骤的思路和实现方法。通过使用HTML5 Canvas和JavaScript，我们可以轻松地实现一个简单的时钟。本文介绍了绘制时钟所需的HTML结构和JavaScript代码，并详细解释了每个步骤的实现思路。你可以在此基础上进一步扩展和美化时钟的样式，实现更多功能，如。
HTML/JS实现漂亮的时钟效果（附带源码）
最新发布
二当家的
01-26 790
这个时钟效果比较简单，但已经足够漂亮并且可以正常运行。你可以根据需要对样式进行进一步的美化和定制。
HTML+CSS+JS实现简易电子时钟
FEIFANFENG123的博客
06-21 232
使用HTML+CSS+JS制作电子时钟小组件
html实现时钟
祎祎的博客
07-19 2284
【代码】html实现时钟。
html中嵌入js执行顺序_html中嵌入js执行顺序_
10-03
html中嵌入js执行顺序，方便，快捷，请仔细阅读
在HTML文档中嵌入JavaScript的四种方法
01-19
在HTML文档里嵌入客户端JavaScript代码有4中方法： 1.内嵌，放置在[removed]和[removed]标签之间 （少）； 2.放置在有[removed]标签的src属性指定的外部文件中 （多）； 3.放置自HTML事件处理程序中，该事件处理...
VC++在窗体的状态栏中嵌入时间(电子时钟)
03-15
内容索引:VC/C++源码,系统相关,时钟　VC++在窗体的状态栏中嵌入数字格式的时间，也就是电子时钟，虽然简单了点，但对于新手朋友，可以通过本程序学到VC++格式化显示时间的格式、如何保证每隔一秒时钟会更新、如何...
炫酷时钟html
本人喜欢编程（c/c++/嵌入式/单片机硬件制作）、听音乐、偶尔看电影、看书、爱研究、有好奇心
10-01 1396
html 炫酷时钟
HTML5 超级炫酷电子时钟
02-01
HTML5 超级炫酷电子时钟， 显示日期，时间和周几，代码简洁
时钟html5源码
08-25
以下显示部分源码，需要完整版的请下载文件 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style>body { font-size:62.5%; margin:1em; background:#232425 } ul { list-style:none; margin:0; padding:0 } #watch { font-size:1em; position:relative } #watch .frame-face { position:relative; width:30em; height:30em; margin:2em auto; border-radius:15em; background:-webkit-linear-gradient(top, #f9f9f9,#666); background:-moz-linear-gradient(top, #f9f9f9,#666); background:linear-gradient(to bottom, #f9f9f9,#666); box-shadow:rgba(0,0,0,.8) .5em .5em 4em; }
html时间代码
02-27
html动态时间代码，可以获取系统时间在页面进行动态显示
html中加入时钟
11-16
html中加入时钟标签效果，html中加入时钟标签效果，
桌面时钟代码
06-01
vc6.0和mfc库函数 窗体 对话框编程
html时钟代码
Java
10-15 2892
练习 canvas{ border:1px solid #000; display:block; margin:auto; }
使用html制作时钟
gentlevxx的博客
10-14 2911
使用html和js制作动态时钟
用HTML创作一个简单的电子时钟
greengirl5的博客
04-25 6701
效果图
桌面时钟代码怎么运行css和js
05-15
在运行桌面时钟代码时，需要在HTML文件中引入CSS和JavaScript文件，并将代码嵌入其中。以下是一些具体步骤： 步骤1：创建HTML文件 首先创建一个HTML文件，可以将其命名为“index.html”，并在文件中添加必要的HTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值