js中时钟特效代码（用JS实现钟表计时器功能）

本文目录

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

用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) { // .... } }); }

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》

如何用javascript实现一个时钟

求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》

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

时分秒我有空给你写一个

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实现的时钟功能代码的意义吗万分感谢！

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》。

星码园

分享网站建设技术、IT技术等网络应用技术

js中时钟特效代码