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

本文讲述了如何在音乐播放器网站中利用JavaScript实现点击按钮切换网页背景图的功能。作者分享了实现这一功能的JS代码,并指出大部分网站功能都是通过JS实现,对比了JS与Java的区别。通过绑定函数监听事件,点击按钮即可更改body的背景属性,展示了一种简单的前端设计技巧。
摘要由CSDN通过智能技术生成

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

最后&

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值