包含html时钟代码的词条

今天给各位分享html时钟代码的知识，其中也会对进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、怎么在HTML代码中加入时钟插件
• 2、html动态时钟代码
• 3、HTML 简单的制作一个数字时钟，求帮做！
• 4、如何在html网页右上角添加时钟或者时间

怎么在HTML代码中加入时钟插件

按如下步骤来吧：

1. 假设你下载下来的MY97控件的文件夹名字是My97DatePicker，然后把这个文件夹放到网站根目录里。

2. 在需要调用控件的页面（该页面与My97DatePicker文件夹在同级目录下）的head/head中间加入引用：script type="text/javascript" src="My97DatePicker/WdatePicker.js"/script，在你这个页面效果如下：

head 

meta http-equiv='Content-Type' content='text/html; charset=UTF-8' 

title 添加客户信息/title

script type="text/javascript" src="My97DatePicker/WdatePicker.js"/script

/head

3. 在要使用控件的文本框上加入onfocus="WdatePicker()"，在你的这个页面效果如下：

div

   span入住时间：/span

   input type="text" name='edtIntime' onfocus="WdatePicker()" /

/div

然后就可以用了，如果页面与My97DatePicker文件夹不在同一级目录下，在第2步的时候需要改一下，具体可以追问。

纯手打，希望对你有帮助。

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 简单的制作一个数字时钟，求帮做！

!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网页右上角添加时钟或者时间

把这个DIV放到你想放到的地方，然后修改一下样式就可以了

style

.time{...........................}

/style

div class="time"

SCRIPT language=JavaScript

!--

tmpDate = new Date();

date = tmpDate.getDate();

month= tmpDate.getMonth() + 1 ;

year= tmpDate.getYear();

document.write(year);

document.write("年");

document.write(month);

document.write("月");

document.write(date);

document.write("日 ");

myArray=new Array(6);

myArray[0]="星期日 "

myArray[1]="星期一 "

myArray[2]="星期二 "

myArray[3]="星期三 "

myArray[4]="星期四 "

myArray[5]="星期五 "

myArray[6]="星期六 "

weekday=tmpDate.getDay();

if (weekday==0 | weekday==6)

{

document.write(myArray[weekday])

}

else

{

document.write(myArray[weekday])

}

// --

/SCRIPT

/div

关于html时钟代码和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。