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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
使用JavaScript破解web
Sep 28 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 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
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
JS实现li标签的删除
2019/04/12 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
跟老齐学Python之集合(set)
2014/09/24 Python
Python Property属性的2种用法
2015/06/21 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
浅谈Python中的继承
2020/06/19 Python
python怎么自定义捕获错误
2020/06/29 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
python爬取youtube视频的示例代码
2021/03/03 Python
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
音乐系毕业生自荐信
2013/10/27 职场文书
师范大学应届生求职信
2013/11/21 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
学习之星事迹材料
2014/05/17 职场文书
入党推优材料
2014/06/02 职场文书
体现团队精神的口号
2014/06/06 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
预备党员半年考察意见
2015/06/01 职场文书