JS HTML5音楽天気プレイヤー（天気情報を取得するAjax）_JavaScriptスキル
晚上要考軟體工程，實在不想複習。寫個播放器吧，這個只是個用來學習的小Demo，眾多不完善之處，下面貼出源代碼，如果要轉載，請加上版權聲明
PS:因為Ajax涉及到跨域獲取天氣資訊，有兩個版本，一個是直接跨域，IE10支持，其他的瀏覽器要改配置。另一個是伺服器端的weather.php，取得天氣資訊回傳json。
weather.php就不寫了，裡面的對應路徑存放對應的文件
演示地址:
http://569375.ichengyun.net/fm/
實現功能：
音樂播放，進度調節（滑動模組），音量條件，音樂隨機選擇，背景圖片，圖片預加載，音樂預加載，天氣Ajax獲取
音樂清單使用的json處理（也可以理解是hash表）
>
頭>
正文{邊距：0;填充：0; }
.clear{clear:both;}
#weather-body{margin:0;填充：0； }
#weather{ 位置：絕對；左：20px； top:30px;font-family:"微軟雅黑","SimHei";}
#weather p{ }
p #weather-city{ width:100px;顏色：#FFF；邊距：20px；字體大小：28px； }
p#天氣溫度{ width:200px;顏色：#FFF；邊距：20px；左邊距： 50px；字體大小：32px;}
p#weather-stat{ 寬度：200px;顏色：#FFF；邊距：20px；字體大小：26px; }
#music-box{ 位置：絕對；右字體大小：26px; }
#music-box{ 位置：絕對；右字體大小：26px; }
#music-box{ 位置：絕對；右字型：20px；填充：30px；過濾器：alpha（不透明度=70）；-moz-不透明度：0.7；-khtml-不透明度：0.7；不透明度：0.7；底部：30px；text-align:center;}
#music-box div{ }
#music-box:hover{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;不透明度: 1;}
h2#song-title{ font-family:"微軟雅黑","SimHei"; color:#fff;}
h3#song-author{font-family:"微軟雅黑","SimHei" ;顏色：#fff;}
div#music-process{ width:400px;}
div#music-process-p{float:left;邊距：0px 20px 0 20px；顯示：塊；寬度： 290px；背景：url(./images/button.gif) 0 -133px 重複-x ;高度：40px; }
span#music-process-slide{ 遊標:指針;顯示:塊;浮動:左;寬度：30px；背景：url(./images/button.png) -30px -230px 無重複；高度：30px;}
div#music-ctime{display:block;浮動：左；顏色：#FFF；粗細：粗體；寬度：40px；高度：30px；font-family：「Arial」；}
div#music-etime{display:block;浮動：左；顏色：#FFF；字體粗細：粗體；寬度：40px；高度：30px；字體系列：「Arial」；}
div#music-play{ 遊標：指針；顯示：無；邊距：10px 自動；寬度：100px；邊框：0px #FFF 實心；背景：url(./images/button.png) 0 -12px 無重複；高度：70px;}
div#music-next{遊標：指標；顯示：無；邊距：10px 自動；寬度：100px；頂部邊距：15px；邊框：0px #FFF 實心；背景：url(./images/button.png) 0 -85px 無重複；高度：40px;}
div#music-volume{float:right;邊邊距：10px；寬度：50px；} div#music-volume-v{float:left;顯示：塊；寬度：50px；背景：url(./images/button.png) 3px -250px 無重複；高度：100px； } span#music-volume-slide{遊標:指針;顯示:塊;浮動:左;寬度：40px；背景：url(./images/button.png) 0px -353px 無重複；高度：30px；}
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7393
15
1630
14
1358
52
1268
25
1217
29
Bose Soundbar Ultra の発売体験: 箱から出してすぐにホームシアター?
Feb 06, 2024 pm 05:30 PM
私は物心ついた頃から、家に大きなフロアスタンディングスピーカーを 2 台置いていて、テレビは完全なサウンドシステムを備えていてこそテレビと呼べるものだと常々信じてきました。しかし、私が働き始めた頃は、プロ仕様のホームオーディオを買う余裕がありませんでした。製品の位置づけを検討し理解した結果、音質、サイズ、価格のすべての点で私のニーズを満たしているサウンドバーというカテゴリーが私にとって非常に適していることがわかりました。そこで、サウンドバーを導入することにしました。慎重に選んだ結果、2024 年初頭にボーズが発売したこのパノラマ サウンドバー製品、ボーズ ホーム エンターテイメント スピーカー ウルトラを選択しました。 (写真出典: Lei Technology 撮影) 一般に、「本来の」ドルビーアトモス効果を体験したい場合は、測定および校正されたサラウンドサウンド + 天井を自宅に設置する必要があります。
VLC Chromecast が Windows PC で動作しない
Mar 26, 2024 am 10:41 AM
VLC Chromecast 機能が Windows PC で動作しませんか? この問題は、Chromecast デバイスと VLC のキャスト機能の間の互換性の問題が原因である可能性があります。この記事では、この状況でできることと、VLC レンダラーが Chromecast を見つけられない場合の対処法について説明します。 Windows で ChromecastVLC を使用する方法 VLC を使用して Windows から Chromecast にビデオをキャストするには、次の手順に従います: メディア プレーヤー アプリを開き、再生メニューに移動します。 [レンダラー] オプションに移動すると、Chromecast デバイスが検出されたことが確認できます。
Audacity に Intel OpenVINO プラグインによる AI オーディオ編集機能が追加されました
Feb 15, 2024 am 11:06 AM
Audacity は、無料のオープンソースのクロスプラットフォームオーディオ編集ソフトウェアです。オープンコードとプラグインの貢献メカニズムがあり、誰でも参加できます。さらに、インテルは音楽編集者やポッドキャストプロデューサー向けに設計された OpenVINOAI プラグインのセットを無料で提供しています。この Web サイトでは、プラグイン パッケージのサイズは約 2 GB で、Intel の GitHub ページからダウンロードできることに気づきましたが、実行するには 64 ビット Windows バージョンの Audacity も必要です。この AI プラグインの最も直感的な点は、Audacity の音楽編集機能に 3 つの高度なツールが組み込まれていることです: 1 つ目は「音楽生成」機能です。ユーザーはテキストを使用して必要な音楽を記述することができ、AI が音楽を生成します。広告を促進するために 60 秒以内のクリップ、および映画音楽
Win10 プレーヤーのプログレスバーが動かない
Feb 12, 2024 am 08:12 AM
Windows 10v1809 の 10 月更新バージョンは、ためらうことなく史上最悪の Windows アップグレードに向かっています。最初の正式リリース後に緊急に取り下げられただけでなく、1 か月間再構築された後も依然としてバグが満載であり、人々は Microsoft の品質を疑っていますますます心配になってきます。さて、リストにはもう 1 つのバグがあります。今回は Microsoft 独自のメディア プレーヤーである Windows Media Player です。最近、一部のネチズンは、最新のパッチをインストールした後、Windows 10v1809 の Windows Media Player で再生プログレス バーをドラッグできないという問題が発生したと報告しました。解決策はまだ見つかっていません。 Microsoft は KB4 の 2 つのパッチに関連するバグを確認しました
ローカル音楽をソーダミュージックに追加する方法
Feb 23, 2024 pm 07:13 PM
ローカル音楽を Soda Music に追加する方法? Soda Music APP にお気に入りのローカル音楽を追加できますが、ほとんどの友達はローカル音楽の追加方法を知りません。次は、Soda Music にローカル音楽を追加する方法に関するグラフィック チュートリアルです。編集者、興味のある方はぜひ見に来てください！ソーダ ミュージックの使用に関するチュートリアル. ソーダ ミュージックにローカル音楽を追加する方法. 1. まずソーダ ミュージック APP を開き、メイン ページの下部にある [音楽] 機能エリアをクリックします; 2. 次に、再生ページに入り、 をクリックします右下隅の [3 つの点] アイコン; 3. 最後に、下の機能バーを展開し、[ダウンロード] ボタンを選択してローカル音楽に追加します。
Douyin でお気に入りの音楽を表示するための詳細な手順
Mar 26, 2024 pm 06:20 PM
1. ［＋］をクリックします。 2. 上の[音楽を選択]をクリックします。 3. ［お気に入り］をクリックします。方法 2: 1. Douyin を開き、[Me] をクリックします。 2. アバターの横にある[収集]をクリックします。 3. [音楽]をクリックします
WeChat で音楽を再生する方法
Feb 23, 2024 pm 09:28 PM
WeChat で音楽を再生する方法? WeChat APP でお気に入りの音楽を再生できますが、ほとんどの友達は WeChat でお気に入りの音楽を再生する方法を知りません。次は、エディターが提供する WeChat で音楽を再生する方法に関するグラフィック チュートリアルです。興味のあるユーザーはぜひ見に来てください！ WeChat 使い方チュートリアル: WeChat で音楽を再生する方法 1. まず WeChat アプリを開き、上から下にスライドしてミニ プログラム ページに入ります; 2. 次に、下の図の矢印で示されている [音楽] をクリックします; 3. 次に、以下に示すインターフェイスで、検索ボックスに入力します お気に入りの曲のタイトルを入力します; 4. 最後に、対応する曲のタイトルを選択し、クリックして曲を再生します。
音楽学生に最適なタブレットの選択
Jan 10, 2024 pm 10:09 PM
ミュージシャンに適したタブレットはどれですか? Huawei 社の iPad に搭載されている 12.9 インチ スピーカーは非常に優れた製品です。スピーカーが4つ付いているので音質も抜群です。さらに、それは他のスタイルよりもわずかに優れたプロシリーズに属しています。全体的に見て、iPad Proは非常に良い製品です。このmini4携帯電話のスピーカーは小さく、効果は平均的です。外部で音楽を再生するために使用することはできませんが、音楽を楽しむにはヘッドフォンを使用する必要があります。音質の良いヘッドフォンであれば多少は効果はありますが、30元や40元の安いヘッドフォンでは要件を満たすことができません。電子ピアノ音楽を演奏するにはどのタブレットを使用すればよいですか? 10 インチを超える iPad を購入したい場合は、Henle と Piascore という 2 つのアプリケーションを使用することをお勧めします。ヘンレ提供
