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 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
javascript对象之内置对象Math使用方法
Apr 16 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
使用Cargo工具高效创建Rust项目
Aug 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 curl post 时出现的问题解决
2014/01/30 PHP
php实现登陆模块功能示例
2016/10/20 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
表达自我的市场:Society6
2018/08/01 全球购物
行政部总经理岗位职责
2014/01/04 职场文书
环保倡议书
2014/04/14 职场文书
食品采购员岗位职责
2014/04/14 职场文书
投标保密承诺书
2014/05/19 职场文书
员工趣味活动方案
2014/08/27 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
Oracle11g R2 安装教程完整版
2021/06/04 Oracle
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android