Heim >Web-Frontend >js-Tutorial >JS HTML5 音乐天气播放器(Ajax获取天气信息)_javascript技巧

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

WBOY
WBOYOriginal
2016-05-16 17:33:251257Durchsuche

晚上要考软件工程,实在不想复习。写个播放器吧,这个只是个用来学习的小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技巧
Stellungnahme:
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