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 相关文章推荐
简明json介绍
Sep 28 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
单元选择合并变色示例代码
May 26 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
vue开发拖拽进度条滑动组件
Sep 21 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 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/09/05 PHP
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
php生成rss类用法实例
2015/04/14 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
JavaScript入门基础
2015/08/12 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python中删除某个元素的方法解析
2019/11/05 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
导游的职业规划书范文
2013/12/27 职场文书
表扬信格式
2014/01/12 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
delete in子查询不走索引问题分析
2022/07/07 MySQL