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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
微信小程序实现留言功能
Oct 31 Javascript
js实现双人五子棋小游戏
May 28 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 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 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
javascript 写类方式之九
2009/07/05 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
python实现kNN算法
2017/12/20 Python
python 重命名轴索引的方法
2018/11/10 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
编程输出如下图形
2013/11/24 面试题
医学护理毕业生自荐信
2013/11/07 职场文书
自我鉴定怎么写
2013/12/05 职场文书
投标邀请书范文
2014/01/31 职场文书
维稳工作承诺书
2015/01/20 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
首次购房证明
2015/06/19 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
JS class语法糖的深入剖析
2022/07/07 Javascript