js点击更换背景颜色或图片的实例代码


Posted in Javascript onJune 25, 2013

1,按钮样式

<script>
org_Color=document.bgColor.substring(1.10)
</script>
<form>
<input type="button" value="淡黄色背景"onClick="document.bgColor='#feffc6'">
<input type="button" value="浅蓝色背景"onClick="document.bgColor='#c6fffe'">
<input type="button" value="粉红色背景"onClick="document.bgColor='#ffc9c6'">
<input type="button" value="墨绿色背景"onClick="document.bgColor='#508b7d'">
<input type="button" value="天蓝色背景"onClick="document.bgColor='#7BC7FF'">
<input type="button" value="米白色背景"onClick="document.bgColor='#f0f0f0'">
</form>

2,下拉样式
<selectonChange="document.bgColor=this.options[this.selectedIndex].value">
<option value="#C0C0C0">灰色的
<option value="BLACK">黑的色
<option value="d2c6ff">淡紫蓝
<option value="feefc7">太阳黄
<option value="ffd2c6">淡红橘
<option value="c7fed8">苹果绿
<option value="80ff80">草原绿
<option value="#C1BC59">橄榄色
<option value="#7BC7FF">天空蓝
<option value="#AEDFD3">蓝绿色
<option value="#508B7D">墨绿色
<option value="#F0F0F0">米白色
</select>

3,触碰样式
<scriptlanguage="Javascript">
<!--
function backcolor(form){
temp = ""
for (var i = 0; i < 16; i++) {
temp = form.color[i].value
if (form.color[i].checked){ document.bgColor = temp }
}
}
function randombackground(){
document.bgColor = getColor()
}
function getColor(){
currentdate = new Date()
backgroundcolor = currentdate.getSeconds()
if (backgroundcolor > 44)
backgroundcolor = backgroundcolor - 45
else if (backgroundcolor > 29)
backgroundcolor = backgroundcolor - 30
else if (backgroundcolor > 15)
backgroundcolor = backgroundcolor - 16
if (backgroundcolor == 0 )
return "olive";
else if (backgroundcolor == 1 )
return "teal";
else if (backgroundcolor == 2 )
return "red";
else if (backgroundcolor == 3 )
return "blue";
else if (backgroundcolor == 4 )
return "maroon";
else if (backgroundcolor == 5 )
return "navy";
else if (backgroundcolor == 6 )
return "lime";
else if (backgroundcolor == 7 )
return "fuschia";
else if (backgroundcolor == 8 )
return "green";
else if (backgroundcolor == 9 )
return "purple";
else if (backgroundcolor == 10 )
return "gray";
else if (backgroundcolor == 11 )
return "yellow";
else if (backgroundcolor == 12 )
return "aqua";
else if (backgroundcolor == 13 )
return "black";
else if (backgroundcolor == 14 )
return "white";
else if (backgroundcolor == 15 )
return "silver";
}
// -->
</script>
<body onload="document.bgColor='lime'; returntrue;">
<a href="javascript:void(0);"onmouseover="randombackground()"><fontsize="5" face="宋体">碰我改变背景颜色</font></a>

点击更换背景图片:

<div style="float:right;margin-right:20px;">
<ahref="javascript:void(0);"><imgclass="button1"onClick="javascript:document.body.style.background='url(images/bg/1.jpg)'"></a>
<ahref="javascript:void(0);"><imgclass="button2"onClick="javascript:document.body.style.background='url(images/bg/2.jpg)'"></a>
<ahref="javascript:void(0);"><imgclass="button3"onClick="javascript:document.body.style.background='url(images/bg/3.jpg)'"></a>
<ahref="javascript:void(0);"><imgclass="button4"onClick="javascript:document.body.style.background='url(images/bg/4.jpg)'"></a>
<ahref="javascript:void(0);"><imgclass="button5"onClick="javascript:document.body.style.background='url(images/bg/5.jpg)'"></a>
<ahref="javascript:void(0);"><imgclass="button6"onClick="javascript:document.body.style.background='url(images/bg/6.jpg)'"></a>
</div>

IE6不能用的解决方法:

<imgonClick="javascript:document.body.style.background='url(images/bg/1.jpg)';returnfalse;">
Javascript 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
Javascript中神奇的this
Jan 20 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
vue实现简单学生信息管理
May 30 Javascript
js操作iframe的一些方法介绍
Jun 25 #Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 #Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 #Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 #Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 #Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 #Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 #Javascript
You might like
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
Angularjs实现上传图片预览功能
2017/09/01 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
介绍Python的Django框架中的QuerySets
2015/04/20 Python
Python实现计算最小编辑距离
2016/03/17 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Python高斯消除矩阵
2019/01/02 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
Python的形参和实参使用方式
2019/12/24 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
详解python算法常用技巧与内置库
2020/10/17 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
爱情保证书范文
2014/02/01 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
工会文体活动总结
2015/05/07 职场文书
看上去很美观后感
2015/06/10 职场文书
重阳节活动主持词
2015/07/04 职场文书