JavaScript implémente un effet sonore de tic-tac
下面一段代码给大家分享js实现时钟滴答声功能，具体代码如下所示：
<!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 个占位符
月(M)、日(d)、时(H,24时)、时(h,12时)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符
毫秒(S)只能用 1 个占位符(是 1-3 位数字)
AM或PM只能用 1 个占位符(是 2 位英文)
上午或下午(T)只能用 1 个占位符(是 2 位中文)
星期(E)可以用 1-3 个占位符
季度(q)只能用 1 个占位符(是 1 位数字)
*/
Date.prototype.format = function(fmt) {
var map = {
"M+" : this.getMonth() + 1, //月
"d+" : this.getDate(), //日
"H+" : this.getHours(), //24时
/*
上午12时只代表当天上午的12时,下午的12时代表当天下午的12时,
0时代表第二天的开始,即前面一天12时已过0时开始计算新一天的时间,
虽然说时间上跟前面那一天下午12时重合,但日期已经发生更改,所以不能说0时就是12时
*/
"h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12,//12时
"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;
//阴影级别
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)";
//画布中心到边缘的内切圆半径
var canvasRadius = 250;
canvas.width = canvasRadius * 2;
canvas.height = canvasRadius * 2;
//获取画布中心的坐标
var cx = canvasRadius;
var cy = canvasRadius;
//时钟外圈的贝塞尔花纹个数
var bezierPatternCount = 36;
//时钟外圈的贝塞尔花纹波峰处半径
var bezierPeakRadius = canvasRadius - 10;
//时钟外圈的贝塞尔花纹一半的角度
var bezierHalfSpan = doublePI / bezierPatternCount / 2;
//时钟外圈的贝塞尔花纹底部半径
var bezierRadius = bezierPeakRadius - 20;
//时钟外圈的贝塞尔花纹颜色
var bezierPatternColor = "Plum";
//时钟外圈半径
var clockBorderRadius = bezierRadius - 10;
//时钟外圈宽度
var clockBorderWidth = 10;
//时钟外圈颜色
var clockBorderColor = "Aqua";
//时钟外圈阴影半径
var clockBorderShadowRadius = clockBorderRadius - shadowWidth + 1;
//时钟整数时间刻度线宽
var clockScaleWidth = 2;
//时钟整数时间刻度外半径
var clockScaleOuterRadius = clockBorderRadius - shadowWidth;
//时钟整数时间刻度内半径
var clockScaleInnerRadius = clockScaleOuterRadius - 20;
//时钟刻度颜色
var clockScaleColor = "Black";
//时钟非整数时间处半径
var clockScaleMiddleRadius = clockScaleOuterRadius - 10;
//时钟数字半径
var clockNumRadius = clockBorderShadowRadius - 40;
//时钟数字字体
var clockNumFont = "25px Arial";
//时钟数字颜色
var clockNumColor = "black";
//数字日期距中心的垂直距离
var digitalDateMarginCenter = 50;
//数字日期颜色
var digitalDateColor = "Black";
//数字日期字体
var digitalDateFont = "bold 18px Arial";
//数字时间距中心的垂直距离
var digitalTimeMarginCenter = 100;
//数字时间颜色
var digitalTimeColor = "white";
//数字时间背景颜色
var digitalTimeBgColor = "DarkSlateBlue";
//数字时间字体
var digitalTimeFont = "bold 25px Arial";
//数字时间高度的一半
var digitalTimeHeight = 40;
//数字时间分隔线宽度
var digitalTimeSpanLineWidth = 2;
//时钟中心点内圆的半径
var clockCenterInnerDotRadius = 7;
//时钟中心点内圆的颜色
var clockCenterInnerDotColor = "FireBrick";
//时钟中心点外圆的半径
var clockCenterOuterDotRadius = 10;
//时钟中心点外圆的颜色
var clockCenterOuterDotColor = "Maroon";
//时针线宽
var clockNeedleWidth = 5;
//时针半径
var clockHourNeedleRadius = clockBorderShadowRadius - 120;
//时针颜色
var clockHourNeedleColor = "DarkGreen";
//分针半径
var clockMinuteNeedleRadius = clockBorderShadowRadius - 80;
//分针颜色
var clockMinuteNeedleColor = "DarkSlateGray";
//秒针半径
var clockSecondNeedleRadius = clockBorderShadowRadius - 40;
//秒针尾部半径
var clockSecondNeedleBottomRadius = -20;
//秒针颜色
var clockSecondNeedleColor = "FireBrick";
//画圆环
function strokeCircle(cx, cy, r) {
ctx.beginPath();
ctx.arc(cx, cy, r, 0, doublePI);
ctx.stroke();
}
//画圆
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();
}
//根据角度和半径计算圆上相应位置的坐标(最右侧为起始角度,顺时针方向为正)
function circlePos(cx, cy, theta, radius) {
var pos = {
x: cx + radius * Math.cos(theta),
y: cy + radius * Math.sin(theta),
};
return pos;
}
//在圆环上绘制刻度线
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);
}
//设置默认阴影
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;
}
//绘制时钟外圈的贝塞尔花纹
function renderBezierPattern() {
ctx.fillStyle = bezierPatternColor;
ctx.beginPath();
var theta = 0;
//由于circlePos是顺时针方向正, 故圈也是顺时针方向
var beginPos = circlePos(cx, cy, theta, bezierRadius);
ctx.moveTo(beginPos.x, beginPos.y);
while(theta < doublePI) {
//贝塞尔曲线控制点
var controlTheta = theta + bezierHalfSpan;
var controlPos = circlePos(cx, cy, controlTheta, bezierPeakRadius);
//贝塞尔曲线终止点
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, 即默认是顺时针方向
ctx.arc(cx, cy, clockBorderRadius, 0, doublePI, true);
//注意: 两个相反方向的路径内部为填充范围
ctx.fill();
}
//绘制时钟边框
function renderClockBorder() {
//画外框
ctx.strokeStyle = clockBorderColor;
ctx.lineWidth = clockBorderWidth;
strokeCircle(cx, cy, clockBorderRadius);
//画外框的内阴影
ctx.strokeStyle = shadowLightColor;
setShadow(1);
strokeCircle(cx, cy, clockBorderShadowRadius);
clearShadow();
}
//绘制时钟圆周上的数字和刻度部分
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);
//绘制数字
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);
}
}
}
//绘制数字时钟
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);
//绘制时间
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);
}
//绘制时钟中心最下方红点
function renderClockCenterOuterDot() {
ctx.fillStyle = clockCenterOuterDotColor;
fillCircle(cx, cy, clockCenterOuterDotRadius);
}
//绘制时钟中心最上方红点
function renderClockCenterInnerDot() {
ctx.fillStyle = clockCenterInnerDotColor;
fillCircle(cx, cy, clockCenterInnerDotRadius);
}
//绘制时钟指针
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;
//注意：这里设0非常关键，否则虽然会循环播放，但会从上一次暂停的地方开始播放，造成延迟
audio.currentTime = 0;
audio.play();
render(date);
}
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>
以上所述是小编给大家介绍的JavaScript implémente un effet sonore de tic-tac，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
更多JavaScript implémente un effet sonore de tic-tac相关文章请关注PHP中文网！
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment créer et publier mes propres bibliothèques JavaScript?
Mar 18, 2025 pm 03:12 PM
L'article discute de la création, de la publication et du maintien des bibliothèques JavaScript, en se concentrant sur la planification, le développement, les tests, la documentation et les stratégies de promotion.
Comment optimiser le code JavaScript pour les performances dans le navigateur?
Mar 18, 2025 pm 03:14 PM
L'article traite des stratégies pour optimiser les performances JavaScript dans les navigateurs, en nous concentrant sur la réduction du temps d'exécution et la minimisation de l'impact sur la vitesse de chargement de la page.
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Comment déboguer efficacement le code JavaScript à l'aide d'outils de développeur de navigateur?
Mar 18, 2025 pm 03:16 PM
L'article traite du débogage efficace de JavaScript à l'aide d'outils de développeur de navigateur, de se concentrer sur la définition des points d'arrêt, de l'utilisation de la console et d'analyser les performances.
Comment utiliser les cartes source pour déboguer le code JavaScript minifié?
Mar 18, 2025 pm 03:17 PM
L'article explique comment utiliser les cartes source pour déboguer JavaScript minifiée en le mappant au code d'origine. Il discute de l'activation des cartes source, de la définition de points d'arrêt et de l'utilisation d'outils comme Chrome Devtools et WebPack.
Comment utiliser efficacement le cadre de collections de Java?
Mar 13, 2025 pm 12:28 PM
Cet article explore une utilisation efficace du cadre de collections de Java. Il met l'accent sur le choix des collections appropriées (liste, set, map, file d'attente) en fonction de la structure des données, des besoins en performances et de la sécurité des threads. Optimisation de l'utilisation de la collection grâce à
TypeScript pour les débutants, partie 2: Types de données de base
Mar 19, 2025 am 09:10 AM
Une fois que vous avez maîtrisé le didacticiel TypeScript de niveau d'entrée, vous devriez être en mesure d'écrire votre propre code dans un IDE qui prend en charge TypeScript et de le compiler en JavaScript. Ce tutoriel plongera dans divers types de données dans TypeScript. JavaScript a sept types de données: null, non défini, booléen, numéro, chaîne, symbole (introduit par ES6) et objet. TypeScript définit plus de types sur cette base, et ce tutoriel les couvrira tous en détail. Type de données nuls Comme javascript, null en typeScript
Début avec Chart.js: tarte, beignet et graphiques à bulles
Mar 15, 2025 am 09:19 AM
Ce tutoriel expliquera comment créer des graphiques à tarte, anneaux et bulles à l'aide de chart.js. Auparavant, nous avons appris quatre types de graphiques de graphique. Créer des graphiques à tarte et à anneaux Les graphiques à tarte et les graphiques d'anneaux sont idéaux pour montrer les proportions d'un tout divisé en différentes parties. Par exemple, un graphique à secteurs peut être utilisé pour montrer le pourcentage de lions mâles, de lions féminins et de jeunes lions dans un safari, ou le pourcentage de votes que différents candidats reçoivent lors des élections. Les graphiques à tarte ne conviennent que pour comparer des paramètres ou des ensembles de données uniques. Il convient de noter que le graphique à tarte ne peut pas dessiner des entités avec une valeur nulle car l'angle du ventilateur dans le graphique à tarte dépend de la taille numérique du point de données. Cela signifie toute entité avec une proportion nulle
