JavaScript中的內置對象介紹

Posted on by

一、對象的概念

  • 對象是一種特殊的數據類型（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>

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：