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 相关文章推荐
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
浅谈js中对象的使用
Aug 11 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 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 &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
php身份证号码检查类实例
2015/06/18 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
node中的密码安全(加密)
2018/09/17 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Python函数参数类型*、**的区别
2015/04/11 Python
python实现从字典中删除元素的方法
2015/05/04 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
什么是View State?
2013/01/27 面试题
安康杯竞赛活动总结
2014/05/05 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
陕西导游词
2015/02/04 职场文书
义诊活动总结
2015/02/04 职场文书