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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
详解vue路由
Aug 05 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
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
解析PHP汉字转换拼音的类
2013/06/18 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
Ajax基础知识详解
2017/02/17 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
python中的列表推导浅析
2014/04/26 Python
python实现红包裂变算法
2016/02/16 Python
python 生成器协程运算实例
2017/09/04 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
python多进程并行代码实例
2019/09/30 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
python爬虫添加请求头代码实例
2019/12/28 Python
解决python 找不到module的问题
2020/02/12 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
django中ImageField的使用详解
2020/12/21 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
如何强制垃圾回收
2015/10/06 面试题
担保书怎么写
2014/04/01 职场文书
先进党支部申报材料
2014/12/24 职场文书
旷课检讨书
2015/01/26 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python