JavaScript DOM操作之:事件进阶及对象

最新推荐文章于 2022-04-20 13:23:46 发布
最新推荐文章于 2022-04-20 13:23:46 发布
阅读量524 收藏 1
点赞数
分类专栏： 前端学习 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Morbidmuse/article/details/122125769
版权 
事件监听器
	事件处理器:
		通过操作HTML属性来给元素添加事件
		这种方式的缺陷:不能对同一个元素多次添加相同的事件
		要移除事件处理器的事件可以通过obj.事件名=null实现
	事件监听器:
		1.绑定事件
			使用addEventListener()为一个元素添加事件
			语法: obj.addEventListener(type,fn,false)
				type->字符串,指的是事件类型,如click,此处不加on
				fn->函数名,或者一个匿名函数
				false->事件冒泡阶段调用
		2.解绑事件
			使用removeEventListener()解绑事件
			语法:obj.removeEventListener(type,fn,false)
			这个方法只能解除事件监听器绑定的事件,不能解除事件处理器添加的事件
	一般情况下,添加了事件没必要去解除事件,但在有的时候需要用到
		如:一次性事件,在事件处理中再移除事件
			在实际开发中,拖拽的效果,在onmouseup事件中就必须移除onmousemove事件.

event对象:
	保存事件的详细信息
	每次调用一个事件的时候都会默认给事件处理函数添加一个默认的参数event 
	属性:
		type:类型
		keycode:键码值
		shiftkey:是否按下shift
		ctrlkey:
		altkey:
		
this:
	哪个DOM对象调用了this所在的函数,那么this就指向这个DOM对象

示例:
01事件处理器的缺陷
02事件绑定
03多次调用window点onload
04解除事件
05event对象
06.禁用shift_ctrl_alt
07获取方向键
08this举例
09this用于闭包

示例:
01事件处理器的缺陷

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById("btn");
				oBtn.onclick=function(){
					alert("第一次点击")
				}
				oBtn.onclick=function(){
					alert("第二次点击")
				}
				// 对同一个元素添加多次相同的事件,只有最后依次生效
				oBtn.onclick=function(){
					alert("第三次点击")
				}
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="btn" value="点击" />
	</body>
</html>

02事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById("btn");
				oBtn.addEventListener('click',function(){
					alert("JavaScipt")
				},false);
				oBtn.addEventListener('click',function(){
					alert("第二次JavaScipt")
				},false);
				oBtn.addEventListener('click',function(){
					alert("第三次JavaScipt")
				},false);
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="btn" value="按钮" />
	</body>
</html>

03多次调用window点onload

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		// 这种方式只执行了第三次window.onload
		/*
			window.οnlοad=function(){
				var oBtn1=document.getElementById("btn1");
				oBtn1.οnclick=function(){
					alert("第一次调用window.onload")
				};
			};
			window.οnlοad=function(){
				var oBtn2=document.getElementById("btn2");
				oBtn2.οnclick=function(){
					alert("第二次调用window.onload")
				};
			};
			window.οnlοad=function(){
				var oBtn3=document.getElementById("btn3");
				oBtn3.οnclick=function(){
					alert("第三次调用window.onload")
				};
			}
			*/
		   window.addEventListener('load',function(){
			   var oBtn1=document.getElementById("btn1");
			   oBtn1.onclick=function(){
			   	alert("第一次调用window.onload")
				}
		   },false)
		   
		   window.addEventListener('load',function(){
		   			   var oBtn2=document.getElementById("btn2");
		   			   oBtn2.onclick=function(){
		   			   	alert("第二次调用window.onload")
		   				}
		   },false)
		   
		   window.addEventListener('load',function(){
		   			   var oBtn3=document.getElementById("btn3");
		   			   oBtn3.onclick=function(){
		   			   	alert("第三次调用window.onload")
		   				}
		   },false)
		   
		   /*
		   // 还可以通过自定义一个装饰器函数来完成这个任务
		   function addLoadEvent(func){
			   var oldοnlοad=window.onload;
			   if (typeof window.onload != "function"){
				   window.οnlοad=func;
			   }else{
				   window.οnlοad=function(){
					   oldonload();
					   func();
				   }
			   }
		   }
		   
		   // 调用:
			addLoadEvent(function(){
				.....
			})
			*/
		   	


		   
		</script>
	</head>
	<body>
		<input type="button" name="" id="btn1" value="按钮1" />
		<input type="button" name="" id="btn2" value="按钮2" />
		<input type="button" name="" id="btn3" value="按钮3" />
	</body>
</html>

04解除事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oP=document.getElementById("content");
				var oBtn=document.getElementById("btn");
				// 为p添加事件
				oP.addEventListener('click',changeColor,false);
				// 点击按钮为p解除事件
				oBtn.onclick=function(){
					oP.removeEventListener('click',changeColor,false);	
				}
				function changeColor(){
					this.style.backgroundColor='yellow';
					
				}
			}
		</script>
	</head>
	<body>
		<p id="content">改变背景颜色</p>
		<input type="button" name="" id="btn" value="解除" />
	</body>
</html>

05event对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById("btn");
				var oTxt=document.getElementById("txt");
				var oLab=document.getElementById('tt');
				oBtn.onclick=function(e){
					alert(e.type)

				}
				oTxt.onkeyup=function(e){
					oLab.value=e.keyCode;
				}
			}
		</script>
	</head>
	<body>
		<input type="text" name="" id="txt" value="" />
		<label >键码:</label>
		<input type="text" id='tt' />
		<input type="button" name="" id="btn" value="按钮" />
		
	</body>
</html>

06.禁用shift_ctrl_alt

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				document.onkeydown=function(e){
					if (e.shiftKey || e.altKey || e.ctrlKey){
						alert("禁止使用shift/ctrl/alt键")
					}
				}
			}
		</script>
		
	</head>
	<body>
		<p>
			保存事件的详细信息
			每次调用一个事件的时候都会默认给事件处理函数添加一个默认的参数event 
			属性:
				type:类型
				keycode:键码值
				shiftkey:是否按下shift
				ctrlkey:
				altkey:
		</p>
	</body>
</html>

07获取方向键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oSpan=document.getElementsByTagName("span")[0];
				window.addEventListener("keydown",function(e){
					if (e.keyCode==38 || e.keyCode==87){
						oSpan.innerHTML='上';
					}else if(e.keyCode==39 || e.keyCode==68){
						oSpan.innerHTML='右';
					}else if(e.keyCode==40 || e.keyCode==83){
						oSpan.innerHTML='下';
					}else if(e.keyCode==37 || e.keyCode==65){
						oSpan.innerHTML='左';
					}else{
						oSpan.innerHTML='';
					}
				},false)
				
			}
		</script>
	</head>
	<body>
		<div id="">
			你控制的方向是:<span style="font-weight:bold;color:hotpink;">
				
			</span>
		</div>
	</body>
</html>

08this举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 哪个DOM对象调用了this所在的函数,那么this就指向这个DOM对象
			window.onload=function(){
				var oDiv=document.getElementsByTagName("div")[0];
				var oP = document.getElementsByTagName('p')[0];
				oDiv.onclick=changeColor;
				oP.onclick=changeColor;
				function changeColor(){
					this.style.color='red';
				}
			}
		</script>
	</head>
	<body>
		<div id="">
			这是点击div时的文字内容,此时this指代div
		</div>
		<p>这是点击p标签时的文字内容,此时this指代p</p>
	</body>
</html>

09this用于闭包

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oUl = document.getElementById('list');
				var oLi=document.getElementsByTagName('li');
				for (var i=0;i<oLi.length;i++){
					oLi[i].onclick=function(){
						// oLi[i].style.color='hotpink';
						this.style.color='hotpink';
					}
				}
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
	</body>
</html>

window对象`

一个浏览器窗口就是一个window对象
	我们可以用对象的属性和方法来操作这个对象
	window的结构:
		document 文档对象
			title 
			body
			forms 
			images 
			links
		location 地址对象,操作URL地址
			href 
			search 
			hash 
		navigator 浏览器对象,获取浏览器版本等信息
			userAgent
		history 历史对象 用于操作浏览历史
		frames
		screen 屏幕对象,用于操作屏幕宽高等
一个窗口就是一个window对象,窗口中的html文档就是一个document对象,它是window的子对象

window对象下的子对象 location\navigate\等是用于操作浏览器窗口的,所以也称为BOM(Browser Object Module)浏览器对象模型
	window对象的常用方法
		alert()    提示对话框
			在alert()实现换行需要使用'\n'
		confirm()  判断对话框
			confirm('提示文字') 可以提供确认
			如果用户点击确定返回true
			否则返回false
		prompt()   输入对话框
			prompt('提示')
			返回一个用户输入的字符串
		open()     打开窗口
		close()    关闭窗口
		setTimeOut()  开启一次性定时器
		clearTimeout() 关闭一次性定时器
		setInterval()  开启重复性定时器
		clearInterval() 关闭重复性定时器
	使用window的属性和方法时可以省略前缀window

打开窗口:
	window.open(url,target)
		如果url为空,则打开空白窗口
关闭窗口:
	window.close()  没有参数
	
定时器:
	每隔一段时间就执行一次代码
	setTimeOut()  开启一次性定时器
		setTimeOut(code,time)
		code可以是一段代码或者函数或者函数名
		time是时间,单位毫秒
	clearTimeout() 关闭一次性定时器
		timer=setTimeOut(...)
		clearTimeout(timer)则可以移除这个定时器
	setInterval()  开启重复性定时器
		setInterval(code,time)
		code可以是一段代码或者函数或者函数名
		time是时间,单位毫秒
	clearInterval() 关闭重复性定时器
location对象: 操作url
	href:当前页面的地址
	search:url中'?'后面的内容 主要用于数据库查询
	hash:url中'#'后面的内容  主要用于锚点链接
	
navigate
	window.navigator.userAgent:浏览器版本信息
	
示例:
01打开新窗口
02confirm举例
03用户输入
04定时器演示
05倒计时效果
06跑马灯效果
07当前页面的url

01打开新窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById("btn");
				var oBtn2=document.getElementById("btn2");
				oBtn.onclick=function(){
					open("http://www.baidu.com");
				}
				oBtn2.onclick=function(){
					var opener = open("");
					opener.document.body.style.backgroundColor="lightcyan";
					opener.document.write("这是一个新建的空白页面")
					
				}
			}
		</script>

		
	</head>
	<body>
		<input type="button" name="" id="btn" value="打开百度" />
		<input type="button" name="" id="btn2" value="打开空白窗口" />
	</body>
</html>

02confirm举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById("btn");
				oBtn.onclick=function(){
					if (confirm("确定要跳转到百度首页吗?")){
						location.href="http://www.baidu.com";
					}else{
						document.write('你取消了跳转');
					}
					
				}
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="btn" value="跳转" />
	</body>
</html>

03用户输入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById('btn');
				oBtn.onclick=function(){
					name = prompt('请输入你的名字');
					document.write("欢迎<strong>"+name+"</strong>来到本网站")
				}
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="btn" value="输入" />
	</body>
</html>

04定时器演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				setTimeout(function(){
					alert('你好啊,朋友')
				},3000)
			}
		</script>
	</head>
	<body>
		<p>三秒后出现提示语</p>
	</body>
</html>

05倒计时效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var n=5  //全局变量,记录秒数
			setInterval(countDown,1000);
			function countDown(){
				//判断n是否大于0
				if (n>0){
					n--;
					document.getElementById('num').innerHTML=n;
				}
			}
		</script>
	</head>
	<body>
		<p>倒计时:<span id="num">
			
		</span></p>
	</body>
</html>

06跑马灯效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				border:2px solid #2F4F4F;
				
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementsByTagName("input");
				var oDiv=document.getElementsByTagName('div');
				var colors = ['purple','black','red','white','orange','green','cyan'];
				var timer = null;
				var i = 0
				oBtn[0].onclick=function(){
					// 为防止添加多个定时器先清除一次
					clearInterval(timer);
					//每隔一秒切换一次背景色
					timer=setInterval(function(){
						oDiv[0].style.backgroundColor=colors[i];
						i++;
						i=i % colors.length;
					},1000);
				}
				oBtn[1].onclick=function(){
					clearInterval(timer);
				}
				
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="" value="开始" />
		<input type="button" name="" id="" value="暂停" />
		<div id="">
			文字变色
		</div>
	</body>
</html>

07当前页面的url

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				// var url=window.location.href;
				// document.write(url);
				
				// msg = window.location.search;
				// document.write(msg);
				
				// info = window.location.hash;
				// document.write(info);
				
				//两秒后跳转百度
				// setTimeout(function(){
				// 	window.location.href="http://ww.baidu.com"
				// },2000);
				var ms=window.navigator.userAgent;
				var oBtn=document.getElementById("btn");
				oBtn.onclick=function(){
					alert(ms)
				}

				
				
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="btn" value="显示版本" />
	</body>
</html>

document对象

document对象
	属性:
		title   标题
		body    身体
		forms   所有的form元素
		iamges  所有的img元素
		links   所有的a元素
		cookie  文档的cookie
		URL     当前文档的url
			和window.location.href的区别:
				document.URL只能获取,不能设置
		referrer  返回浏览者到达当前文档的url
		
	方法:
		document.writeln()  输出内容并换行
		getElementBy...
		getElementsBy...
		createElement()
		createTextNode()
***学习让我痛苦,但我生来就不是为了快乐***

以下附件来自:莫振杰<<从0到1 javascript快速入门>>

请添加图片描述

时间对象的方法
在这里插入图片描述
数学对象的方法
在这里插入图片描述

在这里插入图片描述
数组的方法
在这里插入图片描述
字符串的方法
在这里插入图片描述
常用随机数
在这里插入图片描述
在这里插入图片描述
请添加图片描述

Morbidmuse
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web API-DOM操作元素
weixin_68531033的博客
04-18 877
1.变量声明 有了变量先使用const,如果发现它后面是要修改的,在改为let cost里面存地址,建议数组和对象使用const来声明 存储应用类型（数组）在栈内存地址，地址不变可修改值 可以修改，基本类型不能修改 webapi作用和分类 WEB APIS：操作网页文档或者浏览器的接口（方法） DOM：操作文档接口 BOM：操作浏览器的接口 ...
在js中修改html、body的样式
weixin_42289080的博客
11-09 9991
一、原始定义 先在css中定义：body, html 宽高为300px body, html { width: 300px; height: 300px; } js操作，以修改宽度为例 // 获取body、html节点style（主要是这里html，一开始不清楚获取方式） let bodyStyle = document.body.style let htmlStyle = document.getElementsByTagName('html')[0].style // 获取浏览器的宽度
改变网页背景色
qq_45337854的博客
10-11 682
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> function color(str){ document.b...
javascript 中设置、读取、删除CSS原生变量的方法
祥哥的说
12-03 1027
// 设置变量 document.body.style.setProperty('--primary', '#7F583F'); // 读取变量 document.body.style.getPropertyValue('--primary').trim(); // '#7F583F' // 删除变量 document.body.style.removeProperty('--primary...
vue项目中销毁window.addEventListener事件监听
weixin_37633749的博客
10-12 9747
今天在做项目的过程中，组件中调用iframe时，由于在组件的created方法中写了监听，用于接收iframe发来的信息，但是在组件销毁的时候并没有去掉监听，导致组件创建几次，监听方法就会执行几次，特此记录 created() { window.addEventListener('message', this.receiveMessage, false) }, beforeDestr...
javascript-pro:javascript高级进阶文档
06-15
"javascript-pro:javascript高级进阶文档"这个资源显然旨在帮助开发者深入理解并掌握JavaScript的高级概念和技巧，以提升他们的编程能力。这里我们将探讨JavaScript的高级主题，包括但不限于原型链、闭包、异步编程...
JavaScript学习笔记之DOM基础操作实例小结
12-08
三、DOM操作进阶 除了基础操作，DOM还提供了其他高级功能，如： - `appendChild()`：在元素末尾添加新的子节点。 - `insertBefore()`：在指定子节点之前插入新子节点。 - `removeChild()`：删除指定的子节点。 - `...
JavaScript DOM进阶方法
10-24
在实际的网页开发中，进阶的DOM操作还包括事件监听、节点遍历和样式修改等高级功能。学习和掌握这些技能对于前端开发者来说是十分必要的。总之，深入理解并应用JavaScript与DOM的交互，可以让你的网页不仅仅是静态的...
JavaScript进阶练习及简单实例分析
10-22
本文介绍了一个JavaScript的进阶练习示例，该示例涉及的主要知识点包括对象的创建与属性操作、事件监听、字符串处理以及基本的DOM操作。以下是详细知识点分析： 1. JavaScript对象操作：在示例代码中，首先定义了一...
ITC-230:进阶Javascript
04-03
8. **DOM操作**：结合HTML标签，课程会讲解如何使用JavaScript操作DOM（文档对象模型），实现动态更新页面内容，添加事件监听，以及优化DOM操作的性能。 9. **AJAX与Fetch API**：用于异步获取远程数据，构建前后端...
vue中的addEventListener和removeEventListener
浅笑如伤的博客
06-09 9361
1、添加监听事件（addEventListener） 语法：element.addEventListener(event,function,useCapture) event：指定事件名（注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"） function：指定要事件触发时执行的函数（事件对象会作为第一个参数传入函数） useCapture：指定事件是否在捕获或冒泡阶段执行，默认false（true - 事件句柄在捕获阶段执行，false-事件句柄...
简单说 通过JS控制CSS的各种方式（上）
热门推荐
FEWY的博客
09-13 4万+
说明通过JS控制CSS，我们能做出更多漂亮的页面特效，做出更炫的交互效果。今天我们来说说JS控制CSS的各种方式。 解释JavaScript、CSS、HTML是前端三剑客，我们说正事之前，先来说说CSS与HTML的事。 在HTML中使用CSS有三种方式 1、内联方式 CSS定义在单个的HTML元素中的style属性中 2、内部样式表 CSS通过标签
java怎么改背景颜色_如何使用JavaScript更改背景颜色？
weixin_32432759的博客
02-27 2377
回答(17)2 years ago修改JavaScript属性 document.body.style.background .例如：function changeBackground(color) {document.body.style.background = color;}注意：这确实取决于您的页面如何组合在一起，例如，如果您使用具有不同背景颜色的DIV容器，则需要修改其背景颜色而不是文...
HTML怎样获取显示器屏幕尺寸
hello world！
01-08 5430
function a(){document.write("屏幕分辨率为："+screen.width+"*"+screen.height //最好是window.screen+""+"屏幕可用大小："+screen.availWidth+"*"+screen.availHeight+""+"网页可见区域宽："+document.body.clientWidth+""+"网页可见区域高："+doc
Vue前端换肤
高先生的猫
06-15 1476
换肤效果 本文采取 CSS自定义变量 实现 使用 document.body.style.setProperty('--bg', 'red'); 来设置变量 使用 document.body.style.getPropertyValue('--bg'); 来获取变量 使用 document.body.style.removeProperty('--bg');来删除变量 var()来访问。第二个值表示变量的默认值。如:var(--bg,'#fff') :ro..
html 弹出 模态,html模态弹出窗口
weixin_42363874的博客
06-07 353
bobince..16这是一个简单的JavaScript示例:Basic modal demobody { margin: 0; }#shade, #modal { display: none; }#shade { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; }#modal { positio...
html 相对高度,关于js各种dom高度及相对位置 & 鼠标位置
weixin_33250594的博客
06-22 400
需要提前了解的知识点在 DOM 术语中，client 总是指除边框(border)外的渲染盒子(内边距+内容大小)。offset 总是指包含边框的渲染盒子(边框+内边距+内容大小)clientTop 即为这两者的 Top 之差，即边框宽度除了html元素外滚动条是从border开始的documentElement && bodydocumentElement 对应的html标签bo...
document.body 属性
m0_57835615的博客
05-29 4566
document.body 属性用于设置或返回文档体。 1.返回当前文档的 <body> 元素
Dom 文档对象模型
nknmn
04-20 334
< DOM > 1.文档：一个页面就是一个文档，DOM中使用document表示 2.元素：页面中的标签都是元素，DOM中使用element表示 3.节点：网页中所有的内容都是节点（标签、属性、文本、注释等），DOM中使用node表示 DOM把以上内容都看做是对象 1.获取页面元素： （1）根据ID获取： document.getElementById() // 1.因为文档页面是从上往下加载的，先得有标签， 所...
"JavaScript进阶：DOM操作与对象概念简介
总之，JavaScript进阶课程1介绍了对象和DOM的概念和基本操作，为后续JavaScript学习奠定了基础。对象作为JavaScript中的基本数据类型，具有丰富的特征和行为，可以通过属性和方法来描述和操作对象。DOM作为文档对象...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值