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 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
详解JS函数重载
Dec 04 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
Vue基础配置讲解
Nov 29 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 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/05/15 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php时间戳转换的示例
2014/03/31 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
浅谈PHP封装CURL
2019/03/06 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
详解Python中的正则表达式
2018/07/08 Python
Django中的ajax请求
2018/10/19 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
python opencv摄像头的简单应用
2019/06/06 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
行政专员工作职责
2013/12/22 职场文书
应聘英语教师求职信
2014/04/24 职场文书
伊索寓言教学反思
2014/05/01 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
文艺演出主持词
2015/07/01 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android