手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

JavaScript如何更换网页背景色

时间:2024-10-15 17:19:57

1、首先我们在Dreamweaver中创建一个html5网页文件,这里我们把JavaScript内容写入了htm造婷用痃l文件,实际上我们如果代码量多的话,也可以写在JavaScript文件中的,这个大家自己决定了。创建过程是一样的。

JavaScript如何更换网页背景色

2、我们先使用嵌入网页的方式,在html5文件中定义背景需要改变的颜色。如下图。颜色可以使用颜色名,简单的话就用颜色名即可,一般如果是开发过程中,美工会指定好的了。这时候就会使用颜色值了。

JavaScript如何更换网页背景色

3、然后我们定义一个背景颜色改变的函数,如下图,先定义一个颜色数组,然后根据索引变量去改变颜色名。

JavaScript如何更换网页背景色

4、最后,完整的代码如下图所示,我们在下面添加一个按钮,来作为换肤的激活入口。

JavaScript如何更换网页背景色
JavaScript如何更换网页背景色

5、当我们点击按钮的时候,网页背景色就改变了。如果我们再更进一步,就可以更换图片,效果会更好的。

JavaScript如何更换网页背景色
JavaScript如何更换网页背景色

6、如果我们把JavaScript代码放到一个单独的文件中,可以如下图所示,先创建一个独立的JavaScript文件,把对应的js代码加入即可,然后在html5文件中引入即可。效果是一样的。

JavaScript如何更换网页背景色
JavaScript如何更换网页背景色
© 手抄报圈