前端:JS/23/JS内置对象(String对象,Array对象,Date对象,Boolean对象,Number对象,Math对象),实例:求圆的面积,求直角三角形

JS内置对象

1,String对象

字符串对象,提供了对字符串进行操作的属性和方法

2,Array对象

数组对象,提供了数组操作方面的属性和方法

3,Date对象

日期时间对象,可以获取系统的日期时间信息;

4,Boolean对象

布尔对象,一个布尔变量就是一个布尔对象;(没有可用的属性和方法)

5,Number对象

数值对象,一个数值变量就是一个数值对象;

6,Math对象

数学对象,提供了数学运算方面的属性和方法,

1,String对象的属性和方法

1,length:获取字符串的长度,例:var len=strObj.length;
2,toLowCase() :将字符串中的字母转成全小写,例:strObj.toLowerCase()
3,toUpperCase() :将字符串中的字母转成全大写,例:strObj.toUpperCase()
4,charAt(index) :返回指定下标位置的一个字符,如果没有找到则返回一个空字符串。
  语法:strObj.charAt(index)
参数:index 下标;
1
5,indexOf() :返回一个子字符串在原始字符串中的索引值(从左往右查找的第一个符合条件的索引);如果没有找到,则返回-1;
语法:strObj.indexOf(substr)
参数:substr代表要查找的一个子字符串;
6,lastIndexOf() :在原始字符串,从右往左查找某个子字符串,如果没有找到,则返回-1;
7,substr() :在原始字符串,返回一个子字符串
格式:strObj.substr(startIndex [,length]);
说明:从下标startIndex起,返回length个字符;
参数:startIndex表示输出的起始索引号,length(可选项):返回几个字符;不选的话则输出从起始索引以后的所有字符;
8,substring() :在原始字符串中返回一个子字符串
语法:strObj.substring(startIndex [,endIndex])
说明:返回从startIndex开始索引值到endIndex结束索引之间的所有字符;
参数:startIndex :代表开始索引值(此索引对应的字符会输出);
endIndex :可选项,代表结束索引值(此索引对应的字符不被输出),如果省略,一般返回直到末尾的所有的字符

提示:如果省略第二个参数,则substr()和substring()输出结果是相同的。
9,split(用以分割的符号):将一个字符串切割成若干段;返回一个数组,分割符号不会进入数组;
语法:var arr =strObj.split(",");
例:输出今天为星期几

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSString输出今天的星期</title>
    <script type="text/javascript">
        var str = "星期日,星期一,星期二,星期三,星期四,星期五,星期六";
        var date = new Date();//获取系统日期对象
        var week = date.getDay();//获得日期,数值型,0-星期天,1-星期一,2-星期二...
        var arr = str.split(",");//切割字符串得到一个数组
        document.write("今天的日期是:" + arr[week]);//输出今天的日期

        /* 字符之间是以空字符('')隔开的 */
        var str = "斗罗大陆第103集";
        var arr = str.split("");
        document.write("<br/>" + arr);

    </script>


</head>

<body>

</body>

</html>

显示效果如下:
2

2,(Array)数组对象的属性和方法

1,length属性:动态获取数组长度,如:var len =arrObj.length;
2,join() :将一个数组连接成一个字符串,返回一个字符串;该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的。
语法:arrObj.join(连接号)
说明:将一个数组,用指定的“连接号”连接成一个字符串,连接号将进入字符串。
注意:strObj.split(“分割号”)和arrObj.join(“连接号”)的效果刚好相反;
3,reverse() :将数组元素顺序颠倒反转;
语法:arrObj.reverse();
说明:此方法是对arrObj直接操作,输出结果仍赋给原来的arrObj,跟i++类似,i+1后直接赋给i。
例:用户输入一个字符串后,把其反转顺序并首字母大写,其它字母小写,最后alert弹窗显示出来;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS对Array对象的一些操作</title>
    <script type="text/javascript">
        var str = prompt("请输入任意字符", "");//用户输入字符串
        var arr = str.split("");//分割字符
        arr.reverse();//数组中数组元素颠倒
        for (var i = 0; i < arr.length; i++) {//对数组中的元素循环
            if (i == 0) {//首字母大写
                arr[0] = arr[0].toUpperCase();
            } else {//其它字母小写
                arr[i] = arr[i].toLowerCase();
            }
        }
        var strOut = arr.join("");//把数组用""连接为字符串,(连接号默认为","alert("你输入的字符串反转并小写(首字母大写)后:" + strOut);//输出最终操作完成的结果
    </script>


</head>

<body>

</body>

</html>

显示效果如下:
1
2

数组元素的删除和添加的一些方法

注意:以前的delete运算符,只能删除数组元素的值,值为undefined,从而所占空间还在,总长度没变(arrObj.length),数组元素的添加也不能动态的向前添加,只能往后添加;
3
4,shift() :删除数组中第一个元素,返回删除的那个值,并将长度减1;
5,pop() :删除数组中最后一个元素,返回删除的那个值,并将长度减1;
6,unshift() :往数组最前面再添加一个或多个数组元素,长度动态改变;
7,push() :往数组结尾再添加一个或多个数组元素,长度要改变,例:arrObj.push(“a”,“b”,“c”);

3,Date对象

Date对象和String对象不太一样,定义了一个字符串,其实就已经是一个String对象了,就可以直接调用属性和方法;
Date对象的使用,必须使用new关键字先创建一个Date对象,否则无法调用Date对象的属性和方法,例:var date =new Date();

创建Date对象的方法

1,创建此时此刻的日期和时间对象实例
var today =new Date();//today就是刚创建的Date对象实例;
2,创建指定时间戳的日期对象实例,参数是时间戳。
时间戳:是指某一个时间距离1970年1月1日0时0分0秒,过去了多少毫秒值(1秒=1000毫秒)
var time =new Date(10000);//时间是1970年1月1日0时10秒
3,指定一个字符串的日期时间信息,参数是一个日期时间字符串
var timer =new Date(“2015/5/25 10:00:00”);
例:计算一下你活了多久(精确到秒)
4,指定多个数值参数
var timer =new Date(2015,4,25 [,10,20,0]);//参数依次为:年,月,日 [,时,分,秒]

Date对象的属性和方法

1,getFullYear() :获取四位的年份
2,getMonth() :获取月份,取值0-11;使用时记得+1;
3,getDate() :获取一个月份中的几号,取值1-31;
4,getHours() :获取小时数;
5,getMinutes() :获取分钟数;
6,getSeconds() :获取秒数;
7,getMilliseconds() :获取毫秒;
8,getDay() :获取星期;
9,getTime() :获取毫秒值,距离1970年1月1日00:00:00 至今的毫秒值;

4,Math数学对象

Math对象是一个静态对象,换句话说:在使用Math对象,不需要创建实例;
1,Math.PI :圆周率
2,Math.abs() :绝对值;如:Math.abs(-9);//结果为9
3,Math.cell() :向上取整,进一去尾(整数加1,小数去掉)例:Math.cell(10.2);//结果为11
4,Math.floor() :向下取整,直接去尾(整数不动,小数去掉)例:Math.floor(3.33333);//结果为3
5,Math.round() :四舍五入 ,例:Math.round(4.5);//结果为5
6,Math.pow(x,y) :求x的y次方,例:Math.pow(2,3);//结果为8
7,Math.sqrt() :求平方根,例:Math.sqrt(121);//结果为11
8,Math.random() :返回一个0-1的之间的随机小数,0<=Math.random()<1,例:Math.random();//其中一次结果为0.3457576984439894
4
求min-max之间的随机整数的公式:Math.floor(Math.random()*(max-min)+min)
例:网页随机背景色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS网页随机背景色</title>
</head>

<body>

</body>
<script type="text/javascript">
    var min = 100000;
    var max = 999999;
    var random = Math.floor(Math.random() * (max - min) + min);
    document.body.bgColor = "#" + random;
    /* document代表网页对象
    body对象是document对象的子对象
    body对象有一个bgColor属性
    除了body以外(body为内定对象),其它的标记的访问,必须使用ID来访问
     */
</script>

</html>

显示效果如下:
321

实例:求圆的面积,求直角三角形的斜边长

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS求圆的面积,求直角三角形的斜边长</title>
    <script type="text/javascript">
        var r = prompt("请输入圆的半径:", "");
        function getArea(r) {
            var s = r * r * Math.PI;
            return s;
        }
        document.write("您输入的半径(" + r + " 米)所画的圆的面积(单位:平方米)为:" + getArea(r));
        function getLenght(height, width) {
            var lenght = Math.sqrt(height * height + width * width)
            return lenght;
        }
        var height = prompt("请输入直角三角形的高:", "");
        var width = prompt("请输入直角三角形的宽:", "");
        document.write("<br/>根据您输入的高(" + height + " 米)和宽(" + width + " 米)确定的直角三角形<font color='red'>的斜边长(单位:米)为:</font>" + getLenght(height, width));


    </script>


</head>

<body>

</body>

</html>

显示效果如下:
2

@ 沉木

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值