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脚本的性能的几个注意事项
Dec 22 Javascript
javascript call和apply方法
Nov 24 Javascript
javascript RadioButtonList获取选中值
Apr 09 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
js实现电灯开关效果
Jan 19 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 JSON格式数据交互实例代码详解
2011/01/13 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
php实现等比例压缩图片
2018/07/26 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
js验证上传图片的方法
2015/05/12 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
js返回顶部实例分享
2016/12/21 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
解析Python中while true的使用
2015/10/13 Python
Python实现二叉搜索树
2016/02/03 Python
Python常用特殊方法实例总结
2019/03/22 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
生产厂长岗位职责
2014/02/21 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
三年级学生评语大全
2014/12/26 职场文书
电影地道战观后感
2015/06/04 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
html实现弹窗的实例
2021/06/09 HTML / CSS