《前端进阶》第七单元练习手册

最新推荐文章于 2023-11-01 17:22:49 发布
最新推荐文章于 2023-11-01 17:22:49 发布
阅读量387 收藏
点赞数
文章标签： html5 正则表达式 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53762175/article/details/119837005
版权
一、练习目标：
1.
掌握并熟练运用 JavaScript 对话框
2.
掌握并熟练运用 JavaScript 页面加载事件
3.
掌握并熟练运用 JavaScript 浏览器控制台打印结果
4.
掌握并熟练运用 JavaScript 定时器完成对应案例
5.
熟练掌握 JavaScript 中 location 对象和 history 对象
二、练习题：
练习题一：考核 JS 中 exec（）、test（）的使用
完成时间：10 分钟
场景描述：
今天我们学习了 test（）方法和 exec（）方法，那我们结合前几节课学习的正则
表达式的内容来练习一下，匹配字符串'regular expression = regexp'中的 lar exp，
并用 exec（）和 test（）方法去验证匹配结果。
效果图：
任务要求:
我们可以用两种方式创建匹配的正则表达式
我们可以分别用 test（）和 exec（）验证结果，每个结果后面用“/”隔开 练习题二：考核 JS 中 exec（）、test（）的使用
完成时间：10 分钟
场景描述：
我们学习了正则表达式中的测试的两种方法，那我们来使用一下它们，匹配字符串
'一个"普通字符"在匹配字符串的时候，匹配与它相同的一个字符'中的"普通字符"，并
用 exec 和 test 方法去验证匹配结果。
效果图：
任务要求：
首先定义要匹配字符转的正则表达式
分别调用我们刚学的方法 test 和 exec 方法来验证输出，每个输出后面加上“/”
来区分
练习题三：考核 JS 中 exec（）、test（）的使用
完成时间：10 分钟
场景描述：
那 我 们 来 运 用 这 节 课 学 到 的 知 识 来 练 习 一 下 ， 匹 配 字 符 串
'JavaScript_RegExp_5@gmail.com'中的‘_RegExp_5@gm’，并用 exec 和 test 方
法验证匹配结果。
任务要求：
分别用两种字面量和构造函数的方法定义好正则表达式。
用我们刚学的两个方法进行一 一验证
运用 i 修饰符定义正则表达式
用 test 和 exec 方法分别验证运用到 i 修饰符的正则表达式
注意：输出的每个结果都用“/”隔开
练习题四：考核 JS 正则的创建方式的使用
完成时间：10 分钟
场景描述：
现有获取到的用户输入 var userInput = '正则'; 利用我们刚学过的知识来创建正
则表达式，匹配字符串'正则表达式'中的'正则'两个字符。
效果图：
任务要求：
用构造方法定义正则表达式，并且将要匹配的字符（userInput）传进去
用 test 和 exec 方法分别进行测试，注意每个输出结果都用“/”隔开
练习题五：考核 JS 中正则的创建方式的使用
完成时间：10 分钟
场景描述：
学习了获取用户输入的正则表达式，那我们来练习一下吧，现有获取到的用户输入
var userInput = 'js'; 请利用它创建正则表达式，匹配字符串'html,css,js'中的 ',js' 三 个字符。
效果图：
任务要求：
运用创建构造方法的方式定义正则表达式
分别用 test 和 exec 方法来验证结果
练习题六：考核 JS 中 exec（）的使用
完成时间：15 分钟
场景描述：
请使用常用的字符类匹配字符串 ' 192.168.1.1@Admin ' 中的‘1.1@Admin’，
并且用正则表达的 exec（）方法进行测试，要求输出测试结果。
任务要求：
定义要匹配的正则表达式（注意写法有多种）
用正则表达式的 exec（）方法进行测试
注意: 这里的写法非常多，只要测试能通过都是正确的
练习题七：考核 JS 中非贪婪的重复的使用
完成时间：15 分钟
场景描述：
我们学习了非贪婪的重复，那么我们运用非贪婪的知识来练习一下吧，如何匹配字 符串 str=“cctv have [cctv1]、[cctv2]、[cctv3]、[cctv4]……”中的[cctv1]。
效果图：
任务要求：
定义要匹配的正则表达式（注意写法有多种）
用正则表达式的 exec（）方法输出匹配的[cctv1]
练习题八：考核 JS 中 setInterval（）的使用
完成时间：15 分钟
场景描述：
找出字符串'110 报警 120 急救 119 火警 114 查询'中的所有数字，并打印出来
效果图：
任务要求：
定义要匹配的正则表达式，注意是全局匹配
用 match 方法验证结果
练习题九：考核 JS 中 String 中的正则方法、正则的模式修饰符的使用
完成时间：15 分钟
场景描述： 我们发现分割的技术非常有趣，那么现在我们将现有日期格式的字符串
'1111-11-11'，变成'1111,11,11'的格式。
任务要求：
先将字符串分割出来
在分割出用“，”连接
输出结果
提示：分割可以用“-”进行分割，用 split（）方法，拼接“，”可以用 join 方法
练习题十：考核 JS 中正则表达式的综合使用
完成时间：45 分钟
场景描述：
随着科技的发展，现在人们买火车票的时候不用再去火车站买了，我们在网上就可
以订票，但是我们在网上订票的时候就需要注册一个账号，我们学习了正则表达式后，
账号的注册就会简单很多，那我们就一起来写一个类似 12306 的账号注册吧。
要求：
1、注册表的内容包括用户名、密码、确认密码、姓名、身份证号、邮箱、手机号
码以及提交按钮。
2、输入不正确时要有提示，输入正确是后面要显示 ok。
3、验证通过则弹出验证通过。
任务要求：
编写注册静态页面，包括 html 布局和 css 样式
验证用户名，要求用户名是 6-20 位字母、数字或“_”,字母开头，失去光标就进 行判断，正确时在文本框后面显示“OK“，错误时显示错误的提示语。
验证密码，要求密码 6-18 位，包括数字字母或符号，中间不能有空格。失去光标
就进行判断，正确时在文本框后面显示“OK“，错误时显示错误的提示语。
确认密码，要求和第一次输入的密码一样，不一样时文本框后面显示“两次输入密
码不一致”，一致时显示“OK”。
验证姓名，要求是真是姓名，两位到四位的中文汉字，失去光标就进行判断，正确
时在文本框后面显示“OK“，错误时显示错误的提示语。
验证身份证号，要求 15 位或者 18 位的数字，18 位时最后一位可能是 x，失去光
标就进行判断，正确时在文本框后面显示“OK“，错误时显示错误的提示语。
验证邮箱，邮箱的格式大概分为这么几种，12323@qq.com、
lulu_s@open.com、
lu_lu_z@qq.com.cn 等。失去光标就进行判断，正确时在文本框后面显示“OK“，
错误时显示错误的提示语。
验证手机号码，手机号码一共有这么几种：
失去光标就进行判断，正确时在文本框后面显示“OK“，错误时显示错误的提示 语。
提交按钮的事件，点击按钮还要重新验证以上内容，如果通过则弹出验证成功，如
果有一个或者多个没有验证通过的，在其相应的文本框后面显示相应的提示。
提示：失去光标是需要给相应的项添加失去光标事件 blur（）。注意正则书写格式，
都是需要首批配和尾匹配。
练习题十一：考核 JS 中正则表达式的综合使用
完成时间：45 分钟
效果图：
任务要求：
HTML 布局正确
CSS 样式调整正确
用户名规则：失焦，先验证非空，再验证：6-30 位字母、数字或_
密码规则：失焦，先验证非空，再验证：6-20 位字母，数字或符号
确认密码规则：失焦，先验证非空，再验证：两次密码相同
姓名规则：失焦，先验证非空，再验证：2-3 位汉字
身份证号规则：失焦，先验证非空，再验证：18 位纯数字或 17 位纯数字+X
邮箱规则：失焦，先验证非空，再验证：邮箱格式必须正确
手机号规则：失焦，先验证非空，再验证：手机号格式必须正确
表单提交时，再次确认上述验证是否通过，否则不能提交
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0 auto;
}
.box {
width: 1200px;
height: 400px;
background-color: #eee;
}
.box1 {
width: 1200px;
height: 30px;
background-color: cornflowerblue;
}
.box1 h4 {
color: #EEEEEE;
line-height: 30px;
float: left;
margin-left: 20px;
}
.box p {
text-align: center;
margin-top: 10px;
}
.box button{
width: 50px;
height: 30px;
border: none;
background-color: #6495ED;
color: #fff;"
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<h4>用户注册</h4>
</div>
<form action="index.html" method="" οnblur="fun8()">
<p>
用户名: <input type="text" placeholder="请输入用户名" id="text" οnblur="fun1()">
<span id="verify1"></span>
</p>
<p>
登录密码: <input type="password" placeholder="请输入密码" id="password" οnblur="fun2()">
<span id="verify2"></span>
</p>
<p>
确认密码 : <input type="password" placeholder="请输入确认密码" id="passwor" οnblur="fun3()">
<span id="verify3"></span>
</p>
<p>
姓名: <input type="text" placeholder="请输入姓名" id="name" οnblur="fun4()">
<span id="verify4"></span>
</p>
<p>
性别:<select>
<option value ="男">男</option>
</select>
</p>
<p>
身份证号码: <input type="text" placeholder="请输入身份证" id="name2" οnblur="fun5()">
<span id="verify5"></span>
</p>
<p>
邮箱:<input type="text" placeholder="请输入邮箱" id="name3" οnblur="fun6()">
<span id="verify6"></span>
</p>
<p>
手机号: <input type="text" placeholder="请输入手机号" id="name4" οnblur="fun7()">
<span id="verify7"></span>
</p>
</form>
</div>
<script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35929/livereload.js?snipver=1"></' + 'script>')</script><script>document.addEventListener('LiveReloadDisconnect', function() { setTimeout(function() { window.location.reload(); }, 500); })</script></body>
</html>
<script type="text/javascript">
//用户名
function fun1() {
var reg = /^[a-z0-9_]{6,20}$/;
var content = document.getElementById('text').value;
var str = reg.test(content)
if (str) {
document.getElementById('verify1').innerHTML = '<font color="green">ok</font>'
} else {
document.getElementById('verify1').innerHTML = '<font color="red">6-20位字母数字，下划线</font>'
}
}
//密码
function fun2() {
var reg = /^[a-z0-9_]{6,20}$/;
var content = document.getElementById('password').value;
var str = reg.test(content)
if (str) {
document.getElementById('verify2').innerHTML = '<font color="green">ok</font>'
} else {
document.getElementById('verify2').innerHTML = '<font color="red">6-18位字母数字字母</font>'
}
}
//确认密码
function fun3() {
var content = document.getElementById('password').value;
var content1 = document.getElementById('passwor').value;
if (content==content1) {
document.getElementById('verify3').innerHTML = '<font color="green">ok</font>'
} else {
document.getElementById('verify3').innerHTML = '<font color="red">两次密码不同</font>'
}
}
//姓名
function fun4() {
var reg = /^[\u4e00-\u9fa5]{2,4}$/
var content = document.getElementById('name').value;
var str = reg.test(content)
if (str) {
document.getElementById('verify4').innerHTML = '<font color="green">ok</font>'
} else {
document.getElementById('verify4').innerHTML = '<font color="red">姓名输入不正确</font>'
}
}
//身份证
function fun5() {
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
var content = document.getElementById('name2').value;
var str = reg.test(content)
if (str) {
document.getElementById('verify5').innerHTML = '<font color="green">ok</font>'
} else {
document.getElementById('verify5').innerHTML = '<font color="red">身份证输入不正确</font>'
}
}
//邮箱
function fun6() {
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var content = document.getElementById('name3').value;
var str = reg.test(content)
if (str) {
document.getElementById('verify6').innerHTML = '<font color="green">ok</font>'
} else {
document.getElementById('verify6').innerHTML = '<font color="red">邮箱输入不正确</font>'
}
}
//手机号码
function fun7() {
var reg = /^1[3568][0-9]{9}$/
var content = document.getElementById('name4').value;
var str = reg.test(content)
if (str) {
document.getElementById('verify7').innerHTML = '<font color="green">ok</font>'
} else {
document.getElementById('verify7').innerHTML = '<font color="red">手机号输入不正确</font>'
}
}
</script>
练习题十二：考核 JS 中正则表达式的综合使用
完成时间：60 分钟
效果图：
任务要求：
建立站点存储该案例，CSS 和 JS 均需外部引入
整体网页结构搭建无误
整体网页 CSS 样式调整无误
失焦验证用户名需为：6-30 位字母，数字或“_”、字母开头
失焦验证密码需为：6-20 位字母、数字或符号，不可全部为数字
失焦验证确认密码不可为空，且必须和密码一致
失焦验证姓名为中文 2-3 位汉字即可
定义一个 JS 数组，动态循环数据到证件类型的下拉框中，内容为：二代身份证、
港澳通行证、台湾通行证、护照
失焦验证 18 位身份证号码纯数字，17 位加上部分大小写的“x”
失焦验证邮箱不可为空，邮箱格式必须正确
失焦验证手机号码必须为 11 位纯数字，且必须为：13、15、17、18、19 开头
点击“下一步按钮”时，如果上述验证不通过则不可进行到下一步，并且给予提示，
是哪一项验证有问题红色字体
如果上述验证通过，点击下一步按钮，表单以 get 方式提交到百度首页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0 auto;
}
.box {
width: 1200px;
height: 400px;
background-color: #eee;
}
.box1 {
width: 1200px;
height: 30px;
background-color: cornflowerblue;
}
.box1 h4 {
color: #EEEEEE;
line-height: 30px;
float: left;
margin-left: 20px;
}
.box p {
text-align: center;
margin-top: 10px;
}
.box button{
width: 50px;
height: 30px;
border: none;
background-color: #6495ED;
color: #fff;"
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<h4>用户注册</h4>
</div>
<form action="index.html" method="" οnblur="fun8()">
<p>
用户名: <input type="text" placeholder="请输入用户名" id="text" οnblur="fun1()">
<span id="verify1"></span>
</p>
<p>
登录密码: <input type="password" placeholder="请输入密码" id="password" οnblur="fun2()">
<span id="verify2"></span>
</p>
<p>
确认密码 : <input type="password" placeholder="请输入确认密码" id="passwor" οnblur="fun3()">
<span id="verify3"></span>
</p>
<p>
姓名: <input type="text" placeholder="请输入姓名" id="name" οnblur="fun4()">
<span id="verify4"></span>
</p>
<p>
性别:<select>
<option value ="男">男</option>
</select>
</p>
<p>
身份证号码: <input type="text" placeholder="请输入身份证" id="name2" οnblur="fun5()">
<span id="verify5"></span>
</p>
<p>
邮箱:<input type="text" placeholder="请输入邮箱" id="name3" οnblur="fun6()">
<span id="verify6"></span>
</p>
<p>
手机号: <input type="text" placeholder="请输入手机号" id="name4" οnblur="fun7()">
<span id="verify7"></span>
</p>
</form>
</div>
<script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35929/livereload.js?snipver=1"></' + 'script>')</script><script>document.addEventListener('LiveReloadDisconnect', function() { setTimeout(function() { window.location.reload(); }, 500); })</script></body>
</html>
<script type="text/javascript">
//用户名
function fun1() {
var reg = /^[a-z0-9_]{6,20}$/;
var content = document.getElementById('text').value;
var str = reg.test(content)
if (str) {
document.getElementById('verify1').innerHTML = '<font color="green">ok</font>'
} else {
document.getElementById('verify1').innerHTML = '<font color="red">6-20位字母数字，下划线</font>'
}
}
//密码
function fun2() {
var reg = /^[a-z0-9_]{6,20}$/;
var content = document.getElementById('password').value;
var str = reg.test(content)
if (str) {
document.getElementById('verify2').innerHTML = '<font color="green">ok</font>'
} else {
document.getElementById('verify2').innerHTML = '<font color="red">6-18位字母数字字母</font>'
}
}
//确认密码
function fun3() {
var content = document.getElementById('password').value;
var content1 = document.getElementById('passwor').value;
if (content==content1) {
document.getElementById('verify3').innerHTML = '<font color="green">ok</font>'
} else {
document.getElementById('verify3').innerHTML = '<font color="red">两次密码不同</font>'
}
}
//姓名
function fun4() {
var reg = /^[\u4e00-\u9fa5]{2,4}$/
var content = document.getElementById('name').value;
var str = reg.test(content)
if (str) {
document.getElementById('verify4').innerHTML = '<font color="green">ok</font>'
} else {
document.getElementById('verify4').innerHTML = '<font color="red">姓名输入不正确</font>'
}
}
//身份证
function fun5() {
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
var content = document.getElementById('name2').value;
var str = reg.test(content)
if (str) {
document.getElementById('verify5').innerHTML = '<font color="green">ok</font>'
} else {
document.getElementById('verify5').innerHTML = '<font color="red">身份证输入不正确</font>'
}
}
//邮箱
function fun6() {
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var content = document.getElementById('name3').value;
var str = reg.test(content)
if (str) {
document.getElementById('verify6').innerHTML = '<font color="green">ok</font>'
} else {
document.getElementById('verify6').innerHTML = '<font color="red">邮箱输入不正确</font>'
}
}
//手机号码
function fun7() {
var reg = /^1[3568][0-9]{9}$/
var content = document.getElementById('name4').value;
var str = reg.test(content)
if (str) {
document.getElementById('verify7').innerHTML = '<font color="green">ok</font>'
} else {
document.getElementById('verify7').innerHTML = '<font color="red">手机号输入不正确</font>'
}
}
</script>
优秀的磊少
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
富裕进阶：前端进阶十日谈
02-03
前端进阶十日谈 这里是前端进阶课程内容中的全部示例代码（非课程内容）。 内容共10章，40节课，61个例子。 在线访问： : 完整课程内容:backhand_index_pointing_right_light_skin_tone: 课程介绍 随着前端行业的...
网页自动刷新插件LiveReload
穆穆里的专栏
02-25 5735
网页开发者一个头痛的问题是每次修改完网页之后都要到浏览器里刷新才能看到效果，这样子效率实在是不高。 还好Firefox有一个自动刷新的插件，修改保存后网页就会自动更新了。
HTML烟花
weixin_62460384的博客
02-10 5801
html烟花
[English] Creating a New Theme
ayuayue的博客
03-31 514
Introduction This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to fo...
HTML烟花代码
最新发布
qq_51389038的博客
11-01 2442
【代码】HTML烟花代码。
超全vue面试题，前端进阶汇总
04-13
超全vue面试题，前端面试题汇总，前端学习进阶 超全vue面试题，前端面试题汇总，前端学习进阶 超全vue面试题，前端面试题汇总，前端学习进阶 超全vue面试题，前端面试题汇总，前端学习进阶 超全vue面试题，前端面试...
前端进阶 - 随笔.rar
12-10
前端日常进阶笔记
mywiki:收集整理日常发现的好资源、前端资源汇总。关注公众号「前端进阶之旅」，一起学习
04-23
-推荐最牛前端大前端前端导航网址前端开发仓库 前端收藏夹F2E 前端导航 - 前端工程师专用的导航菜鸟教程菜鸟导航前端工程师专用的导航站各种框架汇总伯乐在线fks_chart前端工具汇集速查表开发者速查表Linux命令搜索...
2023前端工程师面试题手册
04-14
包含了所有的前端面试的面试题，你只需要把这些背过，那么面试是一件容易的事情。
经典案例重点案例：点名表，JS正则验证全选、全不选、反选，点击可以实现三个功能，轮播图 字符串截取以及替换，图片切换
m0_53762175的博客
08-22 454
重点案例： 点击开始点名，框内的名字转动 点击结束点名，框内的转动停止，并出现一个随机的学生姓名 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #box{ ...
闲扯 『 document.write 』
极客神殿
11-19 587
初春的晚上，闲来无事，聊聊 document.write 方法。 document.write 使用方式非常简单，把 “字符串化”（不好意思，这可能是我自己创造的名词）的 html 代码当做参数传入就 ok 了，我并不打算讲它的基本用法，可以参考以下链接： HTML DOM write() 方法 HTML DOM write() Method Document.write() Using document.write document.write 经常会被用来加载脚本，比如这样： var url = '
regexp（正则表达式）中 exec（）和test（）方法
a1071626267的博客
07-19 489
regexp（正则表达式）中 exec（）和test（）方法
正则表达式中test、exec、match的区别介绍及括号的用法
极客神殿
10-17 1681
test、exec、match的简单区别 1、test test 返回 Boolean，查找对应的字符串中是否存在模式。 var str = “1a1b1c”; var reg = new RegExp(“1.”, “”); alert(reg.test(str)); // true 2、exec exec 查找并返回当前的匹配结果，并以数组的形式返回。 var str = “1a1b1c”; ...
正则表达式regular expression=RegExp
weixin_49614932的博客
03-13 355
正则
【javascript】正则表达式match、exec和test的使用
09-19 98
正则表达式match、exec和test的使用 match和exec在匹配成功时返回的都是数组，在没有匹配上时返回的都是null；test在匹配成功是返回true，在没有匹配时返回的是false。match是String的方法，而test和exec是RegExp的方法。本文探讨的是全局匹配与分组匹配的问题，并有源码附着。 一、全局匹配 1.正则表达式可以使用RegExp对象定义，也...
正则表达式相关总结
m0_46977781的博客
06-03 1683
创建正则表达式有两种方法：一种是字面量，格式是写在/ /中，另一种是用构造方法，里面写字符串或者是字符串的变量。 //构造方法 new RegExp('lar exp'); // /正则表达式/
livereload（自动刷新）
Joan_yang的博客
03-26 5915
安装node    1：换镜像（淘宝）原生npm安装太慢了npm install cnpm -g --registry=https://registry.npm.taobao.org 2：检查版本命令 （cnpm-v） 3：安装livereload （--global 表示全局环境安装）（--save-dev 表示局部文件）cnpm install livereload --global 4：执行...
前端神器！！gulp livereload实现浏览器自动刷新
weixin_30486037的博客
09-12 114
首先gulp是基于Node的，所以确保你已经安装 node.js，在Nodejs官方网站下载跟自己操作系统相对应的安装包。 先说一下gulp安装流程： 1：全局安装gulp，操作为： npm install gulp -g;2:在根目录下创建 package.json文件，操作为：npm init，之后根据操作输入“名字，版本号，描述”等内容，直接按回车则使用默认值，最后根据提示输入YE...
b站 飞哥 大前端进阶 笔记
06-20
B站飞哥的《大前端进阶笔记》是一份非常实用的学习资料，旨在帮助学习前端技术的人进一步提高自己的技能。笔记包括了前端基础知识的学习、前端开发中常用的框架、库和工具的介绍，以及一些应用实例的实战演练。其中...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值