溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“javascript如何實現簡單鐘表效果”，在日常操作中，相信很多人在javascript如何實現簡單鐘表效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”javascript如何實現簡單鐘表效果”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
JavaScript主要用來向HTML頁面添加交互行為。
2.JavaScript可以直接嵌入到HTML頁面，但寫成單獨的js文件有利于結構和行為的分離。 3.JavaScript具有跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行。
復制可直接使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
h2 {
text-align: center;
}
div {
width: 400px;
height: 400px;
margin: 10px auto;
padding: 0;
}
</style>
</head>
<body>
<h2>手繪時鐘</h2>
<hr />
<div>
<canvas id="c1" width="400px" height="400px">
</canvas>
</div>
<script type="text/javascript">
var clock = document.getElementById("c1").getContext("2d");
// var clock = $("#huabu").get(0).getContext("2d"); //$中使用畫布
function play() {
clock.clearRect(0, 0, 400, 400);
clock.save();
clock.translate(200, 200); //把畫布中心轉移到canvas中間
biaopan();
run();
clock.restore();
}
setInterval(function() {
play();
}, 1000);
function biaopan() {
//繪制表盤
clock.strokeStyle = " #9932CC";
clock.lineWidth = 5;
clock.beginPath();
clock.arc(0, 0, 195, 0, 2 * Math.PI);
clock.stroke();
//刻度(小時)
clock.strokeStyle = "#9932CC";
clock.lineWidth = 5;
for(var i = 0; i < 12; i++) {
clock.beginPath();
clock.moveTo(0, -190);
clock.lineTo(0, -170);
clock.stroke();
clock.rotate(2 * Math.PI / 12);
}
//刻度(分鐘)
clock.strokeStyle = "#9932CC";
clock.lineWidth = 3;
for(var i = 0; i < 60; i++) {
clock.beginPath();
clock.moveTo(0, -190);
clock.lineTo(0, -180);
clock.stroke();
clock.rotate(2 * Math.PI / 60);
}
//繪制文字
clock.textAlign = "center";
clock.textBaseline = "middle";
clock.fillStyle = "#6495ED";
clock.font = "20px 微軟雅黑"
for(var i = 1; i < 13; i++) {
clock.fillText(i,Math.sin(2*Math.PI /12*i)*150,Math.cos(2*Math.PI/12*i)*-150);
}
}
function run() {
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
// if(h > 12) {
// h = h - 12;
// }
//日期
var week = date.getDay();
var month = date.getMonth() + 1;
var day = date.getDate();
switch (week){
case 1: week = "星期一";
break;
case 2: week = "星期二";
break;
case 3: week = "星期三";
break;
case 4: week = "星期四";
break;
case 5: week = "星期五";
break;
case 6: week = "星期六";
break;
default: week = "星期天";
break;
}
clock.save();
clock.textAlign = "center";
clock.textBaseline = "middle";
clock.fillStyle = "black";
clock.font = "16px"
clock.fillText(week,-2,-118);
clock.fillText(month+" 月",-90,2);
clock.fillText(day+" 號",90,0);
clock.stroke();
clock.restore();
//時針
//分針60格 分針5格
clock.save();
clock.rotate(2 * Math.PI / 12 * h + (2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60) / 12);
clock.strokeStyle = "black";
clock.lineWidth = 7;
clock.beginPath();
clock.moveTo(0, 0);
clock.lineTo(0, -80);
clock.lineCap = "round";
clock.stroke();
clock.restore();
//分針
//秒針60格 分針一格
clock.save();
clock.beginPath();
clock.strokeStyle = "#D2691E";
clock.lineWidth = 5;
clock.rotate(2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60);
clock.moveTo(0, 0);
clock.lineTo(0, -110);
clock.lineCap = "round";
clock.stroke();
clock.restore();
//秒針
clock.strokeStyle = "red";
clock.rotate(2 * Math.PI / 60 * s);
clock.lineWidth = 4;
clock.beginPath();
clock.moveTo(0, 0);
clock.lineTo(0, -120);
clock.lineCap = "round";
clock.stroke();
//中心
clock.fillStyle = " #CCFFFF";
clock.lineWidth = 5;
clock.beginPath();
clock.arc(0, 0, 10, 0, 2 * Math.PI);
clock.fill();
clock.strokeStyle = "cadetblue";
clock.stroke();
}
</script>
</body>
</html>到此，關于“javascript如何實現簡單鐘表效果”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
