JavaScript 简单的钟表

最新推荐文章于 2024-06-08 22:15:04 发布

xuyanlu

最新推荐文章于 2024-06-08 22:15:04 发布

阅读量664

点赞数

分类专栏： JavaScript 文章标签： javascript mozilla function browser html 360

本文链接：https://blog.csdn.net/jovenlu/article/details/7843783

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文将介绍如何利用JavaScript在浏览器环境中创建一个简单的钟表，展示实时时间。通过结合HTML和JavaScript函数，实现动态更新页面上的时间显示。

摘要由CSDN通过智能技术生成

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
div{
margin:0px auto;
}
</style>
</head>

<body>
<div style="margin-top:100px;width:450px;">
<canvas id="drawing" width="320" height="240"> Your browser does not support the canvas element.</canvas>
</div>

</body>

<script type="text/javascript">

function currentClock(){
var dt = new Date();
var minutes = dt.getMinutes();
var hours = dt.getHours();
var seconds = dt.getSeconds();
var _basicRadian = 2 * Math.PI/360;
/** 角度是以分针指向12时计算 **/
var _basicSecondAngle = 6;
var _basicMinuteAngle = 6; //一分钟的角度
var _basicHourAngle = 30;
var _basicHourPerAngle = 0.5; //分针移动一分钟时间移动的角度 360/60 = 30/x x= 0.5
var _basicMinutesPerAngle = 0.1; // 秒针移动一秒，分针移动的角度 360/6 = 6/x x = 0.1
var _secondsAngle = seconds * _basicSecondAngle;
var _minutesAngle = minutes * _basicMinuteAngle + seconds * _basicMinutesPerAngle; //当前分钟的角度
var _hoursAngle = hours * _basicHourAngle + minutes * _basicHourPerAngle;

//秒针坐标
var secondsPointX = Math.sin(_secondsAngle * _basicRadian) * 85 + 100;
var secondsPointY = 100 - Math.cos(_secondsAngle * _basicRadian) * 85;

//分针坐标
var minutesPointX = Math.sin(_minutesAngle * _basicRadian) * 77 + 100;
var minutesPointY = 100 - Math.cos(_minutesAngle * _basicRadian) * 77;
//时针坐标
var hoursPointX = Math.sin(_hoursAngle * _basicRadian) * 70 + 100;
var hoursPointY = 100 - Math.cos(_hoursAngle * _basicRadian) * 70;

//document.write("X:" + minutesPointX + "------Y:" + minutesPointY);
var drawing = document.getElementById("drawing");
/*Mozilla 支持*/
if(drawing.getContext){
var context = drawing.getContext("2d");
}
context.clearRect(0, 0, 300, 300);
context.beginPath();
context.lineWidth = "2";
//绘制外圆
context.arc(100, 100, 99, 0, 2 * Math.PI, false);
//绘制内圆
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2 * Math.PI, false);
context.save();
context.stroke();
context.moveTo(104, 100);
context.fillStyle = "rgba(0, 0, 255, 0.5)";
context.arc(100, 100, 4, 0, 2 * Math.PI, false);
//绘制秒针
context.moveTo(100, 100);
context.lineTo(secondsPointX, secondsPointY);
context.lineCap = "square";
//绘制分针
context.moveTo(100, 100);
context.lineTo(minutesPointX, minutesPointY);
context.save();
context.stroke();
//绘制时针
context.beginPath();
context.moveTo(100, 100);
context.lineTo(hoursPointX, hoursPointY);
context.save();
context.stroke();
context.font = "bold 10px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12", 100, 12);
context.fillText("6", 100, 187);
context.fillText("9", 12, 100);
context.fillText("3", 187, 100);
context.fillText("1", 100+88/2, 100 - Math.sqrt(88*88-44*44));
context.fillText("2", 100 + Math.sqrt(88*88-44*44), 100-88/2);
context.fillText("4", 100 + Math.sqrt(88*88-44*44), 100+88/2);
context.fillText("5", 100+88/2, 100 + Math.sqrt(88*88-44*44));
context.fillText("7", 100-88/2, 100 + Math.sqrt(88*88-44*44));
context.fillText("8", 100 - Math.sqrt(88*88-44*44), 100+88/2);
context.fillText("10", 100 - Math.sqrt(88*88-44*44), 100-88/2);
context.fillText("11", 100-88/2, 100 - Math.sqrt(88*88-44*44));
context.save();
context.stroke();

}

function showTime(){
currentClock();
setTimeout(showTime, 1000);
}

showTime();
</script>

</html>

效果如下：