js中时钟特效代码（js Canvas实现的日历时钟案例有哪些）

本文目录

• js Canvas实现的日历时钟案例有哪些
• JS简单时钟的小白问题
• 用JavaScript编写一个动态实时显示的数字时钟代码
• 谁能解释下JS实现的时钟功能代码的意义吗万分感谢！
• javascript动态显示时间
• 用JS实现钟表计时器功能
• 求JavaScript制作的中文数字时钟提供的日期时间对象Date，可用于动态显示数字时钟
• 如何用javascript实现一个时钟

js Canvas实现的日历时钟案例有哪些

一、.获取上下文对象 var cxt = document.getElementById(‘元素名’).getContect(‘2d’); IE8或更早的浏览器不支持元素。

二、 drawClock() – 实现画时钟 1. clearRect() 清空给定矩形内的指定像素。 context.clearRect(x,y,width,height);

属性 |  值-----|------------x,y | 要清除的矩形左上角点的(x,y)坐标width,height| 要清除的矩形宽度和高度，单位为像素12345

2.new Date() — 得到系统时间

var sec = now.getSeconds();  var min = now.getMinutes();  var hour = now.getHours();  123

3.画时钟的形状

cxt.beginPath();  cxt.lineWidth = 10;  cxt.strokeStyle = “blue“;  cxt.arc(550, 310, 300, 0, 360, false);  cxt.closePath();  cxt.stroke(); 123456

• beginPath()的作用是canvas的绘制方法，都会以上一次beginPath之后的所有路径为基础进行绘制。

• closepath()是关闭路径，而不是结束路径，它会试图从当前路径的终点连一条路径到七、起点，让整个路径闭合起来。

• cxt.lineWidth() ： 画笔的宽度

• cxt.strokeStyle() : 设置或返回用于笔触的颜色、渐变或模式。

• 属性值：color 指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。

• gradient 用于填充绘图的渐变对象（线性或放射性）

• pattern 用于创建 pattern 笔触的 pattern 对象

• stroke ()绘制已定义的路径

• arc() 方法创建弧/曲线（用于创建圆或部分圆）。如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。 context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数

描述

x    圆的中心的 x 坐标。    

y    圆的中心的 y 坐标。    

r    圆的半径。    

sAngle    起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。    

eAngle    结束角，以弧度计。    

counterclockwise    可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。    

4）drawScale — 自定义函数画刻度

• function drawScale(size, width, color, value, startx, starty, endx, endy){  
•    for(var i = 0; i 《 size; i++){  
•        drawPointer(width, color, value, i, startx, starty, endx, endy);  
•    }  }  12345

5. 画时钟刻度依托点

• function drawPointer(width, color, value, angle, startx, starty, endx, endy){  
•    cxt.save();                 //先保存当前画布  
•    cxt.lineWidth = width;      //设置画笔的宽度  
•    cxt.strokeStyle = color;    //设置画笔的颜色  
•    cxt.translate(550, 310);    //重置异次元空间的原点坐标  
•    cxt.rotate(value * angle * Math.PI / 180);  //设置旋转的角度，参数是弧度  
•    cxt.beginPath();  
•    cxt.moveTo(startx, starty);  
•    cxt.lineTo(endx, endy);  
•    cxt.closePath();            //先闭合路径，再画线  
•    cxt.stroke();               //开始画线  
•    cxt.restore();              //将旋转后的线段返回给画布  }  12345678910111213

• translate() 方法重新映射画布上的 (0,0) 位置。

• -

JS代码如下：

• //获取上下文文档对象  var clock = document.getElementById(’clock’);  
• var cxt = clock.getContext(’2d’);  
• //画指针  function drawPointer(width, color, value, angle, startx, starty, endx, endy){  
•    cxt.save();                 //先保存当前画布  
•    cxt.lineWidth = width;      //设置画笔的宽度  
•    cxt.strokeStyle = color;    //设置画笔的颜色  
•    cxt.translate(550, 310);    //重置异次元空间的原点坐标  
•    cxt.rotate(value * angle * Math.PI / 180);  //设置旋转的角度，参数是弧度  
•    cxt.beginPath();  
•    cxt.moveTo(startx, starty);  
•    cxt.lineTo(endx, endy);  
•    cxt.closePath();            //先闭合路径，再画线  
•    cxt.stroke();               //开始画线  
•    cxt.restore();              //将旋转后的线段返回给画布  }  
• //画刻度  function drawScale(size, width, color, value, startx, starty, endx, endy){  
•    for(var i = 0; i 《 size; i++){  
•        drawPointer(width, color, value, i, startx, starty, endx, endy);  
•    }  
• }  
• //为表盘的中心填充颜色  function drawFill(){  
•    cxt.save();  
•    cxt.beginPath();  
•    cxt.arc(550, 310, 7, 0, 360, false);  
•    cxt.closePath();  
•    cxt.fillStyle = “red“;  
•    cxt.fill();  
•    cxt.restore();  
• }  
• //画时钟  function drawClock(){  
•    cxt.clearRect(0, 0, 1350, 620);  //清空整个画布  
•    var now = new Date();            //获取系统时间，取出时,分,秒  
•    var sec = now.getSeconds();  
•    var min = now.getMinutes();  
•    var hour = now.getHours();  
•    min += sec / 60;  
•    hour += min / 60;  
•    if(hour 》 12) hour -= 12;  
•    cxt.beginPath();  
•    cxt.lineWidth = 10;  
•    cxt.strokeStyle = “blue“;  
•    cxt.arc(550, 310, 300, 0, 360, false);  
•    cxt.closePath();  
•    cxt.stroke();  
•    drawScale(12, 7, “pink“, 30, 0, -280, 0, -260);      //画时刻度  
•    drawScale(60, 5, “pink“, 6,  0, -280, 0, -270);      //画分刻度  
•    drawPointer(7, “purple“, hour, 30, 0, 12, 0, -210);  //画时针  
•    drawPointer(5, “yellow“, min, 6, 0, 15, 0, -240);    //画分针  
•    drawPointer(4, “red“, sec, 6, 0, 17, 0, -250);       //画秒针  
•    //细化秒针,为秒针加箭头  
•    drawPointer(3, “red“, sec, 6, -7, -235, 0, -255);  
•    drawPointer(3, “red“, sec, 6, 7, -235, 0, -255);  
•    drawFill();  
• }  
• drawClock();  
• setInterval(drawClock, 1000);   //setInterval()方法中表示每隔1000ms，就执行drawClock一次  1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071

JS简单时钟的小白问题

setTimeout定时document.write以后，重新打开输出流，会清空页面内容，包括你以前的代码，简单改了一下：《script》 function tick() { var hours, minutes, seconds, xfile; var intHours, intMinutes, intSeconds; var today; today = new Date(); intHours = today.getHours(); intMinutes = today.getMinutes(); intSeconds = today.getSeconds(); if (intHours == 0) { hours = “12:“; xfile = “午夜“; } else if (intHours 《 12) { hours = intHours+“:“; xfile = “上午“; } else if (intHours == 12) { hours = “12:“; xfile = “正午“; } else { intHours = intHours - 12 hours = intHours + “:“; xfile = “下午“; } if (intMinutes 《 10) { minutes = “0“+intMinutes+“:“; } else { minutes = intMinutes+“:“; } if (intSeconds 《 10) { seconds = “0“+intSeconds+“ “; } else { seconds = intSeconds+“ “; } timeString = xfile+hours+minutes+seconds; document.getElementById(“t“).innerHTML=timeStringwindow.setTimeout(“tick();“, 1000); }window.onload=tick《/script》《div id=“t“》《/div》================================Clock.innerHTML = timeString定时重写clock的内容，达到时钟效果

用JavaScript编写一个动态实时显示的数字时钟代码

《p id=“showTime“》《/p》《script》setInterval(function(){ var date = new Date(); var y = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); var h = date.getHours(); var i = date.getMinutes(); var s = date.getSeconds(); document.getElementById(“showTime“).innerHTML = y + ’年’ + (m《10?’0’ + m:m) + ’月’ + (d《10?’0’ + d:d) + ’日 ’ + (h《12?’上午’:’下午’) + ((h=h%12)《10?’0’ + h:h) + ’:’ + (i《10?’0’ + i:i) + ’:’ + (s《10?’0’ + s:s);},500);《/script》

谁能解释下JS实现的时钟功能代码的意义吗万分感谢！

function startTime(){ var today=new Date(); //获取当前时间 var h=today.getHours(); //获取当前小时数 var m=today.getMinutes(); //获取当前分钟数 var s=today.getSeconds(); //获取当前秒数 m=checkTime(m); //m等于checkTime(m)的返回值 s=checkTime(s); //s等于checkTime(s)的返回值 document.getElementById(’txt’).innerHTML=h+“:“+m+“:“+s; //元素id为txt的元素的内容修改为h+“:“+m+“:“+s; t=setTimeout(’startTime()’,500); //每隔500毫秒执行一次自身,导致一直执行}function checkTime(i){ if(i《10) { i=“0“+i; } //如果传递进来的参数小于10,则参数前面加0,保持二位数 return i;}

javascript动态显示时间

《html》《head》《title》时钟特效《/title》《script type=“text/javascript“》 function disptime(){ var today = new Date()； //获得当前时间 var hh = today.getHours()； //获得小时、分钟、秒 var mm = today.getMinutes()； var ss = today.getSeconds()； /*设置div的内容为当前时间*/ document.getElementById(“myclock“).innerHTML=“《h1》现在是:“+hh+“:“+mm+“:“+ss+“《h1》“；/* 使用setTimeout在函数disptime()体内再次调用setTimeout 设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示*/ var myTime=setTimeout(“disptime()“，1000)；} 《/script》《/head》 《body onload=“disptime()“》《div id=“myclock“》《/div》《/body》。

用JS实现钟表计时器功能

利用new Date();可以轻松的实现钟表功能,甚至日历功能.如果要实现计时器功能也可以用这个对象.var c = 1000; // 一千微秒,就是一秒 function funBeginDisTime() { c = c + 1000; // 节奏为一秒 var now = new Date(0,0,0,0,0,0,c); var day = now.getDate(); var hour = now.getHours(); var minutes = now.getMinutes(); var sec = now.getSeconds(); $(“#myClock“).html(day + “天“+ hour + “时“ + minutes + “分“ + sec + “秒“); myTime = setTimeout(“funBeginDisTime()“, 1000); // 每一秒执行一次 } function funStopDisTime() { clearTimeout(myTime); } body》 《input id=“Button2“ type=“button“ value=“开始“ onclick=“funBeginDisTime()“/》 《span id=“myClock“》《/span》 《input id=“Button1“ type=“button“ value=“暂停“ onclick=“funStopDisTime()“ /》 《/body》 setInterval() 是循环重复执行某个动作,setTimeout()是只执行一次.比如每五秒就通过AJAX向服务器发送一次请求.那么就可以用setInterval(): view plain copyfunction reloadAction() { $.ajax({ “type“:“POST“, “url“:“live.php“, “data“:“getData=live“, “success“:function(data) { // .... } }); }

求JavaScript制作的中文数字时钟提供的日期时间对象Date，可用于动态显示数字时钟

function load(){var d=new Date();var day=d.getDate();var month=d.getMonth() + 1;var year=d.getFullYear();var weekday=new Array(7);weekday=“星期日“;weekday=“星期一“;weekday=“星期二“;weekday=“星期三“;weekday=“星期四“;weekday=“星期五“;weekday=“星期六“;document.getElementById(’myTime’).innerHTML = year + “年“ + month + “月“ + day+“日“+“ “+weekday;}《body  onload=“load()“》《div class=“top_time“》《p id=“myTime“》《/p》《/div》《/body》

这是我写的一个年月日星期的代码，你可以看看。

时分秒我有空给你写一个

如何用javascript实现一个时钟

function init(){  clock();  setInterval(clock,1000);}function clock(){  var now = new Date();  var ctx = document.getElementById(’canvas’).getContext(’2d’);  ctx.save();  ctx.clearRect(0,0,150,150);  ctx.translate(75,75);  ctx.scale(0.4,0.4);  ctx.rotate(-Math.PI/2);  ctx.strokeStyle = “black“;  ctx.fillStyle = “white“;  ctx.lineWidth = 8;  ctx.lineCap = “round“;  // Hour marks  ctx.save();  for (var i=0;i《12;i++){    ctx.beginPath();    ctx.rotate(Math.PI/6);    ctx.moveTo(100,0);    ctx.lineTo(120,0);    ctx.stroke();  }  ctx.restore();  // Minute marks  ctx.save();  ctx.lineWidth = 5;  for (i=0;i《60;i++){    if (i%5!=0) {      ctx.beginPath();      ctx.moveTo(117,0);      ctx.lineTo(120,0);      ctx.stroke();    }    ctx.rotate(Math.PI/30);  }  ctx.restore();    var sec = now.getSeconds();  var min = now.getMinutes();  var hr  = now.getHours();  hr = hr》=12 ? hr-12 : hr;  ctx.fillStyle = “black“;  // write Hours  ctx.save();  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )  ctx.lineWidth = 14;  ctx.beginPath();  ctx.moveTo(-20,0);  ctx.lineTo(80,0);  ctx.stroke();  ctx.restore();  // write Minutes  ctx.save();  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )  ctx.lineWidth = 10;  ctx.beginPath();  ctx.moveTo(-28,0);  ctx.lineTo(112,0);  ctx.stroke();  ctx.restore();    // Write seconds  ctx.save();  ctx.rotate(sec * Math.PI/30);  ctx.strokeStyle = “#D40000“;  ctx.fillStyle = “#D40000“;  ctx.lineWidth = 6;  ctx.beginPath();  ctx.moveTo(-30,0);  ctx.lineTo(83,0);  ctx.stroke();  ctx.beginPath();  ctx.arc(0,0,10,0,Math.PI*2,true);  ctx.fill();  ctx.beginPath();  ctx.arc(95,0,10,0,Math.PI*2,true);  ctx.stroke();  ctx.fillStyle = “#555“;  ctx.arc(0,0,3,0,Math.PI*2,true);  ctx.fill();  ctx.restore();  ctx.beginPath();  ctx.lineWidth = 14;  ctx.strokeStyle = ’#325FA2’;  ctx.arc(0,0,142,0,Math.PI*2,true);  ctx.stroke();  ctx.restore();}