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 相关文章推荐
Javascript的并行运算实现代码
Nov 19 Javascript
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 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
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
python类继承用法实例分析
2014/10/10 Python
Python图算法实例分析
2016/08/13 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
python如何获取apk的packagename和activity
2020/01/10 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
优秀共产党员先进事迹
2014/01/27 职场文书
生产部管理制度
2014/01/31 职场文书
财政专业求职信范文
2014/02/19 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
争做文明公民倡议书
2014/08/29 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
丧事答谢词
2015/01/05 职场文书
企业员工辞职信范文
2015/05/12 职场文书
Nginx 匹配方式
2022/05/15 Servers
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers