JavaScript中的内置对象介绍_Javascript

一、对象的概念

对象是一种特殊的数据类型（object）。
拥有一系列的属性和方法。
分为内置对象和自定义对象。

二、string对象

string对象用来支持对于字符串的处理。

1、属性

length：获取字符串对象的长度。

例如：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>string对象</title>
    <script>
       onload=function(){
           var btn=document.queryselector("input[type='button']");
           var len=document.queryselector("input[type='text']");
           btn.onclick=function(){
            alert("字符串长度:"+len.value.length);
           };
       };
    </script>
</head>
<body>
    <input type="text" id="len"/>
    <input type="button" value="获取字符串长度" id="btnlength" />
</body>
</html>

效果：

文本框里面输入内容时：

文本框未输入内容时：

2、方法

语法：字符串对象.方法名()

例如：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>string对象</title>
    <script>
       onload=function(){
           var btn=document.queryselector("input[type='button']");
           var len=document.queryselector("input[type='text']");
           var btnmethod=document.queryselector("input[name='method']");
           var writediv=document.queryselector("#printmethod");
           //var str=len.value.tostring();
           btn.onclick=function(){
            alert("字符串长度:"+len.value.length);
           };
           // 方法
           btnmethod.onclick=function(){
               var str="a good man is a real man";
               // 1、charat 返回字符串中指定位置的字符
               var charat=str.charat(5);
               // 2、indexof 查找某个指定的字符串在字符串中首次出现的位置
               // 如果能查到则返回所在字符串中的位置，如果查询不到则返回-1
               var str1=str.indexof("m");
               var str2=str.indexof("woman"); // 返回-1
               // 查找字符串中下标为8以后的字符串中man首次出现的位置
               var str3=str.indexof("man",8);
               // 3、substring(index1,index2)返回位于指定索引index1和index2之间的字符串,
               // 并且包括索引index1对应的字符，不包括索引index2对应的字符。
               var substr=str.substring(3,7);//返回索引从3到7之间的字符串
               // 省略第二个参数则表示一直到字符串的末尾
               var substr2=str.substring(6);
               // 4、split(str) 将字符串分割为字符串数组
               var strs=str.split(" ");// 用“|”分割数组
               // 5、tolowercase() 将字符串转换为小写字母
               var lowerstr=str.tolowercase();
               // 6、touppercase() 将字符串转换为大写字母
               var upperstr=str.touppercase();

               var strtemp="位置为5的字符串:"+charat+"<br />";
               strtemp+="字符m出现的位置:"+str1+"<br />"; 
               strtemp+="字符串woman出现的位置："+str2+"<br />";
               strtemp+="索引8以后的man出现的位置:"+str3+"<br />";
               strtemp+="索引3~7之间的字符串是:"+substr+"<br />";
               strtemp+="索引6以后的字符串是："+substr2+"<br />";
               strtemp+="数组："+strs+"<br />";
               strtemp+="小写字母："+lowerstr+"<br />";
               strtemp+="大写字母："+upperstr+"<br />";
               writediv.innerhtml=strtemp;
           };
       };
    </script>
</head>
<body>
    <input type="text" id="len"/>
    <input type="button" value="获取字符串长度" id="btnlength" />
    <input type="button" value="字符串方法" name="method" id="btnmethod" />
    <div id="printmethod" style="border:1px solid red;height:200px;margin-top:20px;">

    </div>
</body>
</html>

结果：

三、math对象

math对象用于执行常用的数学任务，它包含了若干个数字常亮和函数。

常用方法如下：

例如：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>math对象</title>
    <script>
       onload=function(){
           var btn=document.queryselector("input[name='btnmath']");
           var showdiv=document.queryselector("#show");
           btn.onclick=function(){
               // 上舍入  舍去小数部分，整数部分都加1
               var str="25.8的上舍入值："+math.ceil(25.8)+"<br />";
               str+="25.1的上舍入值："+math.ceil(25.1)+"<br />";
               str+="-25.8的上舍入值："+math.ceil(-25.8)+"<br />";
               str+="-25.1的上舍入值："+math.ceil(-25.1)+"<br />";
               // 下舍入  舍去小数部分，整数部分不变
               str+="25.8的下舍入值："+math.floor(25.8)+"<br />";
               str+="25.1的下舍入值："+math.floor(25.1)+"<br />";
               str+="-25.8的下舍入值："+math.floor(-25.8)+"<br />";
               str+="-25.1的下舍入值："+math.floor(-25.1)+"<br />";
               // 四舍五入
               str+="25.8的四舍五入值："+math.round(25.8)+"<br />";
               str+="25.1的四舍五入值："+math.round(25.1)+"<br />";
               str+="-25.8的四舍五入值："+math.round(-25.8)+"<br />";
               str+="-25.1的四舍五入值："+math.round(-25.1)+"<br />";
               // 随机数 返回0~1之间的随机数
               str+="1~100的随机数："+math.floor(math.random()*100)+"<br />";
               showdiv.innerhtml=str;
           };
       };
    </script>
</head>
<body>
      <input type="button" name="btnmath" value="math对象常用函数" />
      <div id="show" style="border:1px solid red;height:300px;margin-top:20px;padding-left:5px;">

      </div>
</body>
</html>

结果：

四、date对象

date对象用于操作日期和时间。

1、语法：

var mydate=new date([参数]);

例如：

2、方法：

例如：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>date对象</title>
    <script>
       onload=function(){
           // 创建date对象
           var date=new date();
           var btn=document.queryselector("input[name='btndate']");
           var showdiv=document.queryselector("#show");
           btn.onclick=function(){
               var str="当前日期："+date.getdate()+"<br />";
               str+="今天是星期："+date.getday()+"<br />";
               str+="小时："+date.gethours()+"<br />";
               str+="分钟："+date.getminutes()+"<br />";
               str+="秒："+date.getseconds()+"<br />";
               str+="当前月份："+date.getmonth()+"<br />";
               str+="当前年份："+date.getfullyear()+"<br />";
               str+="毫秒数："+date.gettime()+"<br />";
               showdiv.innerhtml=str;
           };
       };
    </script>
</head>
<body>
    <input type="button" name="btndate" value="date对象常用函数" />
    <div id="show" style="border:1px solid red;height:300px;margin-top:20px;
    padding-left:5px;">
    
    </div>
</body>
</html>

结果：

示例程序：

实现时钟效果：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>时钟</title>
    <script>
       onload=function(){
           var btnstart=document.queryselector("#btnstart");
           var btnstop=document.queryselector("#btnstop");
           var showdiv=document.queryselector("#show");          
           var handle;
            function showtime(){
            var currentdate=new date();
            var year=currentdate.getfullyear();
               // 月份
               var month=currentdate.getmonth()+1;
               // 日
               var day=currentdate.getdate();
               // 小时
               var hour=currentdate.gethours();
               // 分钟
               var mit=currentdate.getminutes();
               // 秒
               var second=currentdate.getseconds();
               // 星期
               var week;
               switch(currentdate.getday())
               {
                   case 0:
                   week="星期日";
                   break;
                   case 1:
                   week="星期一";
                   break;
                   case 2:
                   week="星期二";
                   break;
                   case 3:
                   week="星期三";
                   break;
                   case 4:
                   week="星期四";
                   break;
                   case 5:
                   week="星期五";
                   break;
                   case 6:
                   week="星期六";
                   break;
               }
               showdiv.innerhtml="当前时间:"+year+"年"+month+"月"+day+"日"+"  "+
               hour+":"+mit+":"+second+"  "+week;
           }; 
           btnstart.onclick=function(){
               showtime();
             handle= setinterval(showtime,1000);
           }
           btnstop.onclick=function(){
               clearinterval(handle);
           }
       };
    </script>
</head>
<body>
    <input type="button" id="btnstart" value="开始" />
    <input type="button" id="btnstop" value="停止" />
    <div id="show" style="border:1px solid red;height:300px;margin-top:20px;
    padding-left:5px;">
    
    </div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持代码网。