この記事では、参考までに簡単なHTMLと音楽プレーヤーの制作コードを紹介します。具体的な内容は以下のとおりです。 まず、画像リソースと音楽リソースを見つけて、imgフォルダに入れます。 2番目のステップはページレイアウトを整えることです 3番目のステップはjsコードを書くことです コードをコピーして実行する場合、画像リソースと音楽リソースの名前を変更する必要があります。 実行すると画像が切り替わり、効果は次のようになります。 コードは次のとおりです。 気に入っていただけると嬉しいです! ! ! <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8" /> <タイトル></タイトル> <スタイル タイプ="text/css"> * { マージン: 0; パディング: 0; } 体{ 背景色:#596653; } .yinyue { 幅: 300ピクセル; 高さ: 300px; 境界線: 1px 水色; マージン:50px 500px; } .bofang { 幅: 100ピクセル; 高さ: 100px; 背景色: 水色; } .muted ,.play,.prefer,.next{ 幅: 60ピクセル; 高さ: 30px; 背景色: アクアマリン; テキスト配置: 中央; 行の高さ: 30px; } #公志、#尚夏 マージン: 10px 530px; } </スタイル> </head> <本文> <div id="コンテンツ"> <img class="yinyue" src="img/yinyue1.jpg" > <audio src="img/yinyue1.mp3" > </音声> <div id="anniu"> <div id="kongzhi"> <button class="muted" type="button" >ミュート</button> <img class="bofang" src="img/play.png" > <button class="play" type="button" >再生</button> </div> <div id="上夏"> <button class="prefer" type="button">前の曲</button> <span>ボリューム</span> <input class="volume" type="range" min="0" max="1" step="0.01" /> <button class="next" type="button">次の曲</button> </div> </div> </div> <script type="text/javascript"> var インデックス = 0; var srcs=['img/yinyue1.mp3','img/yinyue2.mp3','img/yinyue3.mp3']; var imgArr=['img/yinyue1.jpg','img/yinyue2.jpg','img/yinyue3.jpg']; var audio = document.querySelector("audio"); var playBtn = document.querySelector(".play"); var mutedBtn = document.querySelector(".muted"); var volumeBtn = document.querySelector(".volume"); var bofang = document.querySelector('.bofang'); var prefer = document.querySelector(".prefer"); var nextBtn = document.querySelector(".next"); var yinyue = document.querySelector(".yinyue") playBtn.onclick=関数(){ オーディオ一時停止===trueの場合{ オーディオを再生します。 bofang.src='img/play.png'; audio.value="再生"; }それ以外{ オーディオを一時停止します。 bofang.src = 'img/pause.png'; audio.value="一時停止"; } } mutedBtn.onclick=関数(){ if(audio.muted==true){ オーディオをミュートします。 } それ以外{ オーディオをミュートします。 bofang.src = 'img/silent.png'; } } volumeBtn.onchange=関数(){ audio.volume=volumnBtn.value; } 優先するonclick=関数(){ 索引 - ; if(インデックス<0){ インデックス=srcs.length-1; } audio.srcs = srcs[インデックス]; yinyue.src=imgArr[インデックス]; } nextBtn.onclick=関数(){ インデックス++; if(index==srcs.length){ インデックス=0; } audio.src = srcs[インデックス]; yinyue.src=imgArr[インデックス]; } </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux および CentOS (サーバー) に zip および unzip コマンド機能をインストールする
目次概要コンポーネント間でデータを共有する方法Vuex の原則の紹介Vuexはコンポーネントのグロー...
目次1 コンテナクラウドとは何ですか? 2 Dockerの紹介3 dockerを使ってMySQLをイ...
効果効果図は以下のとおりです実装のアイデアDivは太陽の長方形の光と影を実現します前の疑似要素は、既...
現在、Web デザインではタブが広く使用されていますが、一般的に次の 2 つのタイプに分けられます。...
この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...
1. システムに必要な libaio ソフトウェアがインストールされていることを確認します。インスト...
1. スクロールスナップはフロントエンド開発者にとって必須のスキルですCSS スクロール スナップは...
この記事では、Baidu News Navigation Barの効果を実現するための具体的なJSコ...
JS でアニメーションを記述する場合、移動前に相対位置を絶対位置に変換してからアニメーション機能を実...
ますます多くのウェブサイトで、XHTML が HTML4 に取って代わって急速に普及しています。しか...
カーソル選択クエリによって返される行のセットは、結果セットと呼ばれます。結果セット内の行は、入力した...
SQL JOIN 句は、テーブル間の共通フィールドに基づいて 2 つ以上のテーブルの行を結合するため...
従来、開発者はインスタンスで必要になる可能性のあるデータに対して JavaScript クラス内にプ...
1. 問題の説明MYSQL を起動すると、図に示すように、「ERROR 2003 (HY000): ...
コードをコピーコードは次のとおりです。 html、アドレス、引用ブロック、本文、dd、div、 dl...