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 相关文章推荐
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
js实现3D照片墙效果
Oct 28 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 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
一个目录遍历函数
2006/10/09 PHP
PHP4实际应用经验篇(2)
2006/10/09 PHP
在线增减.htpasswd内的用户
2006/10/09 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
php rsa加密解密使用详解
2015/01/14 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
Python类的继承用法示例
2019/01/31 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
python 中xpath爬虫实例详解
2019/08/26 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
通过实例解析Python return运行原理
2020/03/04 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
python实现控制台输出彩色字体
2020/04/05 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
办理生育手续介绍信
2014/01/14 职场文书
实习生个人总结范文
2015/02/28 职场文书
hive数据仓库新增字段方法
2022/06/25 数据库