JS实现进入页面时渐变背景色的方法

 更新时间:2015年02月25日 11:24:03   作者:代码家园  
这篇文章主要介绍了JS实现进入页面时渐变背景色的方法,涉及javascript操作css控制背景色渐变的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JS实现进入页面时渐变背景色的方法。分享给大家供大家参考。具体实现方法如下:

<html>
<head>
<title>JS实现的进入页面时的渐变的背景色效果</title>
<SCRIPT Language="JavaScript">
<!-- 屏幕变色程序 -->
function CBgColor(){
var color = 0, step = 1
//color为初始颜色,step为初始步长
while( color <= 0xffffff){
//在颜色变白(color=0xffffff)之前,不断将颜色值增加
document.bgColor = color
color += step  
step <<= 8
//步长按位左移8位(乘以256)
if( step >= 0x1000000) step = 1
//如果步长过大则将其恢复到1
}
}
CBgColor()
//装入时调用背景变色程序
</Script>
</head>
<body onLoad="CBgColor()">
<p><b>渐变的背景颜色,感觉不错吧?</b></p>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

相关文章

  • javascript检测移动设备横竖屏

    javascript检测移动设备横竖屏

    移动端的开发过程中,免不了要判断横竖屏,然后在执行其他操作,比如分别加载不同样式,横屏显示某些内容,竖屏显示其他内容等等。
    2016-05-05
  • JS自定义混合Mixin函数示例

    JS自定义混合Mixin函数示例

    这篇文章主要介绍了JS自定义混合Mixin函数,涉及javascript面向对象程序设计中函数与属性操作相关技巧,需要的朋友可以参考下
    2016-11-11
  • Javascript 文件夹选择框的两种解决方案

    Javascript 文件夹选择框的两种解决方案

    javascript文件夹选择框的两种解决方案 怎么都有缺陷啊。不过更倾向于第一种
    2009-07-07
  • webpack是如何实现模块化加载的方法

    webpack是如何实现模块化加载的方法

    这篇文章主要介绍了webpack是如何实现模块化加载的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • webpack 4.0.0-beta.0版本新特性介绍

    webpack 4.0.0-beta.0版本新特性介绍

    本篇文章主要介绍了webpack 4.0.0-beta.0版本新特性介绍,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • JS正则表达式实现字符串中连续在一起的字符去重

    JS正则表达式实现字符串中连续在一起的字符去重

    这篇文章主要给大家介绍了关于JS正则表达式实现字符串中连续在一起的字符去重的相关资料,学会正则表达式对开发者而言是个非常有用的技能,很多功能可以简单的用一句正则来实现,需要的朋友可以参考下
    2023-11-11
  • javascript简写效果“神秘的眼睛”

    javascript简写效果“神秘的眼睛”

    “眼睛跟随鼠标转动效果”—— 265.com 把它放在网页的LOGO里,用javascript来实现,这个创意不错! 以前刚做FLASH的时候,用AS1实现过,今天下班早,在家简写了个:
    2008-02-02
  • bootstrap为水平排列的表单和内联表单设置可选的图标

    bootstrap为水平排列的表单和内联表单设置可选的图标

    为水平排列的表单和内联表单设置可选的图标。本文通过示例代码给大家讲解,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-02-02
  • js验证框架实现代码分享

    js验证框架实现代码分享

    这篇文章主要为大家分享了一个非常实用的js验证框架实现源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • webpack使用及如何搭建cesium三维地球环境

    webpack使用及如何搭建cesium三维地球环境

    这篇文章主要介绍了webpack快速上手之搭建cesium三维地球环境,本文使用的是webpack5,webpack5 升级后默认是不支持polyfill的,编译时会报错,本文主要介绍了Cesium以及Webpack的使用,如何将Cesium一步步地集成到Webpack中,需要的朋友可以参考下
    2023-11-11

最新评论