<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="keywords" content="clock">
<meta name="description" content="This is a clock">
<title>Clock</title>
</head>
<body>
<audio id="ticktock">
<source = src="ticktock.mp3" type="audio/mp3">
</audio>
<script type="text/javascript">
/*
年(y)可以用 1-4 個(gè)占位符
月(M)、日(d)、時(shí)(H,24時(shí))、時(shí)(h,12時(shí))、分(m)、秒(s)、季度(q) 可以用 1-2 個(gè)占位符
毫秒(S)只能用 1 個(gè)占位符(是 1-3 位數(shù)字)
AM或PM只能用 1 個(gè)占位符(是 2 位英文)
上午或下午(T)只能用 1 個(gè)占位符(是 2 位中文)
星期(E)可以用 1-3 個(gè)占位符
季度(q)只能用 1 個(gè)占位符(是 1 位數(shù)字)
*/
Date.prototype.format = function(fmt) {
var map = {
"M+" : this.getMonth() + 1, //月
"d+" : this.getDate(), //日
"H+" : this.getHours(), //24時(shí)
/*
上午12時(shí)只代表當(dāng)天上午的12時(shí),下午的12時(shí)代表當(dāng)天下午的12時(shí),
0時(shí)代表第二天的開(kāi)始,即前面一天12時(shí)已過(guò)0時(shí)開(kāi)始計(jì)算新一天的時(shí)間,
雖然說(shuō)時(shí)間上跟前面那一天下午12時(shí)重合,但日期已經(jīng)發(fā)生更改,所以不能說(shuō)0時(shí)就是12時(shí)
*/
"h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12,//12時(shí)
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"S" : this.getMilliseconds(), //毫秒
"t" : this.getHours() < 12 ? "AM" : "PM",
"T" : this.getHours() < 12 ? "上午" : "下午",
};
var week = {
"0" : "日",
"1" : "一",
"2" : "二",
"3" : "三",
"4" : "四",
"5" : "五",
"6" : "六",
}
var quarter = {
"0" : "一",
"1" : "二",
"2" : "三",
"3" : "四",
}
if(/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
if(/(E+)/.test(fmt)) {
var weekPreStr;
switch(RegExp.$1.length) {
case 1:
weekPreStr = "";
break;
case 2:
weekPreStr = "周";
break;
default:
weekPreStr = "星期";
break;
}
fmt = fmt.replace(RegExp.$1, weekPreStr + week[this.getDay()]);
}
if(/(q)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, quarter[Math.floor(this.getMonth() / 3)]);
}
for(var key in map) {
if(new RegExp("(" + key + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? map[key] : ("00" + map[key]).substr((map[key]+"").length));
}
}
return fmt;
}
</script>
<script>
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
var halfPI = Math.PI / 2;
var doublePI = Math.PI * 2;
//陰影級(jí)別
var shadowBlur = 10;
//陰影寬度
var shadowWidth = 8;
//陰影在X方向上的偏移
var shadowOffsetX = 5;
//陰影在Y方向上的便宜
var shadowOffsetY = 5;
//深色陰影
var shadowDarkColor = "rgba(0,0,0,0.8)";
//淺色陰影
var shadowLightColor = "rgba(0,0,0,0.1)";
//畫(huà)布中心到邊緣的內(nèi)切圓半徑
var canvasRadius = 250;
canvas.width = canvasRadius * 2;
canvas.height = canvasRadius * 2;
//獲取畫(huà)布中心的坐標(biāo)
var cx = canvasRadius;
var cy = canvasRadius;
//時(shí)鐘外圈的貝塞爾花紋個(gè)數(shù)
var bezierPatternCount = 36;
//時(shí)鐘外圈的貝塞爾花紋波峰處半徑
var bezierPeakRadius = canvasRadius - 10;
//時(shí)鐘外圈的貝塞爾花紋一半的角度
var bezierHalfSpan = doublePI / bezierPatternCount / 2;
//時(shí)鐘外圈的貝塞爾花紋底部半徑
var bezierRadius = bezierPeakRadius - 20;
//時(shí)鐘外圈的貝塞爾花紋顏色
var bezierPatternColor = "Plum";
//時(shí)鐘外圈半徑
var clockBorderRadius = bezierRadius - 10;
//時(shí)鐘外圈寬度
var clockBorderWidth = 10;
//時(shí)鐘外圈顏色
var clockBorderColor = "Aqua";
//時(shí)鐘外圈陰影半徑
var clockBorderShadowRadius = clockBorderRadius - shadowWidth + 1;
//時(shí)鐘整數(shù)時(shí)間刻度線寬
var clockScaleWidth = 2;
//時(shí)鐘整數(shù)時(shí)間刻度外半徑
var clockScaleOuterRadius = clockBorderRadius - shadowWidth;
//時(shí)鐘整數(shù)時(shí)間刻度內(nèi)半徑
var clockScaleInnerRadius = clockScaleOuterRadius - 20;
//時(shí)鐘刻度顏色
var clockScaleColor = "Black";
//時(shí)鐘非整數(shù)時(shí)間處半徑
var clockScaleMiddleRadius = clockScaleOuterRadius - 10;
//時(shí)鐘數(shù)字半徑
var clockNumRadius = clockBorderShadowRadius - 40;
//時(shí)鐘數(shù)字字體
var clockNumFont = "25px Arial";
//時(shí)鐘數(shù)字顏色
var clockNumColor = "black";
//數(shù)字日期距中心的垂直距離
var digitalDateMarginCenter = 50;
//數(shù)字日期顏色
var digitalDateColor = "Black";
//數(shù)字日期字體
var digitalDateFont = "bold 18px Arial";
//數(shù)字時(shí)間距中心的垂直距離
var digitalTimeMarginCenter = 100;
//數(shù)字時(shí)間顏色
var digitalTimeColor = "white";
//數(shù)字時(shí)間背景顏色
var digitalTimeBgColor = "DarkSlateBlue";
//數(shù)字時(shí)間字體
var digitalTimeFont = "bold 25px Arial";
//數(shù)字時(shí)間高度的一半
var digitalTimeHeight = 40;
//數(shù)字時(shí)間分隔線寬度
var digitalTimeSpanLineWidth = 2;
//時(shí)鐘中心點(diǎn)內(nèi)圓的半徑
var clockCenterInnerDotRadius = 7;
//時(shí)鐘中心點(diǎn)內(nèi)圓的顏色
var clockCenterInnerDotColor = "FireBrick";
//時(shí)鐘中心點(diǎn)外圓的半徑
var clockCenterOuterDotRadius = 10;
//時(shí)鐘中心點(diǎn)外圓的顏色
var clockCenterOuterDotColor = "Maroon";
//時(shí)針線寬
var clockNeedleWidth = 5;
//時(shí)針半徑
var clockHourNeedleRadius = clockBorderShadowRadius - 120;
//時(shí)針顏色
var clockHourNeedleColor = "DarkGreen";
//分針半徑
var clockMinuteNeedleRadius = clockBorderShadowRadius - 80;
//分針顏色
var clockMinuteNeedleColor = "DarkSlateGray";
//秒針半徑
var clockSecondNeedleRadius = clockBorderShadowRadius - 40;
//秒針尾部半徑
var clockSecondNeedleBottomRadius = -20;
//秒針顏色
var clockSecondNeedleColor = "FireBrick";
//畫(huà)圓環(huán)
function strokeCircle(cx, cy, r) {
ctx.beginPath();
ctx.arc(cx, cy, r, 0, doublePI);
ctx.stroke();
}
//畫(huà)圓
function fillCircle(cx, cy, r) {
ctx.beginPath();
ctx.arc(cx, cy, r, 0, doublePI);
ctx.fill();
}
//繪制線條
function strokeLine(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
//根據(jù)角度和半徑計(jì)算圓上相應(yīng)位置的坐標(biāo)(最右側(cè)為起始角度,順時(shí)針?lè)较驗(yàn)檎?
function circlePos(cx, cy, theta, radius) {
var pos = {
x: cx + radius * Math.cos(theta),
y: cy + radius * Math.sin(theta),
};
return pos;
}
//在圓環(huán)上繪制刻度線
function strokeCircleLine(cx, cy, theta, r1, r2) {
var pos1 = circlePos(cx, cy, theta, r1);
var pos2 = circlePos(cx, cy, theta, r2);
strokeLine(pos1.x, pos1.y, pos2.x, pos2.y);
}
//設(shè)置默認(rèn)陰影
function setShadow(type) {
ctx.lineWidth = shadowWidth;
ctx.shadowBlur = shadowBlur;
ctx.shadowOffsetX = shadowOffsetX;
ctx.shadowOffsetY = shadowOffsetY;
if(type === 1) {
ctx.shadowColor = shadowLightColor;
} else {
ctx.shadowColor = shadowDarkColor;
}
}
//取消陰影
function clearShadow() {
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.shadowBlur = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
}
//繪制時(shí)鐘外圈的貝塞爾花紋
function renderBezierPattern() {
ctx.fillStyle = bezierPatternColor;
ctx.beginPath();
var theta = 0;
//由于circlePos是順時(shí)針?lè)较蛘? 故圈也是順時(shí)針?lè)较? var beginPos = circlePos(cx, cy, theta, bezierRadius);
ctx.moveTo(beginPos.x, beginPos.y);
while(theta < doublePI) {
//貝塞爾曲線控制點(diǎn)
var controlTheta = theta + bezierHalfSpan;
var controlPos = circlePos(cx, cy, controlTheta, bezierPeakRadius);
//貝塞爾曲線終止點(diǎn)
var endTheta = controlTheta + bezierHalfSpan;
var endPos = circlePos(cx, cy, endTheta, bezierRadius);
ctx.quadraticCurveTo(controlPos.x, controlPos.y, endPos.x, endPos.y);
theta = endTheta;
}
//繪制圓counterclockwise=false, 即默認(rèn)是順時(shí)針?lè)较? ctx.arc(cx, cy, clockBorderRadius, 0, doublePI, true);
//注意: 兩個(gè)相反方向的路徑內(nèi)部為填充范圍
ctx.fill();
}
//繪制時(shí)鐘邊框
function renderClockBorder() {
//畫(huà)外框
ctx.strokeStyle = clockBorderColor;
ctx.lineWidth = clockBorderWidth;
strokeCircle(cx, cy, clockBorderRadius);
//畫(huà)外框的內(nèi)陰影
ctx.strokeStyle = shadowLightColor;
setShadow(1);
strokeCircle(cx, cy, clockBorderShadowRadius);
clearShadow();
}
//繪制時(shí)鐘圓周上的數(shù)字和刻度部分
function renderClockNums() {
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = clockNumFont;
var span = doublePI / 60;
for(var i = 1, radian = -halfPI + span; i <= 60; i++, radian += span) {
if(i % 5 == 0) {
//繪制刻度
ctx.strokeStyle = clockScaleColor;
ctx.lineWidth = clockScaleWidth;
strokeCircleLine(cx, cy, radian, clockScaleInnerRadius, clockScaleOuterRadius);
//繪制數(shù)字
var pos = circlePos(cx, cy, radian, clockNumRadius);
var num = i / 5;
ctx.fillStyle = clockNumColor;
ctx.fillText(num, pos.x, pos.y);
} else {
ctx.strokeStyle = clockScaleColor;
ctx.lineWidth = clockScaleWidth;
strokeCircleLine(cx, cy, radian, clockScaleMiddleRadius, clockScaleOuterRadius);
}
}
}
//繪制數(shù)字時(shí)鐘
function renderDigital(date) {
//繪制日期
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = digitalDateFont;
ctx.fillStyle = digitalDateColor;
var text = date.format("yyyy年MM月dd日 EEE");
ctx.fillText(text, cx, cy + digitalDateMarginCenter);
//繪制時(shí)間
ctx.font = digitalTimeFont;
text = date.format(" HH mm ss ");
ctx.fillStyle = digitalTimeBgColor;
var textWidth = ctx.measureText(text).width;
var textBgX = cx - textWidth / 2;
var textBgY = cy + digitalTimeMarginCenter - digitalTimeHeight / 2;
ctx.fillRect(textBgX, textBgY, textWidth, digitalTimeHeight);
ctx.fillStyle = digitalTimeColor;
ctx.fillText(text, cx, cy + digitalTimeMarginCenter);
//繪制事件中間的分隔線
ctx.lineWidth = digitalTimeSpanLineWidth;
ctx.strokeStyle = digitalTimeColor;
var textSpan = textWidth / 6;
var leftLineX = cx - textSpan;
strokeLine(leftLineX, textBgY, leftLineX, textBgY + digitalTimeHeight);
var rightLineX = cx + textSpan;
strokeLine(rightLineX, textBgY, rightLineX, textBgY + digitalTimeHeight);
}
//繪制時(shí)鐘中心最下方紅點(diǎn)
function renderClockCenterOuterDot() {
ctx.fillStyle = clockCenterOuterDotColor;
fillCircle(cx, cy, clockCenterOuterDotRadius);
}
//繪制時(shí)鐘中心最上方紅點(diǎn)
function renderClockCenterInnerDot() {
ctx.fillStyle = clockCenterInnerDotColor;
fillCircle(cx, cy, clockCenterInnerDotRadius);
}
//繪制時(shí)鐘指針
function renderClockNeedle(date) {
var hourRadian = date.getHours() % 12 / 12 * doublePI - halfPI;
var minuteRadian = date.getMinutes() / 60 * doublePI - halfPI;
var secondRadian = date.getSeconds() / 60 * doublePI - halfPI;
setShadow();
ctx.lineCap = "round";
ctx.lineWidth = clockNeedleWidth;
ctx.strokeStyle = clockHourNeedleColor;
strokeCircleLine(cx, cy, hourRadian, 0, clockHourNeedleRadius);
ctx.strokeStyle = clockMinuteNeedleColor;
strokeCircleLine(cx, cy, minuteRadian, 0, clockMinuteNeedleRadius);
ctx.strokeStyle = clockSecondNeedleColor;
strokeCircleLine(cx, cy, secondRadian, clockSecondNeedleBottomRadius, clockSecondNeedleRadius);
ctx.lineCap = "square";
clearShadow();
}
function render(date) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
renderBezierPattern();
renderClockBorder();
renderClockNums();
renderDigital(date);
renderClockCenterOuterDot();
renderClockNeedle(date);
renderClockCenterInnerDot();
}
var lastTime = 0;
var audio = document.getElementById("ticktock");
function loop() {
var date = new Date();
var currentTime = date.getTime();
if(currentTime - lastTime >= 1000) {
lastTime = currentTime;
//注意：這里設(shè)0非常關(guān)鍵，否則雖然會(huì)循環(huán)播放，但會(huì)從上一次暫停的地方開(kāi)始播放，造成延遲
audio.currentTime = 0;
audio.play();
render(date);
}
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>
以上所述是小編給大家介紹的JavaScript實(shí)現(xiàn)時(shí)鐘滴答聲效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
更多JavaScript實(shí)現(xiàn)時(shí)鐘滴答聲效果相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
