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 tools 系列 scrollable(2)
Sep 06 Javascript
jQuery 获取对象 基本选择与层级
May 31 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
javascript实现获取字符串hash值
May 10 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 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
建立动态的WML站点(一)
2006/10/09 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
PHP数组实例总结与说明
2011/08/23 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
开启PHP的伪静态模式
2015/12/31 PHP
JS 事件绑定函数代码
2010/04/28 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
vue组件生命周期详解
2017/11/07 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
Tesserocr库的正确安装方式
2018/10/19 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
科室工作个人总结的自我评价
2013/10/29 职场文书
心理学专业毕业生推荐信范文
2013/11/21 职场文书
社区包粽子活动方案
2014/01/21 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
销售内勤岗位职责
2015/02/10 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
实习证明模板
2015/06/16 职场文书
身份证丢失证明
2015/06/19 职场文书