Long Bro博客——查看其它Long Bro影院
音乐网站开发:实现点击按钮切换背景图的功能

  作者:赵成龙  发布时间:2018-11-11 13:53:56  所属类别:学习笔记  浏览量:508



 

        最近这一星期在做一个简单小型的音乐播放器网站,目前各种功能基本都已经实现,包括切换上一曲下一曲,播放与暂停,随机播放单曲循环顺序播放模式切换,一首播放完毕自动按模式切换至下一曲,加载单句歌词及所有歌词等功能。另外就是本篇博客要介绍的功能了,点击按钮切换网页背景图。通过最近的学习,发现自己的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)
}


<span id="cback" title="总有一个你喜欢" onclick="changeBack()">切换背景</span>

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

<body id="body" background="http://www.zy52113.com/Minimusic/image/back/back16.jpg">

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

哎呀,图片丢失啦!

以上博客已同至本人CSDN,欢迎您的访问!





本文出自LongBro博客,如需转载请注明出处。
本文链接:http://www.longqcloud.cn/blogs/60.html
上一篇:JavaWeb视频网站开发:Ajax异步实现用户收藏视频的功能
下一篇:JavaWeb视频网站开发:实现小喇叭功能




如果你觉得这篇文章对你有用,欢迎 打赏(打赏记录)

打赏多少,你高兴就行,谢谢你对Long Bro这小子的支持  ^-^