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 面向对象的JavaScript类
May 04 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
javascript定时器完整实例
Feb 10 Javascript
Angular工具方法学习
Dec 26 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 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
php+mysql写的简单留言本实例代码
2008/07/25 PHP
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
javascript 跳转代码集合
2009/12/03 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
pyside写ui界面入门示例
2014/01/22 Python
python中sets模块的用法实例
2014/09/30 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
python安装requests库的实例代码
2019/06/25 Python
python自动生成sql语句的脚本
2021/02/24 Python
幼儿教师培训感言
2014/03/08 职场文书
服务承诺口号
2014/05/22 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
消防隐患整改通知书
2015/04/22 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
2015年教师节感言
2015/08/03 职场文书
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers