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 相关文章推荐
url 特殊字符 传递参数解决方法
Jan 01 Javascript
小议Javascript中的this指针
Mar 18 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
JS中substring与substr的用法
Nov 16 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
webpack的移动端适配方案小结
Jul 25 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
PHPMailer 中文使用说明小结
2010/01/22 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
Python random模块常用方法
2014/11/03 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
Python生成器generator原理及用法解析
2020/07/20 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
大学生的四年学习自我评价
2013/12/13 职场文书
户外拓展活动方案
2014/02/11 职场文书
幼儿园安全责任书
2014/04/14 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
七一活动主持词
2015/06/29 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js