JavaScript实现的背景自动变色代码
本文实例讲述了JavaScript实现的背景自动变色代码。分享给大家供大家参考,具体如下:
这里演示JavaScript实现网页背景自动变色,自己变换颜色,设定时间和颜色值即可,在你设定的颜色值、一定时间内自动切换网页背景颜色。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-auto-cha-bg-color-demo/
具体代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>背景自动变色</title> </head> <body> 背景自动变色 <script language="javascript"> var Arraycolor=new Array("#00FF66","#FFFF99","#99CCFF","#FFCCFF","#FFCC99","#00FFFF","#FFFF00","#FFCC00","#FF00FF"); var n=0; function turncolors(){ n++; if (n==(Arraycolor.length-1)) n=0; document.bgColor = Arraycolor[n]; setTimeout("turncolors()",1000); } turncolors(); </script> </body> </html>
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
神奇!js+CSS+DIV实现文字颜色渐变效果
本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下 下面是 CSS 部分代码: <!--CSS代码开始--> body{ font:12px/1.5 Microsoft Yahei; } h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 Microsoft Yahei; text-align:center; } .box{ position:relati
-
JavaScript+html5 canvas绘制渐变区域完整实例
本文实例讲述了JavaScript+html5 canvas绘制渐变区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { border:3px solid gray; } </style> </head&
-
js+CSS实现弹出居中背景半透明div层的方法
本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999
-
JS实现带圆弧背景渐变效果的导航菜单代码
本文实例讲述了JS实现带圆弧背景渐变效果的导航菜单代码.分享给大家供大家参考.具体如下: 这是一款效果个性的JS+CSS导航菜单,鼠标经过时出现有趣弧形背景,实际上,这里用CSS调用了背景,用JavaScript控制了背景的移动,用jQuery实现过类似的功能,整体感觉很不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-cicle-cha-nav-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC
-
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
本文实例讲述了JavaScript实现弹出DIV层同时页面背景渐变成半透明效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&
-
JavaScript实现点击单元格改变背景色的方法
本文实例讲述了JavaScript实现点击单元格改变背景色的方法.分享给大家供大家参考,具体如下: <html> <body> <table onclick="SetColor(event)" id="_t" width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <t
-
javascript设置页面背景色及背景图片的方法
本文实例讲述了javascript设置页面背景色及背景图片的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus
-
JS实现进入页面时渐变背景色的方法
本文实例讲述了JS实现进入页面时渐变背景色的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>JS实现的进入页面时的渐变的背景色效果</title> <SCRIPT Language="JavaScript"> <!-- 屏幕变色程序 --> function CBgColor(){ var color = 0, step = 1 //color为初始颜色,step为初始步长
-
js点击列表文字对应该行显示背景颜色的实现代码
本文实例讲述了js点击列表文字,实现该行文字显示背景颜色的方法.分享给大家供大家参考.具体如下: JS控制li,鼠标点击时class自动加上,给列表文字产生自己喜欢的背景色的网页特效. 运行效果图如下: <style type="text/css"> li{cursor:pointer;} .cur{background:red;} </style> <script type="text/javascript"> windo
-
js点击弹出div层实现可拖曳的弹窗效果
弹出层.弹窗效果+拖曳功能 *{ margin:0px; padding:0px;} body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;} .botton{ color:#F00; cursor:pointer;} .mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; pad
-
JS弹出可拖拽可关闭的div层完整实例
本文实例讲述了JS弹出可拖拽可关闭的div层完整实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh
-
js获取及修改网页背景色和字体色的方法
本文实例讲述了js获取及修改网页背景色和字体色的方法.分享给大家供大家参考,具体如下: 获得网页的背景色和字体颜色,方法如下: 思想: 通过取得颜色属性值得到的是 rgb 色,不是我们想要的,所以需要将 rgb 色装换为 十六进制色 ,首先获得rgb色 : 代码如下: 复制代码 代码如下: var rgb = document.getElementById('color').style.backgroundColor; 得到格式如下: rgb(225, 22, 23); 然后进行拆分: 代码如下
-
javascript实现网页背景烟花效果的方法
本文实例讲述了javascript实现网页背景烟花效果的方法.分享给大家供大家参考.具体如下: 这里的网页背景烟花爆炸特效,不用说是用Js实现的,配合黑色背景效果最好,五颜六色的烟花效果,四散的烟花效果,以前发过一些网页上的烟花特效,本款类似,但代码更简洁. 运行效果如下图所示: 具体代码如下: <html> <head> <title>背景的烟花效果</title> <style type="text/css"> <!
-
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法.分享给大家供大家参考.具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
随机推荐
- go语言检测文件是否存在的方法
- SQL Server简单模式下误删除堆表记录恢复方法(绕过页眉校验)
- Emeditor与dos(cmd)经典使用技巧之批量生成网页
- asp.NET中实现文件的压缩和解压(3种方式)
- 在Django框架中伪造捕捉到的URLconf值的方法
- 一个开发人员眼中的JSP技术(下)
- 详解JavaScript中数组和字符串的lastIndexOf()方法使用
- 解析在MYSQL语法中使用trim函数删除两侧字符
- javascript简易缓动插件(源码打包)
- Asp.net 弹出对话框基类(输出alet警告框)
- STL区间成员函数及区间算法总结
- JavaScript 数组的 uniq 方法
- jQuery 连续列表实现代码
- js实现一个简单的数字时钟效果
- 为Javascript中的String对象添加去除左右空格的方法(示例代码)
- Ubuntu+Nginx+Mysql+Php+Zend+eaccelerator安装配置文字版
- C#获取进程和对进程的操作
- 完美解决安卓jni项目会删除其他so文件的问题
- Java NIO框架Netty简单使用的示例
- IntelliJ Idea 2017注册码免费激活方法