js实现Form栏显示全格式时间时钟效果代码

正文实例陈说了js达成Form栏突显全格式时间时钟效果代码。分享给我们供大家参谋。具体如下:

JavaScript html5 canvas绘制挂钟效果,html5canvas

正文实例陈诉了JavaScript+html5
canvas绘制机械钟效果。分享给我们供大家参谋,具体如下:

 HTML部分:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
 <title>canvas绘图</title>
</head>
<body onload="init()">
<canvas id="canvas" width="200px" height="200px"></canvas>
</body>
</html>

JavaScript部分:

function init(){
 var canvas = document.getElementById("canvas"),
  context = canvas.getContext("2d");

 setInterval(function(){draw(canvas, context)},1000);
}
function draw(canvas, context){
 var x = canvas.width,
  y = canvas.height,
  r = Math.min(x/2, y/2);

 context.clearRect(0, 0, x, y); //清除绘画历史
 //绘画钟框
 context.fillStyle = "#f1f1f1";
 drawCircle(context, x, y, r);
 //绘画文字
 var tx = x/2,ty = y/2,tr = 0.8*r;
 context.font = "bold 12px 微软雅黑";
 context.fillStyle = "#000";
 drawText(context, "1", tx + 0.5*tr,ty - 0.866*tr);
 drawText(context, "2", tx + 0.866*tr, ty - 0.5*tr);
 drawText(context, "3", tx + tr, ty);
 drawText(context, "4", tx + 0.866*tr, ty + 0.5*tr);
 drawText(context, "5", tx + 0.5*tr, ty + 0.866*tr);
 drawText(context, "6", tx, ty + tr);
 drawText(context, "7", tx - 0.5*tr, ty + 0.866*tr);
 drawText(context, "8", tx - 0.866*tr, ty + 0.5*tr);
 drawText(context, "9", tx - tr, ty);
 drawText(context, "10", tx - 0.866*tr, ty - 0.5*tr);
 drawText(context, "11", tx - 0.5*tr, ty - 0.866*tr);
 drawText(context, "12", tx, ty - tr);
 //获取当前时间
 var date = new Date(),
  h = date.getHours(),
  m = date.getMinutes(),
  s = date.getSeconds(),
  angleH = (360/12)*Math.PI/180,
  angleM = (360/60)*Math.PI/180
 context.strokeSyle = "#000";
  //绘制时刻度
  drawScale(context, x, y, r, angleH, -0.88*r, -0.96*r, 3);
  //绘制分刻度
  drawScale(context, x, y, r, angleM, -0.93*r, -0.96*r, 1);
 //绘画时分秒针
 drawCircle(context, x, y, 3);
 drawNeedle(context, x, y, r, h*angleH + m*angleM/12, -0.5*r);
 drawNeedle(context, x, y, r, m*angleM + s*angleM/60, -0.6*r);
 drawNeedle(context, x, y, r, s*angleM, -0.75*r);

}
//绘画圆
function drawCircle(context, x, y, r){
 context.save();
 context.beginPath();
 context.arc(x/2, y/2, r, 0, Math.PI*2, 0);
 context.fill();
 context.closePath();
 context.restore();
}
//绘画文字方法
function drawText(context, text, x, y){
 context.save();
 x -= (context.measureText(text).width/2);
 y += 4;
 context.translate(x, y);
 context.fillText(text, 0, 0);
 context.restore();
}
//绘制刻度方法
function drawScale(context, x, y, r, rotate, start, end, lineWidth){
 context.save();
 context.beginPath();
 context.translate(x/2,y/2);
 context.lineWidth = lineWidth;
 for (var i = 0; i < 60; i++) { 
  context.rotate(rotate);
  context.moveTo(0, start); 
  context.lineTo(0, end);
 }
 context.closePath();
 context.stroke();
 context.restore();
}
//绘画时分秒针方法
function drawNeedle(context, x, y, r, rotate, line){
 context.save();
 context.translate(x/2,y/2);
 context.beginPath();
 context.rotate(rotate);
 context.moveTo(0, 0.1*r);
 context.lineTo(0, line);
 context.closePath();
 context.stroke();
 context.restore();
}

期望本文所述对我们JavaScript程序设计有着协理。

此间演示的Form栏特效石英钟,展现整日期格式的日子日期效果,可呈现星期几、几月几号,现在都以平昔展现在网页中,而本代码是将时刻突显在表单的文本框中,看一下代码就清楚了。

您可能感兴趣的小说:

  • js达成的尾随鼠标移动的时钟效果(中乌克兰语日期呈现卡塔尔国
  • JS达成的网页倒计时数字挂钟效果
  • js落成Form栏展现全格式时间挂钟效果代码
  • js完成的奥运倒计时石英钟效果代码
  • 基于javascript完成动态石英钟效果
  • JavaScript html5 canvas绘制石英钟效果

html5 canvas绘制石英钟效果,html5canvas
本文实例陈述了JavaScript+html5
canvas绘制挂钟效果。共享给大家供大家参谋,具体如下:
HTML部分:…

运行效果截图如下:

在线演示地址如下:

实际代码如下:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"HTMLHEADTITLEForm栏特全时钟/TITLE/HEADbody bgcolor="#ffffff" onLoad="startclock()"script language="JavaScript"!-- Hide var timerID = null var timerRunning = false function MakeArray(size) { this.length = size; for(var i = 1; i = size; i++) { this[i] = ""; } return this; } function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false } function showtime () { var now = new Date(); var year = now.getFullYear(); var month = now.getMonth() + 1; var date = now.getDate(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); var day = now.getDay(); Day = new MakeArray(7); Day[0]="星期天"; Day[1]="星期一"; Day[2]="星期二"; Day[3]="星期三"; Day[4]="星期四"; Day[5]="星期五"; Day[6]="星期六"; var timeValue = ""; timeValue += year + "年"; timeValue += ((month  10)  "0" : "") + month + "月"; timeValue += date + "日 "; timeValue += (Day[day]) + " "; timeValue += ((hours = 12)  hours : hours - 12); timeValue += ((minutes  10)  ":0" : ":") + minutes; timeValue += ((seconds  10)  ":0" : ":") + seconds; timeValue += (hours  12)  "上午" : "下午"; document.jsfrm.face.value = timeValue; timerID = setTimeout("showtime()",1000); timerRunning = true } function startclock () { stopclock(); showtime() } //--/scriptform name='jsfrm'input type=text name='face' size=34 value=''/form/BODY/HTML

仰望本文所述对我们的javascript程序设计有所支持。

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图