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 重复加载错误以及修复方法
Dec 16 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
Vue Router history模式的配置方法及其原理
May 30 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 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的5个安全措施小结
2012/07/17 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python识别处理照片中的条形码
2020/11/16 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
电气技术员岗位职责
2013/11/19 职场文书
初一生物教学反思
2014/01/18 职场文书
开工仪式主持词
2014/03/20 职场文书
给校长的建议书300字
2014/05/16 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
教师个人年度总结
2015/02/11 职场文书
大连导游词
2015/02/12 职场文书
面试通知邮件
2015/04/20 职场文书
首次购房证明
2015/06/19 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
深入理解 Golang 的字符串
2022/05/04 Golang
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript