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 相关文章推荐
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
Vue代码整洁之去重方法整理
Aug 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
php文件怎么打开 如何执行php文件
2011/12/21 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
php自定义hash函数实例
2015/05/05 PHP
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
phpquery中文手册
2021/03/18 PHP
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
解释i节点在文件系统中的作用
2013/11/26 面试题
资产经营总监岗位职责范文
2013/12/01 职场文书
大学活动邀请函
2014/01/28 职场文书
运动会通讯稿200字
2014/02/16 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
MySQL中order by的使用详情
2021/11/17 MySQL