获取系统时间 让时间动起来

js代码

function test1() {
		var date = new Date();
			var year = date.getFullYear();   //获取系统的年;
			var month = date.getMonth()+1;   //获取系统月份,由于月份是从0开始计算,所以要加1
			var day = date.getDate(); // 获取系统日,
			var hour = date.getHours(); //获取系统时,
			var minute = date.getMinutes(); //分
			minute = minute < 10 ? "0"+minute:minute;
			var second = date.getSeconds(); //秒
			second = second < 10 ? "0"+second:second;
			var div1 = document.getElementById("div1");
			div1.innerHTML = year + "年" + month + "月" + day + "日 " + hour + ":" + minute + ":" + second;	
		}
		var label;
		function test2(){
			label = setInterval(test1, 1000);
		}
		function test3(){
			clearInterval(label);
		}

页面

<body>
	<input type="button" onclick="test1()"value="显示时间">
	<input type="button" onclick="test2()"value="让时间动起来">
	<input type="button" onclick="test3()"value="暂停">

	
		<div id="div1">
		</div>
	</body>

以下是一个用CSS3画布制作的时钟,并让时间起来的示例代码: HTML代码: ```html <div class="clock"> <canvas id="canvas" width="200" height="200"></canvas> </div> ``` CSS代码: ```css .clock { width: 200px; height: 200px; position: relative; margin: 50px auto; } #canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ``` JavaScript代码: ```javascript var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.translate(radius, radius); radius = radius * 0.9; setInterval(drawClock, 1000); function drawClock() { drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius); } function drawFace(ctx, radius) { var grad; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2 * Math.PI); ctx.fillStyle = "#fff"; ctx.fill(); grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05); grad.addColorStop(0, "#333"); grad.addColorStop(0.5, "#fff"); grad.addColorStop(1, "#333"); ctx.strokeStyle = grad; ctx.lineWidth = radius * 0.1; ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI); ctx.fillStyle = "#333"; ctx.fill(); } function drawNumbers(ctx, radius) { var ang; var num; ctx.font = radius * 0.15 + "px arial"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; for (num = 1; num < 13; num++) { ang = num * Math.PI / 6; ctx.rotate(ang); ctx.translate(0, -radius * 0.85); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius * 0.85); ctx.rotate(-ang); } } function drawTime(ctx, radius) { var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); hour = hour % 12; hour = (hour * Math.PI / 6) + (minute * Math.PI / (6 * 60)) + (second * Math.PI / (360 * 60)); drawHand(ctx, hour, radius * 0.5, radius * 0.07); minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60)); drawHand(ctx, minute, radius * 0.8, radius * 0.07); second = (second * Math.PI / 30); drawHand(ctx, second, radius * 0.9, radius * 0.02); } function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = "round"; ctx.moveTo(0, 0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos); } ``` 以上代码中,`drawFace()`函数绘制时钟的表盘和边框,`drawNumbers()`函数绘制时钟的数字,`drawTime()`函数获取当前时间并绘制时、分、秒针,`drawHand()`函数绘制时、分、秒针。`setInterval()`函数每隔一秒钟调用`drawClock()`函数,实现时钟时间的实时更新。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值