显示一个带颜色的闪烁以表示一个动作

最新推荐文章于 2024-07-23 07:30:00 发布

xiantouxu

最新推荐文章于 2024-07-23 07:30:00 发布

阅读量495

点赞数

分类专栏： javascript 文章标签：定时器

本文链接：https://blog.youkuaiyun.com/xiantouxu/article/details/77417045

版权

javascript 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种使用JavaScript和定时器实现元素淡入淡出效果的方法。通过修改背景颜色的透明度，使得页面元素能够平滑过渡。代码示例展示了如何通过递增颜色值来达到淡入的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：即为淡入淡出的效果实现
解决方案：用定时器

<!DOCTYPE html>
<html>
<head>
    <title>淡入淡出</title>
    <style>
    #yellowdiv,#reddiv{
        width: 100px;
        height: 100px;
    }

    </style>
</head>
<body>
<div id="yellowdiv"></div>
<div id="reddiv"></div>
<script type="text/javascript">
var fadingObject = {
    yellowColor:function(val){
        var r = "ff";
        var g = "ff";
        var b = val.toString(16);
        var newval = "#"+r+g+b;
        return newval;
    },
    fade:function(id,start,finish){
        console.log(this);
        this.count = this.start=start;
        this.finish = finish;
        this.id = id;
        this.countDown = function(){
            this.count +=30;
            if(this.count >=this.finish){
                document.getElementById(this.id).style.background="transparent";
                this.countDown = null;
                return;
            }
            document.getElementById(this.id).style.backgroundColor = this.yellowColor(this.count);
            setTimeout(this.countDown.bind(this), 100);
        }
    }
};
window.onload = function(){
    fadingObject.fade("yellowdiv",0,300);
    fadingObject.countDown();
}
</script>
</body>
</html>

注意bind的用法，保证this的正确性，相当于把fadingObject的实例传给了countDown（）方法
如果不用bind上面的代码可以改写为

<!DOCTYPE html>
<html>
<head>
    <title>淡入淡出</title>
    <style>
    #yellowdiv,#reddiv{
        width: 100px;
        height: 100px;
    }

    </style>
</head>
<body>
<div id="yellowdiv"></div>
<div id="reddiv"></div>
<script type="text/javascript">
var fadingObject = {
    yellowColor:function(val){
        var r = "ff";
        var g = "ff";
        var b = val.toString(16);
        var newval = "#"+r+g+b;
        return newval;
    },
    fade:function(id,start,finish){
        console.log(this);
        this.count = this.start=start;
        this.finish = finish;
        this.id = id;
        this.count = this.start = start;
        this.finish = finish;
        this.id = id;
        this.countDown = function(i){
            var that = this;
            setTimeout(function(i){
                that.count +=30;
                console.log(this.count);
                console.log(that.count);
                if(that.count>=that.finish){
                    document.getElementById(that.id).style.background = "transparent";
                    //that.count = 0;
                    that.countDown = null;
                    return;
                }
                console.log(that.id);
                document.getElementById(that.id).style.backgroundColor = that.yellowColor(that.count);
            },i*300);
        }
    }
};
window.onload = function(){
    fadingObject.fade("yellowdiv",0,300);
    for(var i =0;i<10;i++){
        fadingObject.countDown(i);
    }}
</script>
</body>
</html>