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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 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 MSSQL 存储过程的方法
2008/12/24 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
CSS常用网站布局实例
2008/04/03 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
JS功能代码集锦
2016/05/04 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
用Python编写一个国际象棋AI程序
2014/11/28 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
保安队长职务说明书
2014/02/23 职场文书
网络编辑岗位职责
2014/03/18 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
模范教师事迹材料
2014/12/16 职场文书
单位同意报考证明
2015/06/17 职场文书
2019广播稿怎么写
2019/04/17 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
js基础语法与maven项目配置教程案例
2021/07/15 Javascript