WebAPIS-04：键盘事件+BOM+location+navigator+history

最新推荐文章于 2022-07-20 16:38:25 发布
最新推荐文章于 2022-07-20 16:38:25 发布
阅读量152 收藏
点赞数
分类专栏： # Web APIS基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44666644/article/details/109170290
版权

1.1. 常用的键盘事件

1.1.1 键盘事件

在这里插入图片描述

在这里插入图片描述

    <script>
        // 常用的键盘事件
        //1. keyup 按键弹起的时候触发 
        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })

        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keypress', function() {
                console.log('我按下了press');
        })
        //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keydown', function() {
                console.log('我按下了down');
        })
        // 4. 三个事件的执行顺序  keydown -- keypress -- keyup
    </script>

1.1.2 键盘事件对象

在这里插入图片描述

在这里插入图片描述

使用keyCode属性判断用户按下哪个键

 <script>
    /*
      键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
      1. 我们的keyup 和keydown事件不区分字母大小写  a 和 A 得到的都是65
      2. 我们的keypress 事件 区分字母大小写  a  97 和 A 得到的是65
    */
    document.addEventListener('keyup', function (e) {
      // console.log(e);
      console.log('up:' + e.keyCode);
      // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
      if (e.keyCode === 65) {
        alert('您按下的a键');
      } else {
        alert('您没有按下a键')
      }
    })
    document.addEventListener('keypress', function (e) {
      // console.log(e);
      console.log('press:' + e.keyCode);
    })
  </script>

1.1.3 案例：模拟京东按键输入内容

当我们按下 s 键， 光标就定位到搜索框（文本框获得焦点）

在这里插入图片描述

注意：触发获得焦点事件，可以使用 元素对象.focus()

    <input type="text">
    <script>
        // 获取输入框
        var search = document.querySelector('input');
		// 给document注册keyup事件
        document.addEventListener('keyup', function(e) {
            // 判断keyCode的值
            if (e.keyCode === 83) {
                // 触发输入框的获得焦点事件
                search.focus();
            }
        })
    </script>

1.1.4 案例：模拟京东快递单号查询

要求：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容。

在这里插入图片描述

在这里插入图片描述

    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        // 获取要操作的元素
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
		// 给输入框注册keyup事件
        jd_input.addEventListener('keyup', function() {
				// 判断输入框内容是否为空
                if (this.value == '') {
                    // 为空，隐藏放大提示盒子
                    con.style.display = 'none';
                } else {
                    // 不为空，显示放大提示盒子，设置盒子的内容
                    con.style.display = 'block';
                    con.innerText = this.value;
                }
            })
        // 给输入框注册失去焦点事件，隐藏放大提示盒子
        jd_input.addEventListener('blur', function() {
                con.style.display = 'none';
            })
        // 给输入框注册获得焦点事件
        jd_input.addEventListener('focus', function() {
            // 判断输入框内容是否为空
            if (this.value !== '') {
                // 不为空则显示提示盒子
                con.style.display = 'block';
            }
        })
    </script>

1.2. BOM

1.2.1. 什么是BOM

​ BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

​ BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

​ BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

在这里插入图片描述

1.2.2. BOM的构成

BOM 比 DOM 更大，它包含 DOM。

在这里插入图片描述

1.2.3. 顶级对象window

在这里插入图片描述

1.2.4. window对象的常见事件

页面（窗口）加载事件（2种）

第1种

window.onload = function(){ }
或者
window.addEventListener('load',function(){ })

window.onload是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

注意：

  1. 有了window.onload 就可以把 JS 代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，

    再去执行处理函数。

  2. window.onload传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload为准。

  3. 如果 addEventListener 则没有限制

第2种

document.addEventListener('DOMContentLoaded',function(){ })

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。

IE9以上才支持

如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

    <script>
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })
        window.addEventListener('load', function() {
            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
            alert(33);
        })
    </script>
调整窗口大小事件
window.onresize = function(){ }
window.addEventListener('resize',function(){ });

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

注意：

  1. 只要窗口大小发生像素变化，就会触发这个事件。

  2. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

    <script>
        // 注册页面加载事件
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
        	// 注册调整窗口大小事件
            window.addEventListener('resize', function() {
                // window.innerWidth 获取窗口大小
                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            })
        })
    </script>

    <div></div>

1.2.5. 定时器（两种）

window 对象给我们提供了 2 个非常好用的方法-定时器。

  • setTimeout()

  • setInterval()

setTimeout() 炸弹定时器
开启定时器
window.setTimeout(调用函数，[延迟的毫秒数]);

setTimeout() 这个调用函数我们也称为 回调函数 callback

注意：

  1. window 可以省略
  2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 '函数名()'三种形式。【第三种不推荐】
  3. 延迟的毫秒数省略默认是0，如果写，必须是毫秒
  4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
普通函数是按照代码顺序直接调用。

简单理解： 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
例如：定时器中的调用函数，事件处理函数，也是回调函数。

以前我们讲的   element.onclick = function(){}   或者  element.addEventListener(“click”, fn);   里面的 函数也是回调函数。


    <script>
        // 回调函数是一个匿名函数
         setTimeout(function() {
             console.log('时间到了');

         }, 2000);
        function callback() {
            console.log('爆炸了');
        }
		// 回调函数是一个有名函数
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
    </script>
案例：5秒后关闭广告

1551320924828

在这里插入图片描述

<body>
    <img src="images/ad.jpg" alt="" class="ad">
    <script>
        // 获取要操作的元素
        var ad = document.querySelector('.ad');
		// 开启定时器
        setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);
    </script>
</body>
停止定时器

在这里插入图片描述
在这里插入图片描述

    <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
		// 开启定时器
        var timer = setTimeout(function() {
            console.log('爆炸了');
        }, 5000);
		// 给按钮注册单击事件
        btn.addEventListener('click', function() {
            // 停止定时器
            clearTimeout(timer);
        })
    </script>
setInterval() 闹钟定时器
开启定时器

在这里插入图片描述

    <script>
        // 1. setInterval 
        setInterval(function() {
            console.log('继续输出');
        }, 1000);
    </script>
案例：倒计时

在这里插入图片描述
在这里插入图片描述

    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素（时分秒盒子） 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数

        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 

        // 2. 开启定时器
        setInterval(countDown, 1000);
		
        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
停止定时器

window.clearInterval(定时器名称)

<body>
  <button class="begin">开启定时器</button>
  <button class="stop">停止定时器</button>
  <script>
    var begin = document.querySelector('.begin');
    var stop = document.querySelector('.stop');
    var timer = null; // 全局变量  null是一个空对象
    begin.addEventListener('click', function () {
      timer = setInterval(function () {
        console.log('ni hao ma');
      }, 1000);
    })
    stop.addEventListener('click', function () {
      clearInterval(timer);
    })
  </script>
</body>
案例：发送短信倒计时

​ 点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。
在这里插入图片描述
在这里插入图片描述

    手机号码： <input type="number"> <button>发送</button>
    <script>
        var btn = document.querySelector('button');
		// 全局变量，定义剩下的秒数
        var time = 3; 
		// 注册单击事件
        btn.addEventListener('click', function() {
            // 禁用按钮
            btn.disabled = true;
            // 开启定时器
            var timer = setInterval(function() {
                // 判断剩余秒数
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);
        });
    </script>

1.2.6. this指向问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。

现阶段，我们先了解一下几个this指向

  1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）

  2. 方法调用中谁调用this指向谁

  3. 构造函数中this指向构造函数的实例

    <button>点击</button>
    <script>
        // this 指向问题 一般情况下this的最终指向的是那个调用它的对象
        // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
        console.log(this);
        function fn() {
            console.log(this);
        }
        window.fn();
        window.setTimeout(function() {
            console.log(this);
        }, 1000);
        // 2. 方法调用中谁调用this指向谁
        var o = {
            sayHi: function() {
                console.log(this); // this指向的是 o 这个对象
            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
                console.log(this); // 事件处理函数中的this指向的是btn这个按钮对象
            })
        // 3. 构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); // this 指向的是fun 实例对象
        }
        var fun = new Fun();
    </script>

1.2.7. location对象

什么是 location 对象

window对象给我们提供了一个location 属性用于获取或设置窗体的URL，并且可以用于解析URL。

因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

URL

在这里插入图片描述
在这里插入图片描述

location 对象的属性

在这里插入图片描述
在这里插入图片描述

案例：5分钟自动跳转页面

在这里插入图片描述
在这里插入图片描述

    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            // console.log(location.href);
            location.href = 'http://www.itcast.cn';
        })
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            } else {
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }
        }, 1000);
    </script>
案例：获取URL参数

在这里插入图片描述
在这里插入图片描述

    <div></div>
	<script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉？  substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您';
    </script>
location对象的常见方法

在这里插入图片描述

    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 记录浏览历史，所以可以实现后退功能
            // location.assign('http://www.itcast.cn');
            // 不记录浏览历史，所以不可以实现后退功能
            // location.replace('http://www.itcast.cn');
            location.reload(true);
        })
    </script>

1.2.8. navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，

该属性可以返回由客户机发送服务器的 user-agent 头部的值。

下面前端代码可以判断用户那个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

1.2.9 history对象

window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。

该对象包含用户（在浏览器窗口中）访问过的URL。

在这里插入图片描述
history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

落花流雨
关注
专栏目录
Web APIs （第四天——DOM-事件高级）
csdnlirui的博客
03-29 836
一、事件对象 pageX/pageY 相对于整个页面左上角的位置 keyup/keydown 二、事件流 2.1 事件流和两个阶段说明 2.2 事件捕获和事件冒泡 2.3 阻止事件流动 三、事件委托 ...
Web APIs——键盘事件、BOM、定时器、js执行机制
qq_43498002的博客
11-17 289
1.1. 常用的键盘事件 1.1.1 键盘事件 键盘事件 触发条件 onkeyup 某个键盘按键被松开时触发 onkeydown 某个键盘按键被按下时触发 onkeypress 某个键盘按键被按下时触发 但是它不识别功能键 比如Ctrl shift箭头等 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', fu
webApi04
qq_36343904的博客
05-22 453
1.1. 常用的键盘事件 1.1.1 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) ...
webapis_04
weixin_44079801的博客
06-26 140
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>获取特殊元素(body,html)</title> </head> <body> <script> //1.获取body元素 var bodyEle = document.body;//获取body元素对象 console.log(bodyEle);
day04 - Web APIs
weixin_46575696的博客
03-17 259
day04 - Web APIs 学习目标： 能够说出常用的3-5个键盘事件 能够知道如何获取当前键盘按下的是哪个键 能够知道浏览器的顶级对象window 能够使用window.onload事件 能够使用window.onresize事件 能够说出两种定时器的区别 能够使用location对象的href属性完成页面之间的跳转 能够使用location对象获取url中的参数部分 能够使用histo...
玩转javascript day04 - Web APIs
weixin_46002223的博客
07-30 285
day04 - Web APIs 学习目标： 能够说出常用的3-5个键盘事件 能够知道如何获取当前键盘按下的是哪个键 能够知道浏览器的顶级对象window 能够使用window.onload事件 能够使用window.onresize事件 能够说出两种定时器的区别 能够使用location对象的href属性完成页面之间的跳转 能够使用location对象获取url中的参数部分 能够使用history提供的方法实现页面刷新 1.1. 常用的键盘事件 1.1.1 键盘事件 [外链图片转存失败,源站可能有防盗
JS-Web-API —— ECMAScript，BOM，DOM
A_Tamir的博客
09-14 492
一个完整的JavaScript实现应该由三部分组成 —— ECMAScript（核心），DOM（文档对象模型），BOM（浏览器对象模型）。 ECMAScript 由ECMA-262定义的ECMAScript与Web浏览器没有依赖关系。ECMAScript定义的只是这么语言的基础。 我们常见的Web浏览器只是ECMAScript实现可能的宿主环境之一。我们学习的这个是浏览器端的...
WebApis学习笔记 更新完毕 2022最新黑马程序员
专注于 前端开发 知识分享
07-20 2027
黑马程序员WebApis学习笔记-复习笔记
web_学习笔记
weixin_43386350的博客
03-05 318
nester_liz笔记
【学习笔记】「Web APIs」JavaScript进阶
weixin_44802075的博客
08-27 375
前言 1.1 JS的组成 1.2 JS基础阶段及Web APIs阶段 2.1 API 2.2 Web API 2.3 API和Web API总结 一、DOM 1、DOM简介 1.1、什么是DOM 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 1.2...
Web API 事件(高级) —— 常用键盘事件
赚钱养自个儿的博客
04-22 377
  目录7、常用键盘事件键盘事件键盘事件对象案例模拟京东按键输入内容模拟京东快递单号查询     学习来源：https://www.bilibili.com/video/BV1HJ41147DG   7、常用键盘事件 键盘事件 注释 1、如果使用 addEventListener 不需要加 on 2、onkeypress 和前面2个的区别是：它不识别功能键，比如左右箭头，shift 等 3、三个...
前端基础 - WebApi （四）键盘事件
真実はただ一つ。
12-25 447
键盘事件 常用的三个 onkeyup：当某个按键被松开的时候后触发 onkeydown：当某个按键被按下的时候触发 onkeypress：当某个按键被按下的时候触发，不识别功能按钮(方向键、shift) 注意： 如果使用addEventListener不需要加on onkeypress和前面的两个事件区别在于它不识别功能键 三个时间的触发顺序是：keydown–keypress–keyup 键盘事件对象 属性 KeyCode：返回该键的ASCII码值 keydown和keyup事件对象是同样的，事
WebAPI第三天学习总结—— this指向问题
weixin_52819925的博客
08-17 130
this指向问题 this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。 现阶段，我们先了解一下几个this指向: 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window） 方法调用中谁调用this指向谁 构造函数中this指向构造函数的实例 示例代码： <!DOCTYPE html> <html lang="en"> <head>
day01_WebAPIs
function_road的博客
05-29 446
day01 - Web APIs 学习目标： 能够通过ID来获取元素 能够通过标签名来获取元素 能够通过class来获取元素 能够通过选择器来获取元素 能够获取body和html元素 能够给元素注册事件 能够修改元素的内容 能够区分innerText和innerHTML的区别 能够修改像div这类普通元素的属性 能够修改表单元素的属性 能够修改元素的样式属性 1.1. Web API介绍 1....
webApi02
qq_36343904的博客
05-19 472
day02 - Web APIs 1.1. 排他操作 1.1.1 排他思想 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 注意顺序不能颠倒，首先干掉其他人，再设置自己 <button>按钮1</button> <button&g...
常用键盘事件
又一个四季在轮回
03-17 3231
onkeyup：某个键盘按键被松开是触发 onkeydown：某个键盘按键被按下时触发（识别所有） onkeypress：某个键盘按键被按下时触发（不识别功能键。shift，ctrl等等） onkeydown和onkeyup不区分字母大小写 可以按照keyCode来判断我们按下了哪个键???? 让我们按下s键就把光标定位到搜索框： .focus():直接可以定位到搜索框 ...
响应键盘事件__2018.11.04
weixin_40316053的博客
11-04 489
Version:1.0 StartHTML:000000212 EndHTML:000055788 StartFragment:000000914 EndFragment:000055731 StartSelection:000001038 EndSelection:000055706 SourceURL:http://www.cppblog.com/jxliu02/articles/4473.h...
Web API-练习
Qiuxuntao的博客
11-02 648
每日作业-Web APIs第01天 1 - 输入框内容显示和隐藏（加强训练） 题目描述 仿世纪佳缘网，显示和隐藏输入框中的提示内容，具体表现如下图： 1）输入框获得焦点，提示内容消失，边框变色 2）输入框失去焦点，如果内容为空，提示内容恢复，边框变色；如果内容不为空，只有边框变色 训练目标 能够操作元素的属性和样式属性 训练提示 1.给文本框注册获得焦点事件，清空value值，改变border的颜色 2.给文本框注册失去焦点事件 3.获取并判断文本框的内容 4.内容为空，恢复提示内容，边框恢复
键盘事件keydown，keypress，keyup以及文本事件
Wu ShanShan的博客
04-08 6724
键盘事件 键盘事件种类： keydown keypress keyup 键盘事件定义： 1. keydown（按键按下时触发） 当按下键盘上的任意按键 2. keypress（与keydown类似，主要用来捕获数字，字母，小键盘） 与keydown事件类似，也是按下按键时触发。 3. keyup（按键抬起时触发） 在松开之前按下的按键时触发 ...
SpringBoot+Swagger-ui：自动化API文档生成与实战
import springfox.documentation.spring.web.plugins.Docket; import springfox.documentation.swagger2.annotations.EnableSwagger2; @Configuration @EnableSwagger2 public class SwaggerConfig { @Bean ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

落花流雨

你的鼓励将是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值