颜色渐变的不断增大的正方形

最新推荐文章于 2022-10-17 10:51:37 发布

靖颀

最新推荐文章于 2022-10-17 10:51:37 发布

阅读量237

点赞数

本文链接：https://blog.csdn.net/qq_40961420/article/details/107990060

版权

 var div = document.querySelector("div");
Object.defineProperties(div,{
                _width:{
                    writable:true,
                    value:0,
                },
                _height:{
                    writable:true,
                    value:0,
                },
                _bgColor:{
                    writable:true,
                    value:0,
                },
                width:{
                    enumerable:true,
                    set:function(_value){
                        this.style.width = _value.toString().indexOf("px")>-1 ? _value : _value + "px";
                        this._width = _value;
                    },
                    get:function(){
                        return this._width;
                    },
                },
                height:{
                    enumerable:true,
                    set:function(_value){
                        this.style.height = _value.toString().indexOf("px")>-1 ? _value : _value+"px";
                        this._height = _value;
                    },
                    get:function(){
                        return this._height;
                    },
                },
                bgColor:{
                    enumerable:true,
                    set:function(_value){
                        this.style.backgroundColor = typeof _value === "String" ? _value :"#"+_value.toString(16).padStart(6,"0");
                        this._bgColor = _value;
                    },
                    get:function(){
                        return this._bgColor;
                    },
                },
            });

            setInterval(function(){
                div.width++;
                div.height++;
                div.bgColor++;
            },100)