教你用面向对象方法写一个烟花爆炸的特效

最新推荐文章于 2021-05-22 10:49:18 发布
最新推荐文章于 2021-05-22 10:49:18 发布
阅读量642 收藏 8
点赞数 2
文章标签： javascript css html css3 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45604710/article/details/105027761
版权

由于是面向对象，所以步骤非常重要
**

一.OOA：

**
1. 创建元素;
2. 元素运动;
3. 烟花爆炸;
4. 随机位置;
5. 随机颜色;

二.OOD：

function FireWork( x , y ) {
			this.init( x , y );
		}
		FireWork.prototype = {
			constructor : FireWork , 
			init : function( x , y ){

			},
			// 1. 创建元素;
			createFireWorkEle : function (){

			},
			// 2. 元素运动;
			fireWorkUp : function(){

			},
			// 3. 烟花爆炸;
			fireWorkBlast : function(){

			},
			// 4. 随机位置;
			randomBoundary : function(){

			}
			// 5. 随机颜色;
			randomColor : function(){

			}
		}

**

三.OOP

**
首先是布局：

<div class="box"></div>

然后是CSS样式：

<style>
		.box{
			width: 80%;
			height: 600px;
			border: 2px solid red;
			background: #000;
			margin:20px auto;
			cursor: pointer;
			position: relative;
			left: 0;
			top: 0;
			overflow: hidden;
		}
		.fire{
			width: 10px;
			height:10px;
			position: absolute;
			bottom: 0;
		}
	</style>

首先要初始化函数：

 init : function( x , y ){
                //因为元素要运动，所以要初始化x，y坐标
                //把初始化出来的x，y坐标指向this
                //这里的this指向FireWork实例对象
                this.x = x;
                this.y = y;
                console.log(this,this.x,this.y,x,y);

                //因为要有火花，所以要创建元素
                //又因为有了创建函数，所以调用函数FireWorkCJ()
                this.ele = this.FireWorkCJ();
                console.log(this.ele);

				// 为了节省randomBoundary消耗的无用性能,统一获取一次left和top的最大值;
				// 注意程序的执行顺序, 元素的offset属性获取，必须要放在元素插入到页面之后才行;
				this.left_max = this.main.offsetWidth - this.ele.offsetWidth;
                this.top_max  = this.main.offsetHeight - this.ele.offsetHeight;
                
                //给元素添加背景颜色
                this.FireWorkYS( this.ele );

                // 烟花主体升起;
				this.FireWorkYD( this.ele );

            },

创建元素

			//1.创建元素
            // 什么时候要使用var 什么时候要使用 this.xxx ;
			// 如果这个数据在其他的方法里还要用，那么就放在this之中;
			// 如果感觉这个变量在当前函数使用结束就不用了，那么就用var;
            FireWorkCJ : function(){
                //首先要创建一个火花的盒子
                var ele = document.createElement("div");
                //让他拥有className，成为拥有该样式的盒子
                ele.className = "fire";
                //将这个火花盒子放到父级
                //由于传入了父级参数 selector ，将创建出来的 ele 放到父级
                this.main.appendchild( ele );
                //返回ele
                return ele;
            }

,
其次是元素运动

//2.元素运动
            FireWorkYD : function( ele ){
                //创建元素的左右位置
                //left ： 直接到达
                //top  ： 运动到达目的地
                //创建的元素 ele 的left为 this.x 的位置像素
                ele.style.left = this.x + "px";
                //调用运动函数
                animate( ele ,{
                    top : this.y
                },function(){
				    // 烟花运动结束要删除掉这个元素;
                    ele.remove();
					// 直接调用烟花爆炸功能;
                    this.FireWorkBZ();
                }.bind(this))

            },

强大的爆炸功能

//3.烟花爆炸
            FireWorkBZ : function(){
                //烟花爆炸，随机生成多个(20)个火花
                for( var i = 0 ; i < 20 ; i++){
                    //创建火花
                    var ele = this.FireWorkCJ();
                    this.FireWorkYS( ele );
                    //初始化火花的样式
                    ele.style.left = this.x + "px";
                    ele.style.top = this.y + "px";
                    ele.style.borderRadius = "50%";
                    //让元素有运动目标;
                    animate( ele , this.BZ_type = "circular" ? this.BZ_YUAN( i , 20 ) : this.FireWorkWZ() , function( callback_ele ){
                        // 什么时候会执行这个回调函数; 一定的时间之后; for循环早就执行完了;
						// 在这个作用域之中ele只有一个,当你执行回调函数的时候，ele已经被赋值20次了，ele里面的数据之后最后一个。
						// bind 的高级用法;
                        callback_ele.remove();
                    }.bind(this , ele)) 
                    // 因为执行了20次，会创造20个不同的函数;
					// 现在给每个匿名函数都去绑定一个ele元素;
					// function( ele ){ ele => ele1 }.bind(this,ele1)
					// function( ele ){ ele => ele2 }.bind(this,ele2)
					// function( ele ){ ele => ele3 }.bind(this,ele3)
					// ... 

                }
            },

爆炸后元素的随机位置

//4.随机位置6
            FireWorkWZ : function(){
                return {
                    left : parseInt( Math.random() * ( this.left_max + 1) ),
                    top  : parseInt( Math.random() * ( this.top_max + 1) )
                }
            },

生成的随机颜色的烟花

//5.随机颜色
    //给已经创建出来的ele火花盒子添加随机颜色样式
    FireWorkYS : function( ele ){
        return ele.style.backgroundColor = "#" + parseInt( parseInt( "ffffff" , 16) * Math.random() ).toString(16).padStart( 6 , 0 );
    },

爆炸后呈圆形绽放

 //6.扩展：爆炸后呈圆形绽放
        //now_index : 代表这是创建的第几个圆
        //total : 代表 一共要创建多少个
        BZ_YUAN : function( now_index , total ){
			var r   = 100;
            // 计算角度;
            //reg : 代表第i个对应的角度
			var reg = (360 / total ) * now_index;
            // JS里面没有角度只有弧度; 换算弧度;
            //deg : 转化成弧度
			var deg = Math.PI / 180 * reg;
			return {
				left : parseInt(r * Math.cos( deg )) + this.x,
				top  : parseInt(r * Math.sin( deg )) + this.y,
			} 
		}

调用函数

document.querySelector(".box").addEventListener("click",function( evt ){
            var e = evt || event;
            new FireWork(e.offsetX , e.offsetY , ".box" , "circular")
        })

内置js函数

<script src="animate.js"></script>

代码展示
//创建一个可以传入更多数据的函数方法-------回调函数
//作用 ：任意元素任意属性运动
//参数解析：
//          ele          ： 元素
//          attr_options :  调用的对象结构
//          callback     ： 函数方法
function animate( ele , attr_options , callback){
    //获取元素当前的属性
    //遍历attr_option结构数组
    for( var attr in attr_options ){

        // 我们需要记录的数据有 : 属性名 : 目标点， 当前元素的属性;
        // { "width" : {
        //         target : 200 ,
        //         iNow   : 元素的属性值;
        //     } 
        // }
        // attr : width : height |.......;

        //属性名：attr_options[ attr ]
        //传入的属性值：attr
        //目标  ：target
        //当前元素的属性：iNow
        attr_options[ attr ] = {
            // 目标点 : 传入的数据;
            //目标点取值
            //当  目标点target  取出的  attr  的值  为opacity  时，  target = attr_options[ attr ] * 100
            //当  目标点target  取出的  attr  的值  不为opacity  时，target = attr_options[ attr ] 
            target : attr === "opacity" ? attr_options[ attr ] * 100 : attr_options[ attr ],
            //元素当前的属性值 ;
            //元素属性值取值
            //当  元素属性值iNow  取出的  attr  的值   为opacity  时，  iNow = parseInt( getComputedStyle(ele)[attr] * 100 )
            //当  元素属性值iNow  取出的  attr  的值  不为opacity  时， iNow = parseInt( getComputedStyle(ele)[attr] )
            //getComputedStyle(ele)[attr] * 100-------->提取ele元素中  的该元素   ele.attr*100    的结果
            iNow : attr  ===  "opacity" ? parseInt( getComputedStyle(ele)[attr] * 100 ) : parseInt( getComputedStyle(ele)[attr] )
        }
    }

    //把所有的定时器都放进ele对象之中;
    //关闭计时器
    clearInterval(ele.timer);
    ele.timer = setInterval(function(){
        //遍历attr_option结构数组
        //获取速度
        for( var attr in attr_options ){
            //创建一个参数存放属性名attr_option[attr]结构
            var item = attr_options[ attr ];
            //创建一个参数存放目标点
            var target = item.target;
            //创建一个参数存放元素当前的属性值
            var iNow = item.iNow;
            //运动所必须的值我们都有了;
            //运动速度的求取 = 目标点 - 元素当前的属性值
			//根据目标点求得运动的速度;
            var speed = ( target - iNow ) / 10;
            //速度取整
            //速度取整; 要查看速度是正数还是负数;
            //如果大于0，Math.ceil( speed )--------向上取整
            //如果小于0，Math.floor( speed )--------向下取整       
            speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed )

            //终止条件
            //通过终止条件，中止计时器
            //根据 target 和当前的元素位置判定速度为正数还是负数
            if( Math.abs(target - iNow) <= Math.abs( speed )){
                // 终止条件不可靠,因为目标的不一致会让运动次数执行不同，有可能提前关闭定时器;
                ele.style[attr] = attr === "opacity" ? target / 100 :  target + "px";
                // 一条运动完成删除对象里面的数据;
                delete attr_options[ attr ];
                // 如果对象里面没有属性了，那么我们关闭定时器就可以了;
                //遍历attr_options结构数组
                for( var num in attr_options){
                    // 如果attr_options里面有属性,那么此时我就不应该终止定时器;
                    return false;
                }
                //关闭计时器
                clearInterval( ele.timer );
                //判断callback类型
                //如果callback的类型为函数，则执行callback
                //如果callback的类型不为函数，则执行“”(为空)
                typeof callback === "function" ? callback() : "";
            }else{
                //元素运动
                //因为 iNow 是一个临时变量,所以不能再去操作iNow , 要去操作iNow 的数据源;
                attr_options[ attr ].iNow += speed;
                ele.style[attr] = attr === "opacity" ? attr_options[attr].iNow / 100 : attr_options[attr].iNow + "px";
            }
        }
    },30)
}

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
		.box{
			width: 80%;
			height: 600px;
			border: 2px solid red;
			background: #000;
			margin:20px auto;
			cursor: pointer;
			position: relative;
			left: 0;
			top: 0;
			overflow: hidden;
		}
		.fire{
			width: 10px;
			height:10px;
			position: absolute;
			bottom: 0;
		}
	</style>
</head>
<body>
    <div class="box"></div>
    <script src="animate.js"></script>
    <script>
        // OOA 
		// 1. 创建元素;
		// 2. 元素运动;
		// 3. 烟花爆炸;
		// 4. 随机位置;
        // 5. 随机颜色;
        
        //OOD
        function FireWork( x , y , selector , BZ_type){
            //因为要有一个装   创建出来的  火花的盒子  ，所以需要创建一个父级参数selector
            // this.main = document.querySelector(selector);
			// 每次调用FireWork 都会进行元素选择,会导致元素选择次数太多;
			// 向Firework上存储数据;
			// 做一个逻辑 : 如果 FireWork上已经有选择好的元素了,那么我们就不需要重复进行选择了
			// 1. 如果已经选择过元素了,并且元素上的选择器和传入的选择器
            // 单例模式的思想;
            //如果 存在FireWork.main  并且  FireWork.main.selector === selector  的挂
            if( FireWork.main && FireWork.main.selector === selector){
                //由于已经经历过元素，就可以对需要的元素塑性进行直接赋值
                this.main = FireWork.main.ele;
				// console.log("已经经历过元素原则了，对需要属性进行直接赋值")
            }else{
                //如果没有的话
                //就代表没有选择过元素，现在需要对元素进行选择
                // console.log("还没有选择过元素,现在需要进行元素选择")


                //？？？？
                FireWork.main = {
                    ele : document.querySelector( selector ),
                    selector : selector
                }
                this.main = FireWork.main.ele ;
            }
            //调用初始化函数，初始化数据
            this.init( x , y);
            //代表爆炸后呈现的的样式
            this.BZ_type = BZ_type;
        }
        //创建一个原型对象
        FireWork.prototype = {
            //固定单词 constructor,用来替代构造函数;
            constructor : FireWork,
            //初始化
            init : function( x , y ){
                //因为元素要运动，所以要初始化x，y坐标
                //把初始化出来的x，y坐标指向this
                //这里的this指向FireWork实例对象
                this.x = x;
                this.y = y;
                console.log(this,this.x,this.y,x,y);

                //因为要有火花，所以要创建元素
                //又因为有了创建函数，所以调用函数FireWorkCJ()
                this.ele = this.FireWorkCJ();
                console.log(this.ele);

				// 为了节省randomBoundary消耗的无用性能,统一获取一次left和top的最大值;
				// 注意程序的执行顺序, 元素的offset属性获取，必须要放在元素插入到页面之后才行;
				this.left_max = this.main.offsetWidth - this.ele.offsetWidth;
                this.top_max  = this.main.offsetHeight - this.ele.offsetHeight;
                
                //给元素添加背景颜色
                this.FireWorkYS( this.ele );

                // 烟花主体升起;
				this.FireWorkYD( this.ele );

            },
            //1.创建元素
            // 什么时候要使用var 什么时候要使用 this.xxx ;
			// 如果这个数据在其他的方法里还要用，那么就放在this之中;
			// 如果感觉这个变量在当前函数使用结束就不用了，那么就用var;
            FireWorkCJ : function(){
                //首先要创建一个火花的盒子
                var ele = document.createElement("div");
                //让他拥有className，成为拥有该样式的盒子
                ele.className = "fire";
                //将这个火花盒子放到父级
                //由于传入了父级参数 selector ，将创建出来的 ele 放到父级
                this.main.appendchild( ele );
                //返回ele
                return ele;
            },
            //2.元素运动
            FireWorkYD : function( ele ){
                //创建元素的左右位置
                //left ： 直接到达
                //top  ： 运动到达目的地
                //创建的元素 ele 的left为 this.x 的位置像素
                ele.style.left = this.x + "px";
                //调用运动函数
                animate( ele ,{
                    top : this.y
                },function(){
				    // 烟花运动结束要删除掉这个元素;
                    ele.remove();
					// 直接调用烟花爆炸功能;
                    this.FireWorkBZ();
                }.bind(this))

            },
            //3.烟花爆炸
            FireWorkBZ : function(){
                //烟花爆炸，随机生成多个(20)个火花
                for( var i = 0 ; i < 20 ; i++){
                    //创建火花
                    var ele = this.FireWorkCJ();
                    this.FireWorkYS( ele );
                    //初始化火花的样式
                    ele.style.left = this.x + "px";
                    ele.style.top = this.y + "px";
                    ele.style.borderRadius = "50%";
                    //让元素有运动目标;
                    animate( ele , this.BZ_type = "circular" ? this.BZ_YUAN( i , 20 ) : this.FireWorkWZ() , function( callback_ele ){
                        // 什么时候会执行这个回调函数; 一定的时间之后; for循环早就执行完了;
						// 在这个作用域之中ele只有一个,当你执行回调函数的时候，ele已经被赋值20次了，ele里面的数据之后最后一个。
						// bind 的高级用法;
                        callback_ele.remove();
                    }.bind(this , ele)) 
                    // 因为执行了20次，会创造20个不同的函数;
					// 现在给每个匿名函数都去绑定一个ele元素;
					// function( ele ){ ele => ele1 }.bind(this,ele1)
					// function( ele ){ ele => ele2 }.bind(this,ele2)
					// function( ele ){ ele => ele3 }.bind(this,ele3)
					// ... 

                }
            },
            //4.随机位置6
            FireWorkWZ : function(){
                return {
                    left : parseInt( Math.random() * ( this.left_max + 1) ),
                    top  : parseInt( Math.random() * ( this.top_max + 1) )
                }
            },
            //5.随机颜色
            //给已经创建出来的ele火花盒子添加随机颜色样式
            FireWorkYS : function( ele ){
                return ele.style.backgroundColor = "#" + parseInt( parseInt( "ffffff" , 16) * Math.random() ).toString(16).padStart( 6 , 0 );
            },
            //6.扩展：爆炸后呈圆形绽放
            //now_index : 代表这是创建的第几个圆
            //total : 代表 一共要创建多少个
            BZ_YUAN : function( now_index , total ){
				var r   = 100;
                // 计算角度;
                //reg : 代表第i个对应的角度
				var reg = (360 / total ) * now_index;
                // JS里面没有角度只有弧度; 换算弧度;
                //deg : 转化成弧度
				var deg = Math.PI / 180 * reg;
				return {
					left : parseInt(r * Math.cos( deg )) + this.x,
					top  : parseInt(r * Math.sin( deg )) + this.y,
				} 
			}

        }
        // new FireWork( 200,200,".box");
        document.querySelector(".box").addEventListener("click",function( evt ){
            var e = evt || event;
            new FireWork(e.offsetX , e.offsetY , ".box" , "circular")
        })
    </script>
</body>
</html>
阿潼
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
“浪漫烟花“程序＜VS-C++＞
克隆窝
12-11 853
此时要设定一个布尔类型,用以判断烟花弹是否可以发射.在这过程当中,发射的速度是匀速的,可以直接定义速度,当然这里采用定义时间的方式去进行,定义三个时间,分别为t1,t2和dt用来控制速度的变化.存储每一个位置的图片采用IMAGE函数。再次使用当前背景色清空绘图设备,然后编辑字体为楷体,字号为25,采用settextstyle()函数,接下来,就是在不同的位置依次输出你想输入的文本.采用outtextxy()函数。这里byte n:1;
【跨年烟花代码】用C语言来写“烟花”，快拿去给心中的那个人看
热门推荐
C语言C++学习俱乐部：765860056
11-16 10万+
嗨！这里是狐狸~~ 我之前有发过一篇有关程序员相亲的文章，今天突然翻起，又陷入了沉思，现在不会大家都觉得程序员不懂浪漫吧，真的大错特错，今天就让你们看看什么是程序员的浪漫！ 我们今天就来写写《烟花》表白程序，不要惊讶，不要激动，学会了快去拿给心中的那个人看！！！ 煽情的话就不要我说了吧，直接上代码 首先当然是我们的老朋友结构体，其中艺术字结构体不用我多说，该写什么内容自己应该知道哈 // 烟花结构 struct FIRE { int r; // 当前爆炸半径 int m.
教你用面向对象编程写一个烟花爆炸的特效
qq_41383900的博客
03-22 3万+
想要学会这个漂亮的烟花吗？快来跟着学习吧~ 结构 <div class="container"></div> 我们只需要一个盒子表示烟花爆炸范围就可以了 样式 fire是烟花 注意添加绝对定位 <style> .container{ margin: 0 auto; height: 500px; wi...
烟花爆炸
a_li_li的博客
04-19 404
body {                 width: 100%;                 height: 100%;                 background: black;                 overflow: hidden;             }             .fire {                 width: 3
c语言烟花发射原理,烟花发射原理
weixin_42520573的博客
05-22 1168
烟花发射原理：发射管里有推进燃料。燃料被限制一定空间，比方说在球状烟花的底部，在此聚集的热量和气体会在发射管里产生剧烈的张力。爆炸时，空气急剧膨胀，推动烟花，产生一个很大的初速度，冲向高空。烟花其实和爆竹的大同小异，其结构都包含黑火药和药引。点燃烟花后，类似以上提到的化学反应引发爆炸，而爆炸过程中所释放出来的能量，绝大部分转化成光能呈现出来。制作烟花的过程中加入一些发光剂和发色剂能够使烟花放出五彩...
C语言实现漂亮的烟花效果,非常漂亮的新年祝福!C语言实现漂亮的烟花效果
weixin_28744423的博客
05-20 7343
本文实例为大家分享了C语言实现漂亮的烟花效果展示的具体代码，供大家参考，具体内容如下程序名称：祝福烟花，祝福朋友编译环境：VC++6.0 && easyx(立冬版)#include #include #include #include #include #include #include // 使用该计时器必须包含的文件#pragma comment ( lib, "Winmm....
H5彩色烟花爆炸动画特效
06-24
综上所述，HTML5彩色烟花爆炸动画特效的实现是一个综合运用HTML5 Canvas API、颜色理论、动画原理、数学和物理知识、JavaScript编程以及用户体验设计的项目。通过对这些知识点的深入理解和应用，开发者可以创造出令...
JS实现烟花爆炸效果
10-15
这篇文章主要讲解如何使用JavaScript实现一个烟花爆炸的效果。在网页中，这种效果通常通过HTML5的Canvas API来实现，因为Canvas提供了绘制图形和动画的强大功能。 首先，HTML部分创建了一个`<canvas>`元素，它将...
C# GDI+ 绘制的烟花效果(源代码)
12-02
不使用动态gif图片，纯代码实现的烟花绽放效果。 希望对正在学习GDI的朋友有所帮助。 主题是新年快乐
C#使用OpenGL实现的超漂亮的烟花粒子系统
03-24
C#使用OpenGL实现的超漂亮的烟花粒子系统，采用OpenGL的方式，随机生成上万个随机颜色的三维的烟花粒子，非常漂亮。
MFC 烟花粒子系统 （爆炸效果）
05-24
基于MFC对话框程序 ，显示技术基于OpenGL ，将Win32的烟花粒子程序Firework转换成VC对话框程序，程序稍加修改，显示效果为 在显示区固定点有一爆炸点，修改Firework构造函数Z值会有烟火动态效果，本程序仅提供参考。
谁说程序员不浪漫？！基于easyX图形库的绚烂美丽的烟花！快拿去表白吧
11-14
强制一分，有图形界面，绚烂多彩，可以下来看看，笔者可解答
html+js 夜空烟花特效，可自定义文字特效烟花
07-08
html+js 夜空烟花特效，可自定义文字特效烟花，可点击指定方向放烟花，仅源码方便2次开发，可以拿来自定义名字做生日惊喜礼物哟
css3 烟 蚊香_css3+js实现烟花绽放的动画效果（代码示例）
weixin_31201555的博客
12-23 701
本篇文章给大家介绍通过js+css3的transforms属性和keyframes属性来实现烟花绽放的动画效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。首先我们来看看效果：动画的实现原理：动画使用了两个关键帧(keyframes)：一个是烟花筒上升的轨迹，另一个是烟花绽放中的火星碎片。在这里你可以看到正在进行的基本草图：每个烟花筒沿着场地底部的线分配一个随机的起始位置...
烟花效果-向4周发射并自由落体
jyb123的专栏
07-18 450
https://www.cnblogs.com/visualiz/p/fireworks.html     //// 创建模型列表 function create(){     //// 初始化     circles = [];     for (var i = 0; i &lt; count; i++) {         var particle = new Circle(o...
粒子算法：烟花、喷泉、爆炸
weixin_34354945的博客
08-22 1274
参考：https://www.codeproject.com/articles/10003/a-basic-particles-system 如果需要实现一个喷泉粒子系统： 1）需要先定义每个粒子元素Particle类：它应包含有运动方向和速度，初始化位置（及运动一个生命值后的位置），生命值，粒子渲染的颜色，及一个生命值增加一个单位后对应的粒子属性变化。 Vector.cs--存储粒子位置信...
【JavaScript源代码】JavaScript实现烟花特效(面向对象).docx
12-29
这个JavaScript烟花特效利用了面向对象编程的特性，通过类和方法将烟花的生命周期（上升和爆炸）逻辑化，同时结合CSS和JavaScript事件处理，创建了一个互动式的烟花显示效果。用户每次点击都会在屏幕上的指定位置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值