JavaScriptで時計の時を刻む効果音を実装する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScriptで時計の時を刻む効果音を実装する

高洛峰

Feb 03, 2017 pm 01:53 PM

下面一段代码给大家分享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で時計の時を刻む効果音を実装する

以上所述是小编给大家介绍的JavaScriptで時計の時を刻む効果音を実装する，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

更多JavaScriptで時計の時を刻む効果音を実装する相关文章请关注PHP中文网！

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7478

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？ Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

Javaのコレクションフレームワークを効果的に使用するにはどうすればよいですか？ Mar 13, 2025 pm 12:28 PM

この記事では、Javaのコレクションフレームワークの効果的な使用について説明します。データ構造、パフォーマンスのニーズ、スレッドの安全性に基づいて、適切なコレクション（リスト、セット、マップ、キュー）の選択を強調しています。コレクションの使用を効率的に最適化します

初心者向けのタイプスクリプト、パート2：基本データ型 Mar 19, 2025 am 09:10 AM

エントリーレベルのタイプスクリプトチュートリアルをマスターしたら、TypeScriptをサポートするIDEで独自のコードを作成し、JavaScriptにコンパイルできるはずです。このチュートリアルは、TypeScriptのさまざまなデータ型に飛び込みます。 JavaScriptには、NULL、未定義、ブール値、数字、文字列、シンボル（ES6によって導入）とオブジェクトの7つのデータ型があります。 TypeScriptはこれに基づいてより多くのタイプを定義し、このチュートリアルではすべてを詳細に説明します。ヌルデータ型 JavaScriptのように、Typescriptのnull

chart.js：パイ、ドーナツ、バブルチャートを始めます Mar 15, 2025 am 09:19 AM

このチュートリアルでは、chart.jsを使用してパイ、リング、およびバブルチャートを作成する方法について説明します。以前は、4つのチャートタイプのchart.js：ラインチャートとバーチャート（チュートリアル2）、およびレーダーチャートと極地域チャート（チュートリアル3）を学びました。パイとリングチャートを作成しますパイチャートとリングチャートは、さまざまな部分に分かれている全体の割合を示すのに理想的です。たとえば、パイチャートを使用して、サファリの男性ライオン、女性ライオン、若いライオンの割合、または異なる候補者が選挙で受け取る票の割合を示すことができます。パイチャートは、単一のパラメーターまたはデータセットの比較にのみ適しています。パイチャートのファンの角度はデータポイントの数値サイズに依存するため、パイチャートは値のあるエンティティをゼロ値で描画できないことに注意してください。これは、割合がゼロのエンティティを意味します

See all articles

JavaScriptで時計の時を刻む効果音を実装する

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック