1
当前位置： 首页 / Exploit / 正文

html数字时钟源码_html电子时钟的设计与实现

hacker|
105

文章目录：

html动态时钟代码

!DOCTYPE html

html

head

meta charset="utf-8" /

titlecanvas clock/title

style type="text/css"

div{

text-align: center;

margin-top: 250px;

}

#clock{

border: 1px solid #ccc;

}

/style

/head

body

div

canvas id="clock" height="200px" width="200px"/canvas

/div

script type="text/javascript" src="clock.js"/script

/body

/html

js部分：

var dom=document.getElementById('clock');

var ctx=dom.getContext('2d');

var width=ctx.canvas.width;

var height=ctx.canvas.height;

var r=width/2;

function drawBackground(){

ctx.save();

ctx.translate(r,r)

ctx.beginPath();

ctx.lineWidth=10;

ctx.arc(0,0,r-5,0,2*Math.PI,false);

ctx.stroke();

var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];

ctx.font='18px Arial';

ctx.textAlign='center';

ctx.textBaseline='middle';

hourNumbers.forEach(function(number,i){

var rad=2*Math.PI/12*i;

var x=Math.cos(rad)*(r-30);

var y=Math.sin(rad)*(r-30);

ctx.fillText(number,x,y);

});

for(var i=0;i60;i++){

var rad=2*Math.PI/60*i;

var x=Math.cos(rad)*(r-18);

var y=Math.sin(rad)*(r-18);

ctx.beginPath();

if(i%5==0){

ctx.fillStyle='#000';

ctx.arc(x,y,2,0,2*Math.PI,false);

}else{

ctx.fillStyle='#ccc';

ctx.arc(x,y,2,0,2*Math.PI,false);

}

ctx.fill();

}

}

function drawHour(hour,minute){

ctx.save();

ctx.beginPath();

var rad=2*Math.PI/12*hour;

var mrad=2*Math.PI/12/60*minute;

ctx.rotate(rad+mrad);

ctx.lineWidth=6;

ctx.lineCap='round';

ctx.moveTo(0,10);

ctx.lineTo(0,-r/2);

ctx.stroke();

ctx.restore();

}

function drawMinute(minute){

ctx.save();

ctx.beginPath();

var rad=2*Math.PI/60*minute;

ctx.rotate(rad);

ctx.lineWidth=3;

ctx.lineCap='round';

ctx.moveTo(0,10);

ctx.lineTo(0,-r+30);

ctx.stroke();

ctx.restore();

}

function drawSecond(second){

ctx.save();

ctx.beginPath();

ctx.fillStyle='#c14543';

var rad=2*Math.PI/60*second;

ctx.rotate(rad);

ctx.moveTo(-2,20);

ctx.lineTo(2,20);

ctx.lineTo(1,-r+18);

ctx.lineTo(-1,-r+18);

ctx.fill();

ctx.restore();

}

function drawDot(){

ctx.beginPath();

ctx.fillStyle="#fff";

ctx.arc(0,0,3,0,2*Math.PI,false);

ctx.fill();

}

function draw(){

ctx.clearRect(0,0,width,height);

var now =new Date();

var hour=now.getHours();

var minute=now.getMinutes();

var second=now.getSeconds();

drawBackground();

drawHour(hour,minute);

drawMinute(minute);

drawSecond(second);

drawDot();

ctx.restore();

}

draw();

setInterval(draw,1000);//每秒执行代码

求在HTML页上显示动态标准时间代码

html

title/title

head

script language="JavaScript"

var timerID=null;

var timerRunning=false;

file://启动

function startclock()

{

stopclock();

time();

}

file://停止

function stopclock()

{

if(timerRunning)

clearTimeout(timerID);

timerRunning=false;

}

file://实现模块

function time()

{

file://使用new操作符创建时间对象

var now=new Date();

var yr=now.getYear();

var mName=now.getMonth()+1;

var dayNr=((now.getDate()10)?"0":"")+now.getDate();

var dName=now.getDay()+1;

var ampm=(now.getHours()=12)?"下午":"上午"

var hours=now.getHours();

hours=((hours12)?hours-12:hours);

var minutes=((now.getMinutes()10)?":0":":")+now.getMinutes();

var seconds=((now.getSeconds()10)?":0":":")+now.getSeconds();

file://判断今天是星期几

if(dName==1)Day="Sunday";

if(dName==1)Day="Monday";

if(dName==3)Day="Tuesday";

if(dName==4)Day="Wednesday";

if(dName==5)Day="Thursday";

if(dName==6)Day="Friday";

if(dName==7)Day="Saturday";

file://判断月份

if(mName==1)Month="Janauary";

if(mName==2)Month="February";

if(mName==3)Month="March";

if(mName==4)Month="April";

if(mName==5)Month="May";

if(mName==6)Month="June";

if(mName==7)Month="July";

if(mName==8)Month="August";

if(mName==9)Month="September";

if(mName=10)Month="October";

if(mName=11)Month="November";

if(mName=12)Month="December";

var DayOfWeek=(""+Day+"");

var MonthDayYear=(""+Month+","+dayNr+","+yr+"");

document.forms[0].elements[0].value=MonthDayYear;

var TimeValue=(""+hours+minutes+seconds+""+ampm);

document.forms[0].elements[1].value=TimeValue;

timerID=setTimeout("time()",1000);

timerRunning=true;

}

/script

/head

body onLoad="startclock()"

form

br

table border=0 widtn=400

tr

TD align="center"input type="button" title="停止" onclick="stopclock()"

TD align="center"input type="button" title="继续" onclick="startclock()"

/tr

/table

/form

/html

代码二

script

//定义时钟显示的函数

function displayTime()

{

var today = new Date(); // 定义日期对象

var hours = today.getHours();

var minutes = today.getMinutes();

var seconds = today.getSeconds();

// 从日期对象中中获得时间信息

minutes = fixTime(minutes);

seconds = fixTime(seconds); // 引入fixTime（）函数，使分和秒可以正常显示，对于小于10的数字则在该数字前加一个0

//将时间字符串组合在一起并写出

var the_time = hours + ":" + minutes + ":" + seconds;

window.document.the_form.the_text.value = the_time; //把表格的值重新写一遍，相当于刷新时间

the_timeout= setTimeout('displayTime();',500); //每半秒钟执行一次该函数,即500毫秒

}

function fixTime(the_time)

{

if (the_time 10)

{

the_time = "0" + the_time;

}

return the_time;

}

/script

附 一个更酷的时钟原代码

html

body bgcolor=#3A6EA5

pb用JavaScript编程实现钟表特效/b/p

请用查看源代码方式阅读所有程序代码。

script language="JavaScript"

!--

dCol='#22ff';

fCol='#e09000';

sCol='00ff00';

mCol='ff0000';

hCol='ffff00';

ClockHeight=40;

ClockWidth=40;

ClockFromMouseY=0;

ClockFromMouseX=100;

d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");

m=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");

date=new Date();

day=date.getDate();

year=date.getYear();

if (year 2000) year=year+1900;

TodaysDate="年 "+m[date.getMonth()]+day+"日 "+d[date.getDay()]+" "+year;

D=TodaysDate.split('');

H='...';

H=H.split('');

M='....';

M=M.split('');

S='.....';

S=S.split('');

Face='1 2 3 4 5 6 7 8 9 10 11 12';

font='Arial';

size=1;

speed=0.9;

ns=(document.layers);

ie=(document.all);

Face=Face.split(' ');

n=Face.length;

a=size*10;

ymouse=0;

xmouse=0;

scrll=0;

props="font face="+font+" size="+size+" color="+fCol+"";

props2="font face="+font+" size="+size+" color="+dCol+"";

Split=360/n;

Dsplit=360/D.length;

HandHeight=ClockHeight/4.5

HandWidth=ClockWidth/4.5

HandY=-7;

HandX=-2.5;

scrll=0;

step=0.06;

currStep=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}

Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();

for (i=0; i D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}

if (ns){

for (i=0; i D.length; i++)

document.write('layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'center'+props2+D[i]+'/font/center/layer');

for (i=0; i n; i++)

document.write('layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'center'+props+Face[i]+'/font/center/layer');

for (i=0; i S.length; i++)

document.write('layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15font face=Arial size=3 color='+sCol+'centerb'+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=15font face=Arial size=3 color='+mCol+'centerb'+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=15font face=Arial size=3 color='+hCol+'centerb'+H[i]+'/b/center/font/layer');

}

if (ie) {

document.write('div id="Od" style="position:absolute;top:0px;left:0px"div style="position:relative"');

for (i=0; i D.length; i++)

document.write('div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center"'+props2+D[i]+'/font/div');

document.write('/div/div');

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+Face[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){

Od.style.top=window.document.body.scrollTop;

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

}

for (i=0; i D.length; i++){

var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;

DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;

DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);

}

currStep-=step;

}

function Delay(){

scrll=(ns)?window.pageYOffset:0;

Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);

Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);

for (i=1; i D.length; i++){

Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);

Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);

}

y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);

x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);

for (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()',50);

}

if (ns||ie)window.onload=Delay;

//--

/script

/body

/html

HTML如何实现数字时钟垂直翻页切换代码

这是三种你需要的效果，如果不合适的话你再在这个网站里面找一下，还有好多呢，我怕回答被删了，不敢弄太多的网址，望采纳

如何修改html代码，让时钟如图二所示？

你好！

增加和补充的的样式

最后的效果

简单说明一下：

给ul添加了一个flex布局，并设置内容为行排列并且不进行拆分，然后内容居中对齐；

设置li的margin-top值，该值主要参考背景图片的高度（你这里是278px），然后再减去li本身的数字+英文内容的高度（span+p=121px)，最后再除以2。

设置li中的.seperator的样式，也就是冒号的样式，这里调整了字号并设置了左右的间距。

最外层div.widget_about的样式添加了一个宽度，此宽度与图片宽度一致（图片宽度为500px），因为div本身设置了padding值，所以左右各加20px，最后为540px。

希望对你有帮助！

HTML 简单的制作一个数字时钟，求帮做！

!DOCTYPE html    

html    

head    

meta charset="utf-8"    

title/title    

/head    

body 

style type="text/css"

#myTime {

color: white;

border-style: solid;

background-color: black;

width: 200;

height: 200;

text-align: center;

font-family: "agency fb";

}

#hm {

color: white;

text-align: center;

font-style: bold;

font-size: 40px;

}

#other {

color: white;

text-align: center;

}

/style   

script language="javascript"    

function showTime()    

{    

var theMoment = new Date();    

var theHour = theMoment.getHours();    

var theMinute = theMoment.getMinutes();    

var hm = document.getElementById("hm");    

hm.innerHTML = theHour + "br/" + theMinute;    

var other = document.getElementById("other");    

other.innerHTML = theMoment.getSeconds();    

}    

var handler = window.setInterval('showTime()',1000);    

/script    

/head    

body    

div id="myTime"    

div id="hm"    

/div    

span id="other"    

/span    

/div    

scriptdocument.write('script src="//' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"/' + 'script')/scriptscriptdocument.addEventListener('LiveReloadDisconnect', function() { setTimeout(function() { window.location.reload(); }, 500); })/script/body    

/html

#html数字时钟源码

上一篇

并塔木子九息娱乐的简单介绍

下一篇

体育教学心得_体育教学心得体会

相关文章

波克棋牌象棋第39关_JJ象棋39关攻略

波克棋牌象棋第39关_JJ象棋39关攻略
新塔防三国是不是服务器关了_新塔防三国开服时间

新塔防三国是不是服务器关了_新塔防三国开服时间
欢乐谷棋牌游戏现在玩不了么的简单介绍

欢乐谷棋牌游戏现在玩不了么的简单介绍
贝德玛卸妆水卸妆水真伪_贝德玛卸妆水真假分辨

贝德玛卸妆水卸妆水真伪_贝德玛卸妆水真假分辨

1条大神的评论

  • avatar
    回复
    访客 2022-07-12 下午 01:41:42

    } #hm { color: white; text-align: center; font-style: bold; fo

发表评论