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实现的支持lrc歌词的播放器
May 17 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
canvas实现图像截取功能
Feb 06 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 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
我的论坛源代码(九)
2006/10/09 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
python实现ip地址的包含关系判断
2020/02/07 Python
python 画图 图例自由定义方式
2020/04/17 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
员工入职担保书范文
2014/04/01 职场文书
工作说明书格式
2014/07/29 职场文书
赤壁观后感(2)
2015/06/15 职场文书
Python爬取某拍短视频
2021/06/11 Python
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python