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


Posted in Javascript onOctober 17, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 Javascript
JavaScript实现的背景自动变色代码
Oct 17 #Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 #Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 #Javascript
基于jQuery实现的菜单切换效果
Oct 16 #Javascript
javascript判断复选框是否选中的方法
Oct 16 #Javascript
jquery判断复选框是否被选中的方法
Oct 16 #Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 #Javascript
You might like
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
Python魔法方法详解
2019/02/13 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
基于Python解密仿射密码
2019/10/21 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
市场营销求职信范文
2014/02/21 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis