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使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
jQuery DOM操作实例
Mar 05 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
JavaScript门道之标准库
May 26 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 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 email邮箱正则
2008/10/08 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
原生js生成图片验证码
2020/10/11 Javascript
Python中字典和JSON互转操作实例
2015/01/19 Python
浅谈MySQL中的触发器
2015/05/05 Python
python自定义类并使用的方法
2015/05/07 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
学生爱国演讲稿
2014/01/14 职场文书
年会主持词结束语
2014/03/27 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技