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 相关文章推荐
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
学习Node.js模块机制
Oct 17 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
浅谈javascript如何获取文件后缀名
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中文本数据翻页(留言本翻页)
2006/10/09 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python路径的写法及目录的获取方式
2019/12/26 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
2014学雷锋活动总结
2014/03/09 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
导游词之昭君岛
2020/01/17 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android