音乐网站开发：实现点击按钮切换页面背景图的功能

逃离我推掉我的手 2022-04-17 01:44 206阅读 0赞

最近这一星期在做一个简单小型的[音乐播放器网站][Link 1]，目前各种功能基本都已经实现，包括切换上一曲下一曲，播放与暂停，随机播放单曲循环顺序播放模式切换，一首播放完毕自动按模式切换至下一曲，加载单句歌词及所有歌词等功能。另外就是本篇博客要介绍的功能了，点击按钮切换网页背景图。通过最近的学习，发现自己的js确实提升了不少，以上功能除了异步加载歌词用到Java之外，其它全是由js来实现的，这与之前做这个博客网站完全不一样，博客网站几乎没有用到几行js因为当时对js基本是一无所知。我也发现了js确实跟Java有很多相似的地方，不过它们两个最大的却别还是一个是前端的，一个是后端的。下面就进入本篇博客的整体吧。

实现该功能的js代码其实很简单，只需定义一个函数，然后在该按钮里加上该函数的监听事件

/**
     * 改变背景
     */
    function changeBack(){
    	var i=Math.round(Math.random()*28);//随机生成一个整数
    	var body=document.getElementById("body");
    	//alert(i);
    	body.background="image/back/back"+i+".jpg";//16.22.21.(19.20.18G)
    }

最后，要在body标签中添加以下内容

接下来，点击切换背景按钮，就会调用changeBack()函数，该函数会根据body的id将body标签里的background属性改为随机的图片。以下是效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 1][]

以上博客已同至[本人个人博客网站][Link 2]，欢迎您的访问！

[Link 1]: http://www.zy52113.com/Minimusic
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70]: /images/20220417/1119fe324c484cb6a88cc304b3f3f04b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 1]: /images/20220417/27ee29576b9140b9830c757734852028.png
[Link 2]: http://www.longqcloud.cn/