この記事では、参考までに簡単な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 コマンド機能をインストールする
ページの主要部分: <body> <ul id="メニュー"&...
padding-top パーセンテージを使用すると、固定幅と比例した高さの表示を実現できます。現在の...
目次ドロップダウン複数選択ボックスアップグレード - すべてのオプションを追加改訂と改善を求める製品...
HTML4 についてHTML (XHTML ではありません)、MIME タイプは text/html...
最近、インターネットで「Build your own React」という記事を見ました。著者は、シン...
目次1. 属性を追加する2. 複数のオブジェクトを結合する3. オブジェクトのプロパティを削除する4...
インターネット上には Linux サーバーを監視するためのツール、コンポーネント、プログラムが多数あ...
目次CURRENT_TIMESTAMPの使用CURRENT_TIMESTAMPを使用したタイムスタン...
デフォルトでは、セルの幅と高さはコンテンツに応じて自動的に調整されますが、セルの幅と高さを手動で設定...
MySQL で判断文を書く方法:方法1. CASE関数case関数の構文: CASE条件 値1の場合...
目次1. インデックスとは何ですか? 2. インデックスはなぜ必要なのでしょうか? 3. インデック...
「curl-config を実行できませんでした」の解決策 pycurl のダウンロード/解凍 (p...
序文このプロジェクトでは円形のメニューが必要です。オンラインで検索しましたが、適切なものが見つからな...
目次Node.js の公式紹介Node.jsのコア開発言語ウェブ上の JavaScript と No...
目次序文直接充填方式for ループの push() メソッド配列コンストラクタメソッド配列コンストラ...