JavaScript实现点击按钮切换网页背景色的方法

更新时间：2015年10月17日 15:13:20 作者：秋雨

这篇文章主要介绍了JavaScript实现点击按钮切换网页背景色的方法,涉及JavaScript基于鼠标事件动态操作页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JavaScript实现点击按钮切换网页背景色的方法。分享给大家供大家参考，具体如下：

这里演示JavaScript用按钮随意变换背景颜色，每点击一下按钮，就可以随机改变一种网页背景颜色。颜色值事先是保存在JS的数组里，你在代码里会发现他们，若不想要某个颜色，就替换掉即可。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-btn-click-rand-bgcolor-codes/

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>通过按钮变换背景颜色</title>
</head>
<body>
<script language="javascript">
var Arraycolor=new Array("olive","teal","red","blue","maroon","navy","lime","fuschia","green","purple","gray","yellow","aqua","white","silver");
var n=0;
function turncolors(){
  if (n==(Arraycolor.length-1)) n=0;
  n++;
  document.bgColor = Arraycolor[n];
}
</script>
<form name="form1" method="post" action="">
 <p>
 <input type="button" name="Submit" value="变换背景" onclick="turncolors()">
</p>
 <p>用按钮变换背景颜色.</p>
</form>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

Javascript闭包实例详解
闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在，本文通过代码实例给大家介绍javascript闭包，对javascipt闭包相关知识感兴趣的朋友一起学习吧
2015-11-11
Webpack处理样式资源的配置详情
Webpack 本身是不能识别样式资源的,所以我们需要借助 Loader 来帮助 Webpack 解析样式资源,本文就来介绍一下Webpack处理样式资源的配置详情,感兴趣的可以了解一下
2023-12-12
JavaScript简单验证表单空值及邮箱格式的方法
这篇文章主要介绍了JavaScript简单验证表单空值及邮箱格式的方法,涉及javascript基本的表单与字符串操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2017-01-01
javascript垃圾收集机制的原理分析
javascript具有自动垃圾收集机制，执行环境会负责管理代码执行过程中使用的内存。在编写javascript程序时，开发人员不用再关心内存使用问题，所需内存的分配以及无用内存的回收完全实现了自动管理。本文将详细介绍javascript的垃圾收集机制
2016-12-12
Js实现无刷新删除内容
本文给大家分享的是一段仿腾讯微博的无刷新删除特效的代码，非常的实用，有需要的小伙伴可以参考下。
2015-04-04
基于百度地图实现产品销售的单位位置查看功能设计与实现
这篇文章主要介绍了基于百度地图实现产品销售的单位位置查看功能设计与实现的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-10-10
javascript实现十秒钟后注册按钮可点击的方法
这篇文章主要介绍了javascript实现十秒钟后注册按钮可点击的方法,涉及javascript时间及样式操作的相关技巧,需要的朋友可以参考下
2015-05-05
如何用原生js写一个弹窗消息提醒插件
这篇文章主要介绍了用原生js写一个弹窗消息提醒插件，下面小编来和大家一起学习一下
2019-05-05
JS判断时间段的实现代码
本文给大家分享一段实例代码介绍JS判断时间段的方法，需要的朋友参考下吧
2017-06-06
javascript eval()应用实例 select
javascript eval应用小例子。实例代码就是控制checkbox的选择与取消的函数，非常不错。
2009-07-07