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捕获超链接事件进行局部刷新代码
May 10 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
Vue表单实例代码
Sep 05 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
ES6中的Javascript解构的实现
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 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
js三种排序算法分享
2012/08/16 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
Python3获取cookie常用三种方案
2020/10/05 Python
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
香港礼品网站:GiftU eshop
2017/09/01 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
linux面试相关问题
2012/08/11 面试题
住院医师规范化培训实施方案
2014/06/12 职场文书
个人存款证明书
2014/10/18 职场文书
模范教师材料大全
2014/12/16 职场文书
优秀班集体申报材料
2014/12/25 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js