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获得服务器端控件的ID的实现代码
Dec 28 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
nginx部署多个vue项目的方法示例
Sep 06 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
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
使用python实现省市三级菜单效果
2016/01/20 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
辩论赛主持词
2014/03/18 职场文书
学校募捐倡议书
2014/05/14 职场文书
任命书格式范文
2015/09/22 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python