javascript笔记

最新推荐文章于 2023-04-10 11:20:53 发布
最新推荐文章于 2023-04-10 11:20:53 发布
阅读量407 收藏
点赞数 2
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41507897/article/details/79582102
版权

1.javascript入门

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript入门</title>

<!--
    html:负责网页结构
        css:负责网页美观
        javascript:负责用户与浏览器交互
    -->

<!--用javascript来校验用户名（4-14位字母或数字）-->
    <script type="text/javascript">
function checkName(){
//获取用户输入的内容
var userName = document.getElementById("userName").value;
//正则表达式
var reg = /^[a-z0-9]{4,14}$/i;
if(!reg.test(userName)){
alert("用户名格式不对");
return false;
}
return true;
 

</script>

 

2.运算符

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>运算符</title>

<!--
    1)算数运算符：+ - * / %
        2）比较运算符：> < >= <= ==
        3）逻辑运算符：&& || !
        4)三目运算符：表达式？true的结果:false的结果
    -->
<script type="text/javascript">
var a = 10;
var b = true;
document.write("结果为："+(a+b)+"<br/>");

var age = 20;
document.write(age > 18 ? "未成年" : "未成年人");
</script>

</head>
<body>
</body>

</html>

 

3.javascript数据类型和运算符

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript数据类型和运算符</title>

</head>

<!--
    javascript的使用方法：
            (1)内部js:
                (a)在html页面中使用<script>标签，在<script>标签中写js内容
                    (b)弊端：和html代码混杂在一起，不好维护，不好重用
            (2)外部:
    -->

<script type="text/javascript">
/*
常用函数：
alert("提示框");
document.write("向浏览器输出内容")
*/

//alert("提示框");
//document.write("输出内容");

</script>
    
    <!--导入外部js文件-->
    <script src="01.javascript数据类型和运算符.js"></script>

<body>
</body>
</html>

 

4.javascript变量和数据类型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js变量和数据类型</title>

<script type="text/javascript">
/*
(1)定义和赋值变量：var 变量名 = 值
a）使用var关键字定义变量，var课以省略，但是bu建议省略var
b）在js中可以重复定义变量，后面定义的变量会覆盖前面的变量
c）js是弱类型语言，使用var来定义任何数据类型
d）js中变量的类型是由变量的值决定的，所以定义不赋值的变量，就是一个未定义变量undefined

  typeof（变量）：查看变量的数据类型

（2）js数据类型：
a)number
b)string
c)boolean
d)object:对象类型

*/
var a = 10;
var b = 3.14;
var c = 'c';
var d = "hello";
var e = true;
var f = new Object();
document.write("a的值为："+a+",a的数据类型是："+typeof(a)+"<br/>");
document.write("b的值为："+b+",a的数据类型是："+typeof(b)+"<br/>");
document.write("c的值为："+c+",a的数据类型是："+typeof(c)+"<br/>");
document.write("d的值为："+d+",a的数据类型是："+typeof(d)+"<br/>");
document.write("e的值为："+e+",a的数据类型是："+typeof(e)+"<br/>");
document.write("f的值为："+f+",a的数据类型是："+typeof(f)+"<br/>");

</script>

</head>
<body>
</body>

</html>

 

5.javascript类型转换函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>类型转换函数</title>

<script type="text/javascript">
/*
1.string字符串转换成整数：parseInt(变量)
注意：
使用parseInt函数转换（a10不可以转换，10a10可以转换为10）

2.字符串string转换为小数：parseFloat(变量)
*/
var a = "10";
document.write("a的类型是（转换前）："+typeof(a)+"<br/>");
a = parseInt(a);
document.write("a的类型是（转换后）："+typeof(a)+"<br/>");

var b = "3.14";
b = parseFloat(b);
document.write("b的类型是（转换后）："+typeof(b)+",值为："+b+"<br/>");
</script>

</head>
<body>
</body>

</html>

 

6.流程控制语句for-in

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>for-in(类似于java的增强for循环)</title>

<script type="text/javascript">
/*
for-in语句：
for(var 遍历 in 数组/对象){

}
作用:
1)遍历数组
2）遍历对象
*/
//定义一个数组
var arr = [10,20,30,40];
//遍历数组
for(var i = 0; i < arr.length; i++){
document.write(arr[i]+",");
}
document.write("<br/>");

//使用for-in遍历
for(var i in arr){
document.write(arr[i]+",");
}
document.write("<br/>");

//定义对象
function Person(name,age){
this.name = name;
this.age = age;
}
//创建对象
var p = new Person("eric",20);

//遍历对象
//用p[i]形式来获取属性的值
for(var i in p){
document.write(p[i] + "<br/>");
}


</script>
    
</head>
<body>
</body>

</html>

 

7.流程控制语句if,switch,for,while,do-while

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流程控制语句</title>

<script type="text/javascript">
/*
（1）if语句：
条件可以是：
布尔值：true 成立； false 不成立
number：非0 成立； 0 不成立
string：非空字符串 成立； 空字符串 不成立
object：非null 成立； null 不成立 
*/
/*
if(new Object){
alert("条件成立");
}else{
alert("条件不成立");
}
*/

/*
（2）switch语句
switch(变量){
case 选项1:
break;
case 选项2:
break;
default:
默认;
}
case条件：
1）可以是常量：string,number
2)可以是变量（java不能是变量）
3）可以是表达式（java不能是表达式）
*/

/*
（3）for语句


/*
（4）while语句（true的时候才进入循环）
while(表达式){
语句
}
*/
/*
（5）do  while
*/
var i = "a";
switch(i){
case "a":
document.write("你选择了a");
break;
case "b":
document.write("你选择了b");
break;
case "c":
document.write("你选择了c");
break;
default:
document.write("你选择了其它");
}
</script>

</head>
<body>
</body>

</html>

 

8.流程控制语句with

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>with语句</title>

<script type="text/javascript">
/*
with语句：方便函数的调用
with(对象){
直接写对象的方法，无需写对象的名称
}

*/
with(document){
for(var i = 1; i <= 5; i++){
for(var j = 1; j <= i; j++){
write("*&nbsp");
}
write("<br/>");
}

}
</script>

</head>
<body>
</body>

</html>

 

9.函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函数</title>
<script type="text/javascript">
/*
定义函数：
function 函数名称(形式参数列表){
语句
}

调用函数：
函数名称（实际参数列表）;

注意：
（1）js的函数使用function定义，但是形式参数列表不能使用var关键字
（2）js的函数可以有返回值，直接使用return关键字即可，不需要声明返回值类型
（3）js没有重载，如果方法一样，后面的会覆盖前面的方法
（4）js中的形式参数和实际参数可以不一致，依然可以调用
     （实参>形参，结果为：，实参<形参，结果为：NaN）
（5）js的每个函数中都隐藏了一个叫argument的数组，这个数组用于接收函数调用时传递过来的实际参数值
（6）arguments数组接收完实际参数后，会依次从左到右赋值给形式参数如果实际参数大于形式参
数，则丢失剩下的实际参数
*/

function add(a,b){
var result = a + b;
document.write("两个参数的结果为："+result);
//return result;
}

function add(a,b,c){
alert (arguments.length);

var result = a+b+c;
document.write("三个参数的结果为："+result);
}

//var s = add(10,20);
//document.write("返回值："+s);

add(10,30);
</script>
</head>

<body>
</body>

</html>

 

10.内置对象（String对象）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内置对象（方法）（String对象）（</title>
<script type="text/javascript">
/*
内置对象：
String
Number
Boolean
*/
//定义String对象

//方法一：
/*
var str1 = new String("hello");
var str2 = new String("hello");
document.wrete("结果："+(str1==str2)+"<br/>");
//valueOf()返回对象的字符串内容
document.write("结果："+(str1.valueOf() == str2.valueOf()));
*/

//方法二：
/*
var str1 = "hello";
var str2 = "hello";
document.write("结果："+(str1==str2)+"<br/>");
*/

/*
常用方法：
charAt():返回指定索引(下标)的内容；
indexOf():返回首次出现的字符的索引位置；
lastIndexOf():返回最后出现指定字符的索引位置；
fontcolor():直接给字符串添加颜色；
replace():替换指定字符串；
split():使用指定字符串切割字符串，返回指定字符串数组；
substring(start,end):截取字符串；
substring(strat,[length]):截取字符串；

*/

var str = "hellojava";
document.write(str.charAt(4)+"<br/>");
document.write(str.indexOf("a")+"<br/>");
document.write(str.lastIndexOf("a")+"<br/>");
document.write(str.fontcolor("red")+"<br/>");
document.write(str.replace("java","web"+"<br/>"));
document.write(str.substring(5,9)+"<br/>");
document.write(str.substr(5,4)+"<br/>");

/*
var str = "java-net-php-平面";
var strArray = str.split("-");
for(var i = 0; i < strArray.length; i++){
document.write(strArray[i]+",");
}
*/

</script>
</head>

<body>
</body>

</html>

 

11.内置对象（Number对象）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内置对象（Number对象）</title>
<script type="text/javascript">
//方法一：定义Number对象
var num1 = new Number(20);
var num2 = new Number(20);
document.write((num1 == num2) + "<br/>");
document.write(num1.valueOf() == num2.valueOf());

//方法二：定义Number对象
var num1 = 20;
var num2 = 20;

</script>
</head>
<body>
</body>

</html>

 

12.内置对象（Boolean对象）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内置方法（Boolean对象）</title>
<script type="text/javascript">
var b1 = new Boolean(true);
var b2 = new Boolean(false);
</script>
</head>

<body>
</body>

</html>

 

13.内置对象（Math对象）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内置对象（Math对象）</title>
<script type="text/javascript">
/*
常用方法：
1)ceil():向上取整
2)floor():向下取整
3)round():四舍五入取整
4)random():生成一个随机的0-1的整数
5)max():返回最大值
6)min():返回最小值
*/

var num = 3.14;
document.write(Math.ceil(num)+"<br/>");
document.write(Math.floor(num)+"<br/>");
document.write(Math.round(num)+"<br/>");
document.write(Math.random(num)+"<br/>");
document.write(Math.max(num)+"<br/>");
document.write(Math.min(num)+"<br/>");

</script>
</head>

<body>
</body>

</html>

 

14.内置对象（Date对象）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内置对象（Date对象）</title>
<script type="text/javascript">
//创建日期
var date = new Date();
document.write(date+"<br/>");

//打印日期：格式 2018年02月18日14时30分40秒
//（java中用simpleDateFormat对象 yyyy-MM-dd格式化）

//获取年份
document.write(date.getFullYear()+"年");

//获取月份(返回的是0-11月，所以要加上1)
document.write(date.getMonth()+1+"月");

//获取日
document.write(date.getDate()+"日");

//获取时
document.write(date.getHours()+"时");

//获取分
document.write(date.getMinutes()+"分");

//获取秒
document.write(date.getSeconds()+"秒");

//获取星期
document.write("星期"+date.getDay());

</script>
</head>
<body>
</body>

</html>

 

15.内置对象（Array对象）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Array数组</title>
<script type="text/javascript">
//方法一：创建数组
/*
var arr = new Array(3);
//给数组赋值
arr[0] = 10;
arr[1] = 20;
arr[2] = 30;
//遍历数组
for(var i = 0; i < arr.length; i++){
document.write(arr[i]+"<br/>");
}
*/

//方法二：可以不指定长度
/*
var arr = new Array();
//给数组赋值
arr[0] = 10;
arr[1] = "hello";
arr[2] = "ture";
//遍历数组
for(var i = 0; i < arr.length; i++){
document.write(arr[i]+"<br/>");
}
*/

//方法三：指定具体内容
/*
var arr = new Array(20,true,"hello");
for(var i = 0; i < arr.length; i++){
document.write(arr[i]+"<br/>");
}
*/

//方法四：
/*
var arr = [10,true,"hello"];
for(var i = 0; i < arr.length; i++){
document.write(arr[i]+"<br/>");
}
*/

/*
常用方法：
1)join()：使用指定字符串，把所有数组元素拼接，最终组成一个新的字符串(java php --> java-php)
2)reverse():反转数组中的元素
*/
var arr = ["java",".net","php"];
var str = arr.join("-");
document.write(str);
document.write("<br/>");

for(var i = 0; i <arr.length; i++){
document.write(arr[i]);
}
document.write("<br/>");
arr1 = arr.reverse();
for(var i = 0; i <arr.length; i++){
document.write(arr1[i]);
}

</script>

</head>
<body>
</body>

</html>

 

16.自定义方法（方法1）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义对象(方法1)</title>
<script type="text/javascript">
/*
java中用class定义对象
js中用function定义对象
*/

/*
方式一：
function 对象名称（形式参数）{
定义属性
定义方法
}
*/ 
function Person(name,age){
//定义属性
this.name = name;
this.age = age;

//定义方法
this.say = function(){
alert("这是一个对象的方法");
}
}

//创建对象
var p = new Person("张三",18);
//查看属性值
document.write(p.name);
document.write(p.age);
//调用方法
p.say();

//使用for-in遍历数组
for(var i in p){
document.write(p[i]+"<br/>");
}
</script>
    
</head>
<body>
</body>

</html>

 

17.自定义方法（方法2）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义对象（方法二）</title>


<script type="text/javascript">
/*
定义对象（方式二）：无参数的构造方式
*/

//定义对象
function Person(){

}
//创建对象
var p = new Person();
//追加属性
p.name = "张三";
p.age = 18;
//追加方法
p.say = function(){
alert("这是一个函数");
}
//查看属性值
document.write(p.name);
document.write(p.age);
//调用对象方法
p.say();
document.write("<br/>");
for(var i in p){
document.write(p[i]+"<br/>");
}

</script>
</head>

<body>
</body>

</html>

 

18.自定义方法（方法3）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义方法三</title>
<script type="text/javascript">
/*
定义对象（方式三）：
*/

//创建对象
//Object可以作为任意对象的模板
var p = new Object();
//追加属性
p.name = "张三";
p.age = 18;
//追加方法
p.say = function(){
alert("这是一个函数");
}
//查看属性值
document.write(p.name);
document.write(p.age);
//调用对象方法
p.say();
document.write("<br/>");
for(var i in p){
document.write(p[i]+"<br/>");
}

</script>
</head>

<body>
</body>

</html>

 

19.自定义方法（方法4）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义方法四</title>
<script type="text/javascript">
/*
定义对象（方式四）：使用字面量的形式创建对象
*/


//创建对象
var p = {
//定义属性(属性名:属性值),用","分隔
"name":"张三",
"age":"18",
//定义方法
"say":function(){
alert("这是一个方法");
}

};
//查看属性值
document.write(p.name);
document.write(p.age);
//调用对象方法
p.say();
document.write("<br/>");
for(var i in p){
document.write(p[i]+"<br/>");
}

</script>

</head>

<body>
</body>

</html>

 

20.原型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原型</title>


<!--
问题：不使用ArrayUtil工具，但也想实现search和max方法的功能
    预期解决方法：想把search和max方法设计到Array内置对象中
    
    问题：如何给Array对象扩展这两个方法
    
    使用原型属性给Array对象添加方法
    什么是原型:
        (1)js的每隔对象中都包含有原型属性（prototype）
                (2)如果某个对象的原型属性添加了方法，那么添加的这个方法就会自动的添加到当前对象的方法中
                
                cunction Array(){
                //属性
                    this.prototype();//原型对象
                }
-->
<script src="ArrayUtil.js"></script>


<script type="text/javascript">
/*
给Array追加一个search和max方法
*/
Array.prototype.search = function(){
//遍历
for(var i = 0; i < this.length; i++){
if(this[i] == target){
return i;
}
}
return -1;
}

Array.prototype.max = function(){
//存储最大值
var max = this(0);
for(var i = 1; i < this.length; i++){
if(this[i] > max){
max = this[i];
}
}
return max;
}




var arr = [10,43,21,65,3,87];
//创建ArrayUtil对象
var arrayutil = new ArrayUtil();
var index = arrayutil.search(arr,21);
document.write("位置是："+index);

var max = arrayutil.max(arr);
document.write("最大值是："+max);
</script>

</head>
<body>
</body>

</html>

 

21.BOM编程(window对象)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BOM编程（window对象）</title>
<script type="text/javascript">
/*
(1)open():在一个窗口中打开页面
  _self / _blank: 在原 / 新窗口打开页面
  width height 窗口宽和高
  toolbar=1/0 :是否显示任务栏

(2)setInterval():设置定时器（无数次循环）
  参数1：指定时的任务（方法/函数）
  参数2：设置定时打开的毫秒数

(3)clearInteral():清除定时器
  
(4)setTimeout():设置定时器(只执行一次)
(5)clearTimeout():清除定时器

(6)alert():提示框
(7)confirm():确认的提示框
(8)propmt():输入提示框

*/
//(1)open():在一个窗口中打开页面
function testOpen(){
window.open("05.例：网页时钟.html","_blank","windth=300px;hight=300px;toolbar=0");
}

var taskId;
//2)setInterval():设置定时器
function testInterval(){
taskId = window.setInterval("testOpen()",3000);
}

//(3)clearInteral():清除定时器
function testClearInteral(){
window.clearInterval("taskId");
}

//(6)alert():提示框
function testAlert(){
window.alert("提示框");
}

//(7)confirm():确认的提示框
function testConfirm(){
var flag = window.confirm("确认删除吗？一但删除将不能恢复！请慎重");
if(flag){
alert("正在删除");
}else{
alert("取消删除");
}
}

//(8)propmt():输入提示框
function testPrompt(){
var flag = window.prompt("请输入密码");
if(flag == true){
alert("密码正确，正在转账") ;
}else{
alert("密码错误，请重新输入");
}
}

</script>
</head>

<body>
<input type="button" value="open()" οnclick="testOpen()"/>
    <input type="button" value="setInteval()" οnclick="testInterval()" />
    <input type="button" value="clearInteval()" οnclick="testClearInterval()" />
    <input type="button" value="alert()" οnclick="testAlert()"/>
    <input type="button" value="confirm()" οnclick="testConfirm()"/>
    <input type="button" value="prompt()" οnclick="testPrompt()"/>  
</body>

</html>

 

22.BOM编程（location）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BOM编程（location对象）</title>
<script type="text/javascript">
/*
（1）href属性：代表地址栏的URL（统一资源定位符）
作用：获取url或设置url

（2）reload方法：刷新当前页面
*/

//（1）href属性
function testHref(){
window.location.href="05.例：网页时钟.html";
}

//（2）reload方法
function testReload(){
//刷新当前页面
window.location.reload();
}

function testRefresh(){
//实现定时刷新
window.setInterval("testReload()",2000);
}

</script>
</head>

<body>
<input type="button" value="跳转" οnclick="testHref()"/>
<input type="button" value="定时刷新" οnclick="testReload"/>
</body>

</html>

 

23.BOM编程（history）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BOM编程（history对象）</title>
<script type="text/javascript">
/*
history:
(1)forward():前进到下一页
（2）back():后退到上一页
（3）go():跳转到某一页（正整数：前进； 负整数：后退）
*/
function testForward(){
//window.history.forward();
window.history.go(-1);
}

function testBack(){
//window.history.back();
window.history.go(1);
}
</script>
</head>

<body>
<input type="button" value="前进" οnclick="testForward()"/>
<input type="button" value="后退" οnclick="testBack()"/>
</body>

</html>

 

24.BOM编程（screen对象）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BOM编程（screen对象）</title>
<script type="text/javascript">
/*

*/
document.write(window.screen.availWidth+"<br/>");
document.write(window.screen.availHeight+"<br/>");
document.write(window.screen.width+"<br/>");
document.write(window.screen.height+"<br/>");
</script>
</head>

<body>
</body>

</html>

 

25.事件编程

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件编程</title>
<script type="text/javascript">
/*
js事件编程的三个要素：
（1）事件源：html标签
（2）事件：click dblclick mouseover......
（3）监听器：函数


js事件分类：
（1）点击相关：
单击：onclick
双击：ondblclick
（2）焦点相关：
聚焦：onfocus
失去焦点：onblur
（3）选项相关：
改变选项：onchange
（4）鼠标相关：
鼠标经过：onmouseover
鼠标移除：onmousout
（5）页面加载：
页面加载：onload 
*/

<!-- (2)监听器-->
function test(){
alert("触发了事件");
}

</script>
</head>

<body>
<!-- (1)事件源 -->
<!-- (3)onclick 注册监听器 -->
<input type="button" value="按钮" οnclick="test()"/>
</body>

</html>

 

26.DOM编程入门

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM编程入门</title>
<script type="text/javascript">
/*
DOM编程：
文档对象模型编程（树状图）
步骤：
（1）找到需要控制的标签对象
（2）通过标签对象的属性和方法改变标签

document对象：
代表了整个html文档
如果要找到对应的标签对象，就需要从document对象开始查询
*/
</script>
</head>
<body>
</body>

</html>

 

27.通过document对象的集合查询标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM编程（查询标签对象方法）（通过document对象的集合）</title>
</head>

<body>
<form ><img src=""/><img src=""/><a href=""></a></form>
    <form ><img src=""/></form>
</body>
<script type="text/javascript">
/*
通过document对象的集合
作用：获取多个或者同类标签

all:
froms：获取from标签对象
images：获取img标签对象
link：获取a超链接标签对象

*/
//var nodeList = document.all;//返回所有标签对象的数组
//var nodeList = document.forms;//返回from标签对象的数组
//var nodeList = document.images;//返回img标签对象的数组
var nodeList = document.links;//返回from标签对象的数组

//遍历标签对象
//nodeName:获取标签名称
for(var i = 0; i < nodeList.length; i++){
alert(nodeList[i].nodeName);
}

</script>

</html>

 

28.通过关系查询标签对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过关系查询标签对象</title>
<script type="text/javascript">
/*
树状图（节点关系（Node））
（1）父节点：parent属性
（2）子节点：child属性
第一个子节点：firstChild
最后一个子节点：lastChild
（3）兄弟节点：sibling属性
上一个兄弟节点：previousSibling
下一个兄弟节点：nextSibling

*/

</script>
</head>

<body>
<form>
    <a href="">超链接</a>
        <input type="text"/>
        <input type="button"/>
    </form>
    
    <form>
    <a href="">超链接</a>
    </form>

</body>
<script type="text/javascript">
/*
树状图（节点关系（Node））
（1）父节点：parent属性
（2）子节点：child属性
第一个子节点：firstChild
最后一个子节点：lastChild
（3）兄弟节点：sibling属性
上一个兄弟节点：previousSibling
下一个兄弟节点：nextSibling
注意：
（1）childNodes属性，lastChild属性，firstChild属性获取的子节点包含了以下元素
标签1 空格3 换行3 注释8
（2）如何在这些子节点中筛选出标签（nodeType）
使用nodeType取出值为1的所有标签即可
*/
//得到超链接a标签（获取第一个a标签的对象）
aNode = document.links[0];
//得到标签
var formNode = aNode.parentNode;
alert("formNode.nodeName");

//得到form的子节点
var nodeList = formNode.childNodes;
for(var i = 0; i < nodeList.length; i++){
if(nodeList[i].nodeType==1){
document.write(nodeList[i].nodeName+",字节类型："+nodeList[i].nodeType+"<br/>");
}
}

//第一个子节点
var firstChid = formNode.firstChild;
alert(firstChild.nodeName);

//最后一个子节点
var lastChid = formNode.lastChild;
alert(lastChild.nodeName);

var aNode = document.links[1];
//得到下一个兄弟节点
var next = aNode.nextSibling;
alert(next.nodeName);

//得到上一个兄弟节点
var previous = next.previousSibling;
alert(previous.nodeName);

</script>

</html>

 

29.通过document方法查询标签对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过document方法查询标签对象</title>
<script type="text/javascript">
/*
document.getElementById("id属性值")：最常用
注意：
(1)使用该方法获取的标签一定要有id属性
(2)在同一个html页面中不要出现两个同名的id

document.getElementsByName("name属性值")：获取同name属性名的标签
注意：
（1）使用该方法获取的属性一定要有name标签

document.getElementsByTagName("标签名")：获取相同标签名的标签列表

*/

function getValue(){
//获取输入框的内容
//（方式1）得到输入框标签对象
//var useName = document.getElementById("useName");

//（方式2）
//var userName = document.getElementsByName("user")[0];

//(方式3)
var userName = document.getElementsByTagName("input")[0];

//获取标签对象的value属性值
alert(userName.value);

}

</script>
</head>

<body>
用户名：<input type="text" id="useName" name="user" οnblur="getValue()"/> 
</body>

</html>

 

30.修改标签对象属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>修改标签对象属性</title>
</head>

<body>
<span id="mySpan"></span>
    <input type="text" id="userName" value="4-12位的字母或数字"/>
    <hr/>
    <img src="图片/01.jpg" width="100px" height="100px"/>
    <input type="button" value="切换图片" οnclick="changeImg()"/>
    <hr/>
    <input type="button" value="全选" οnclick="quanxuan()"/>
    <input type="checkbox" value="篮球" name="hobit"/>篮球
    <input type="checkbox" value="足球" name="hobit"/>足球
    <input type="checkbox" value="羽毛球" name="hobit"/>羽毛球
</body>
<script type="text/javascript">
/*
常用的需要修改的属性：
（1）innerHTML属性：修改标签体内容
<span>xxx</sspan> <div></div> <select></select>
innerHTML:设置标签内的内容
inner Text：（在IE中可用，浏览器兼容性问题）

（2）value属性：修改value属性值
input type="text"

（3）src属性：修改图片的src属性

（4）checked属性：修改单选或者多选的默认值
<input type="radio"/"checked" checked=""/>
true表示选中状态  false表示没选中状态
*/
//获取到span标签对象
var mySpan = document.getElementById("mySpan");
//设置标签内的HTML内容
mySpan.innerHTML = "<h3>标题</h3>";

//获取input对象
var userName = document.getElementById("userName");
//清空value内容
userName.value = "";

function changeImg(){
//得到标签对象
var img = document.getElementsByTagName("img")[0];
img.src = "图片/02.jpg";
}

function quanxuan(){
//var lanqiu = document.getElementsByName("hobit")[0];
//alert(lanqiu.checked);
//lanqiu.checked = true;

var hobitList = document.getElementsByName("hobit");
for(var i=0; i<hobitList.length; i++){
hobitList[i].checked = true;
}
}
</script>

</html>

 

31.设置标签属性练习checked

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置标签属性练习checked属性</title>
<script type="text/javascript">
/*
//(方式一)
function checkAll(){
//获取item的选项
var itemList = document.getElementsByName("item");
for(var i=0; i<itemList.length; i++){
if(itemList[i].checked){
itemList[i].checked = false;
}else{
itemList[i].checked = true;
}

}
}
*/


//方式二(this代表当前对象，this传过来可以用一个变量(obj)去接)
//获取全选的input的checked状态
function checkAll(obj){
var status = obj.checked;
var itemList = document.getElementsByName("item");
for(var i=0; i<itemList.length; i++){
itemList[i].checked = status;
}
}


//总金额
function getSum(){
//判断哪些被选中
var itemList = document.getElementsByName("item");
var result = 0;
for(var i=0; i<itemList.length; i++){
if(itemList[i].checked = true){
//计算金额
var itemValue = itemList[i].value;
//value属性一定是string类型
//所以要强转(把String类型转换成number类型)
itemValue = parseInt(itemValue);
result += itemValue;
}
}
//把结果放到span中显示
var sumid = document.getElementById("sumid");
sumid.innerHTML = result+"元";
}

</script>
</head>

<body>
<div>商品列表</div>
<input type="checkbox" name="all" οnclick="checkAll(this)"/>全选<br/>
    <input type="checkbox" name="item" value="3000"/>笔记本电脑3000元<br/>
    <input type="checkbox" name="item" value="3000"/>笔记本电脑3500元<br/>
    <input type="checkbox" name="item" value="3000"/>笔记本电脑3800元<br/>
    <input type="checkbox" name="item" value="3000"/>笔记本电脑4200元<br/>
    <input type="checkbox" name="item" value="3000"/>笔记本电脑4500元<br/>
    <input type="checkbox" name="item" value="3000"/>笔记本电脑5000元<br/>
    <input type="checkbox" name="all" οnclick="checkAll(this)"/>全选<br/>
    <input type="button" value="总金额" οnclick="getSum()"/><span id="sumid"></span>
</body>
 

</html>

 

32.标签对象方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标签对象方法</title>
<script type="text/javascript">
/*
标签对象方法：

（1）添加相关的：
document.createElement("标签名") 创建节点（标签）对象
setAttribute("name","value") 设置节点（标签）的属性

（2）插入相关的：
appendChild(标签对象) 添加子节点对象
insertBefore(新标签对象,指定的对象) 在指定的对象面前添加子节点对象

（3）删除相关的：
removeChild("标签对象") 删除子节点
*/
//点击添加按钮，在按钮1的后面添加一个按钮2
function addItem(){
//创建一个按钮（标签）的对象
var input = document.createElement("input");
//设置按钮（标签）的属性
input.setAttribute("type","button");
input.setAttribute("value","按钮2")
//把新建的按钮插入到相应的html页面中
//得到body对象
var bodyNode = document.getElementsByTagName("body")[0];
//把新建的按钮2插入到body对象的子节点中
bodyNode.appendChild(input);

/*
//把新建的按钮2插入到“添加”和“按钮1”的中间
//得到按钮1对象
var btn1 = document.getElementById("btn1");
//把按钮2插入到按钮1的前面
bodyNode.insertBefore(input,btn1);
*/
}

//删除按钮
function delItem(){
//找到需要删除的节点对象
var bodyNode = document.getElementsByTagName("body")[0];
//获取最后一个子标签
var lastChild = bodyNode.lastChild;
//删除子标签
bodyNode.removeChild(lastChild);
}
</script>
</head>

<body>
<input type="button" value="添加" οnclick="addItem()"/>
    <input type="button" value="删除" οnclick="delItem()"/>
    <input type="button" value="按钮1" id="btn1"/>
</body>

</html>

 

33.正则表达式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>正则表达式</title>
<script type="text/javascript">
/*
创建正则表达式：var 变量 = /正则规则/

[a-z]:表示匹配字母
   * :0个或多个元素
   + :1个或多个元素
   ? :0个或1个元素
{n,m}:大于n,小于m的个数
   
正则方法：
.test():用于匹配指定字符串
返回true：表示匹配成功
返回false:表示匹配不成功

注意：
在js的正则表达式中，如果遇到了符合规则的表达式，就表示匹配成功（与java有所不同）
如果需要和java一样完全匹配，需要添加边界符号

开始标记：^
结束标记：$

*/

var str = "abc";
var reg = /^[a-z]{2}$/;

if(reg.test(str)){
alert("匹配成功");
}else{
alert("匹配失败")
}

</script>
</head>

<body>
</body>
</html>

高国才
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript笔记
03-18
老杜JavaScript视频笔记，（自行添加、省略了部分）
JavaScript页面的简单运算
wojiaohuangyu的专栏
07-20 863
购物简易计算器 section{ background-color:#C9E495; width:260px; height:320px; text-align:center; padding-top:1px; margin-top:12px; } .textBaroder{ border-width:1px; border-style
php变量永久,永久设置私有类变量PHP
weixin_42515058的博客
04-02 242
首先,当你重新实例化类时,你设置的变量不会被破坏.这就是封装,意味着类的每个实例都有自己的一组属性,这对OOP至关重要.它更像是从每个实例化的基类定义复制的值,这意味着您将获得默认值.如果您希望变量在类的所有实例中可用,那么这就是静态变量的用途.class globalVars{private static $final = "Default Foo ";private $instance = "...
php修改对象数组属性,php删除多重数组对象属性，重新赋值的方法
weixin_33427833的博客
03-09 356
php删除多重数组对象属性，重新赋值的方法实例：sphinx搜索出来的结果，要去掉某个属性值：$cl = new SphinxClient ();$query = $cl->Query ( $keyword, $index );方法一，直接删除属性：foreach ( $query['matches'] as $k => $val ) {unset($query['matches'][...
JSON详解
qq_48571159的博客
09-09 152
JSON JavaScript Object Notation JS对象简谱 , 是一种轻量级的数据交换格式. 对象格式 一个对象, 由一个大括号表示，括号中通过键值对来描述对象的属性 格式: 键与值之间使用冒号连接, 多个键值对之间使用逗号分隔. 键值对的键 应使用引号引住 (通常Java解析时, 键不使用引号会报错. 而JS能正确解析.) 键值对的值, 可以是JS中的任意类型的数据 数组格式 [元素1,元素2…] 转为Java对象后为ArrayList集合 对象数据代码 java class Book
Java定义对象并赋值，使用for循环修改对象某一属性的值，保存到List集合中，但最终List中结果都是最后一次for循环修改的值
六六的小帅的博客
06-24 4428
Java代码bug
狂神说系列 JavaScript笔记
06-15
狂神说系列 JavaScript笔记
js两种自定义修改对象属性的方式
Rookie
03-16 3402
文章目录前言Object.defineProperty()ProxyProxy校验器结语 前言 先看下面一段常规的object赋值代码： const people = { name: 'Rookie', age: 18 }; people.age = 20;// set people.age;// get 现在我们想要自定义实现people的set和get，那么应该如何实现呢？ 下面我们介绍两种实现方式：Object.defineProperty()，Proxy Object.define
修改数组中对象的值 （各种方法）
热门推荐
sunhy007的博客
10-08 1万+
<script> const Object = [ {key:'name1', text:'名字1'}, {key:'name2', text:'名字2'}, {key:'name3', text:'名字3'}, {key:'name4', text:'名字4'}, {key:'name5', text:'名字5'}, {key:'name6', text:'名字6'} ]
js对象
Eliauk的博客
09-09 183
对象 object 类 class 类是对象的抽象 对象是类的实例化 字面量方式定义对象，格式为 let obj={ key:value,key1:value} let zhangsan = { username: '张三', age: 20, gender: '男', hobbies: ['篮球', '唱跳'], eat: function () {
PHP中如何设置对象的属性？底层原理是什么？
最新发布
长风破浪会有时的博客
04-10 533
具体来说，PHP 中的对象模型是基于哈希表的，对象的属性实际上是保存在对象的哈希表中的一个键值对，属性名称作为键，属性值作为值。当设置对象的属性时，PHP 会在对象的哈希表中查找相应的键，如果存在则更新对应的值，否则会在哈希表中新增一个键值对。当访问对象的属性时，PHP 会在对象的哈希表中查找相应的键，并返回对应的值。底层原理是 PHP 的对象模型，PHP 中的对象是基于类的，类定义了对象的属性和方法。这是因为 PHP 的对象模型是基于哈希表的，可以在运行时动态地修改对象的哈希表。
js基础语法练习1 ---- js篇
RONG_YAO的博客
07-22 739
目录 一、平均成绩计算 二、圆的周长面积算 三、闰年计算 四、会话竞拍 五、弹出框 六、输出到页面 七、计算器 7.1、单个输入框的计算器 7.2、多个输入库框的计算器 7.3、税务计算 7.4、简易计算器 八、排列 九、颜色切换 十、图片切换 一、平均成绩计算 <HTML> <HEAD> <META http-equiv="Cont...
foreach对象php,foreach-遍历对象并更改值-php5
weixin_36337403的博客
03-10 541
我在PHP中有一个简单的wee清理功能它接受一个值或一组值,并进行一些输入清理.现在,我正在使用mysqli,它将行作为对象来获取,因此我需要能够将其应用于对象和数组function filter_out($output=''){if($output != ''){// i.e passed $_POST arrayif(is_array($output)){$newoutput = array(...
教案：JavaScript第1章
默然说话
04-03 1936
声明：由于版权等方面的原因，本文特意隐去了部分内容，由此造成的不便请谅解。如果本文对你有所帮助，请跟贴以示支持，谢谢。授课教师：牟勇课时：100分钟 l  本章技能目标n 掌握脚本的基本结构n 会使用JavaScript语言的基本语法n 会使用高级语法－自定义函数functionl  本章重点nJavaScript的基本语法n自定义函数的使用l 
DW —— 简易计算器 （JavaScript）
weixin_52626164的博客
05-24 3033
一、做计算器内部的计算之前就要先把页面的布局设计好 二、每一个放入数据的地方就是一个文本框，那个加减乘除就是一个按钮 也就是body标签对中的代码设置。 <body> <form id="myform" name="myform" method="post"> <table width="271" border="1" cellpadding="1" cellspacing="0"> <tbody> <tr> <
js做简易计算器
从南到北
02-13 629
第一步准备需要用到的界面。（如下图） 代码就不写了，也很简单 第二步编写js代码。 function lucky(j) { var l=parseInt(document.myform.txtNum1.value) var y=parseInt(document.myform.txtNum2.value) if(j=="+") var ly=l+y if(j=="-") var ly=l...
JavaScript-简易计算器
weixin_46217915的博客
01-22 500
目标：用H5+JS制作一个简易的计算器 效果： 我们所要达到的效果就是在第一个第二个文本框输入数字，按一个按钮在计算结果内输出结果 初学JS，其实我觉得JS和java差不多，写过java感觉还不是很难 代码奉上： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script type="

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值