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 相关文章推荐
Maps Javascript
Jan 22 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
详解ES6中的let命令
Apr 05 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 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
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
用 JSON 处理缓存
2007/04/27 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
vue实现扫码功能
2020/01/17 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
haskell实现多线程服务器实例代码
2013/11/26 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
德国团购网站:Groupon德国
2018/03/13 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
database面试题
2013/03/28 面试题
考试退步检讨书
2014/01/15 职场文书
聚美优品励志广告词
2014/03/14 职场文书
就业协议书样本
2014/08/20 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
Java异常体系非正常停止和分类
2022/06/14 Java/Android