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 相关文章推荐
改变状态栏文字的js代码
Jun 13 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 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新手上路(十二)
2006/10/09 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
js post方式传递提交的实现代码
2010/05/31 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
超市食品安全承诺书
2015/04/29 职场文书
增值税发票丢失证明
2015/06/19 职场文书
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS