Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

JS HTML5 音乐天气播放器(Ajax获取天气信息)_javascript技巧

WBOY
Freigeben： 2016-05-16 17:33:25
Original
1245 Leute haben es durchsucht

晚上要考软件工程，实在不想复习。写个播放器吧，这个只是个用来学习的小Demo，众多不完善之处，下面贴出源代码，如果要转载，请加上版权声明

PS:因为Ajax涉及到跨域获取天气信息，有两个版本，一个是直接跨域，IE10支持，其他的浏览器要改配置。另一个是服务器端的weather.php，获取天气信息返回json。
weather.php就不写了，里面的对应路径存放对应的文件

演示地址:
http://569375.ichengyun.net/fm/

实现功能：
音乐播放，进度调节（滑动模块），音量条件，音乐随机选择，背景图片，图片预加载，音乐预加载，天气Ajax获取
音乐列表使用的json处理（也可以理解是hash表）

复制代码 代码如下:




音乐天气







喜欢一个人


不难


被同一个人喜欢
好难








0:00

0:00













文件目录结构：
images:存放botton.png
rain:存放背景
storage:存放mp3格式音乐
JS HTML5 音乐天气播放器(Ajax获取天气信息)_javascript技巧
JS HTML5 音乐天气播放器(Ajax获取天气信息)_javascript技巧
Verwandte Etiketten：
天气 播放器 音乐
Quelle：php.cn
Vorheriger Artikel：JS中的prototype与面向对象的实例讲解_javascript技巧 Nächster Artikel：JS定时关闭窗口的实例_javascript技巧
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Die Ausführungsreihenfolge der VueJS-Planungsfunktionen verursacht Probleme Ich versuche, eine Liste von Ankündigungen (von der API abgerufen) auf einer Seite anzuzei...
Aus 2024-04-06 10:37:58
0
1
385
Wie wähle ich Werte in einer MySQL-Abfrage aus, vergleiche sie mit ihnen und gebe sie zurück? Ich habe zwei Tische, den Transfertisch und den Vereinstisch. Dies ist die Tabelle Transfe...
Aus 2024-04-02 17:18:57
0
1
380
Alle 3 Elemente umschließen ein übergeordnetes Element Ich möchte nur alle 3 Divs mit einer Klasse für die Audiosuche ein Div mit der Slideshow-K...
Aus 2024-04-02 13:11:31
0
2
262
Wenn sich das Auswahlereignis ändert, löst die CSS-Animation den entsprechenden Effekt aus. Ich versuche, eine React-App zu erstellen. Im Moment habe ich ein Auswahleingabefeld mit e...
Aus 2024-04-01 09:16:28
0
1
350
Behebung des CORS-Fehlers beim Abspielen von MP3-Dateien von einer anderen Website Das Problem, das ich habe, ist, dass meine React-App keine Audiodaten von anderen Quellen ...
Aus 2024-03-31 22:04:39
0
1
286
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage