JavaScript中的內(nèi)置對(duì)象介紹
更新時(shí)間：2022年03月10日 16:50:55 作者：.NET開發(fā)菜鳥
這篇文章介紹了JavaScript中的內(nèi)置對(duì)象，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
一、對(duì)象的概念
- 對(duì)象是一種特殊的數(shù)據(jù)類型（object）。
- 擁有一系列的屬性和方法。
- 分為內(nèi)置對(duì)象和自定義對(duì)象。
二、String對(duì)象
String對(duì)象用來(lái)支持對(duì)于字符串的處理。
1、屬性
- length：獲取字符串對(duì)象的長(zhǎng)度。
例如：
<!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對(duì)象</title>
<script>
onload=function(){
var btn=document.querySelector("input[type='button']");
var len=document.querySelector("input[type='text']");
btn.onclick=function(){
alert("字符串長(zhǎng)度:"+len.value.length);
};
};
</script>
</head>
<body>
<input type="text" id="len"/>
<input type="button" value="獲取字符串長(zhǎng)度" id="btnLength" />
</body>
</html>效果：
文本框里面輸入內(nèi)容時(shí)：
文本框未輸入內(nèi)容時(shí)：
2、方法
- 語(yǔ)法：字符串對(duì)象.方法名()
例如：
<!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對(duì)象</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("字符串長(zhǎng)度:"+len.value.length);
};
// 方法
btnMethod.onclick=function(){
var str="a good man is a real man";
// 1、CharAt 返回字符串中指定位置的字符
var charAt=str.charAt(5);
// 2、indexOf 查找某個(gè)指定的字符串在字符串中首次出現(xiàn)的位置
// 如果能查到則返回所在字符串中的位置，如果查詢不到則返回-1
var str1=str.indexOf("m");
var str2=str.indexOf("woman"); // 返回-1
// 查找字符串中下標(biāo)為8以后的字符串中man首次出現(xiàn)的位置
var str3=str.indexOf("man",8);
// 3、substring(index1,index2)返回位于指定索引index1和index2之間的字符串,
// 并且包括索引index1對(duì)應(yīng)的字符，不包括索引index2對(duì)應(yīng)的字符。
var substr=str.substring(3,7);//返回索引從3到7之間的字符串
// 省略第二個(gè)參數(shù)則表示一直到字符串的末尾
var substr2=str.substring(6);
// 4、split(str) 將字符串分割為字符串?dāng)?shù)組
var strs=str.split(" ");// 用“|”分割數(shù)組
// 5、toLowerCase() 將字符串轉(zhuǎn)換為小寫字母
var lowerStr=str.toLowerCase();
// 6、toUpperCase() 將字符串轉(zhuǎn)換為大寫字母
var upperStr=str.toUpperCase();
var strTemp="位置為5的字符串:"+charAt+"<br />";
strTemp+="字符m出現(xiàn)的位置:"+str1+"<br />";
strTemp+="字符串woman出現(xiàn)的位置："+str2+"<br />";
strTemp+="索引8以后的man出現(xiàn)的位置:"+str3+"<br />";
strTemp+="索引3~7之間的字符串是:"+substr+"<br />";
strTemp+="索引6以后的字符串是："+substr2+"<br />";
strTemp+="數(shù)組："+strs+"<br />";
strTemp+="小寫字母："+lowerStr+"<br />";
strTemp+="大寫字母："+upperStr+"<br />";
writeDiv.innerHTML=strTemp;
};
};
</script>
</head>
<body>
<input type="text" id="len"/>
<input type="button" value="獲取字符串長(zhǎng)度" 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>結(jié)果：
三、Math對(duì)象
Math對(duì)象用于執(zhí)行常用的數(shù)學(xué)任務(wù)，它包含了若干個(gè)數(shù)字常亮和函數(shù)。
常用方法如下：
例如：
<!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對(duì)象</title>
<script>
onload=function(){
var btn=document.querySelector("input[name='btnMath']");
var showDiv=document.querySelector("#show");
btn.onclick=function(){
// 上舍入 舍去小數(shù)部分，整數(shù)部分都加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 />";
// 下舍入 舍去小數(shù)部分，整數(shù)部分不變
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 />";
// 隨機(jī)數(shù) 返回0~1之間的隨機(jī)數(shù)
str+="1~100的隨機(jī)數(shù)："+Math.floor(Math.random()*100)+"<br />";
showDiv.innerHTML=str;
};
};
</script>
</head>
<body>
<input type="button" name="btnMath" value="Math對(duì)象常用函數(shù)" />
<div id="show" style="border:1px solid red;height:300px;margin-top:20px;padding-left:5px;">
</div>
</body>
</html>結(jié)果：
四、Date對(duì)象
Date對(duì)象用于操作日期和時(shí)間。
1、語(yǔ)法：
var myDate=new Date([參數(shù)]);
例如：
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對(duì)象</title>
<script>
onload=function(){
// 創(chuàng)建Date對(duì)象
var date=new Date();
var btn=document.querySelector("input[name='btnDate']");
var showDiv=document.querySelector("#show");
btn.onclick=function(){
var str="當(dāng)前日期："+date.getDate()+"<br />";
str+="今天是星期："+date.getDay()+"<br />";
str+="小時(shí)："+date.getHours()+"<br />";
str+="分鐘："+date.getMinutes()+"<br />";
str+="秒："+date.getSeconds()+"<br />";
str+="當(dāng)前月份："+date.getMonth()+"<br />";
str+="當(dāng)前年份："+date.getFullYear()+"<br />";
str+="毫秒數(shù)："+date.getTime()+"<br />";
showDiv.innerHTML=str;
};
};
</script>
</head>
<body>
<input type="button" name="btnDate" value="Date對(duì)象常用函數(shù)" />
<div id="show" style="border:1px solid red;height:300px;margin-top:20px;
padding-left:5px;">
</div>
</body>
</html>結(jié)果：
示例程序：
實(shí)現(xiàn)時(shí)鐘效果：
<!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>時(shí)鐘</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();
// 小時(shí)
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="當(dāng)前時(shí)間:"+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>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了關(guān)于前端要知道的?AST知識(shí),在計(jì)算機(jī)科學(xué)中，抽象語(yǔ)法樹是源代碼語(yǔ)法結(jié)構(gòu)的一種抽象表示,需要的朋友可以參考下2023-04-04
表單元素如果用js賦值刷新后，記錄是js賦值后的值而不是初始值；非表單元素如果用js賦值刷新后，記錄的是初始值2013-11-11
JavaScript 基礎(chǔ)知識(shí) 被自己遺忘的
JavaScript 基礎(chǔ)知識(shí) 被自己遺忘的，學(xué)習(xí)的朋友可以參考下。2009-10-10
Three.js是一個(gè)偉大的開源WebGL庫(kù)，WebGL允許JavaScript操作GPU，在瀏覽器端實(shí)現(xiàn)真正意義的3D本文將介紹模擬光照/Attribut變量/更新著色器材質(zhì)/更新著色器材質(zhì)等等感興趣的朋友可以了解下啊2013-01-01
Javascript二維數(shù)組的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2009-11-11
這篇文章主要為大家介紹了javascript深拷貝的幾種情況，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
JavaScript進(jìn)階教程(第二課續(xù))...2007-04-04
這篇文章主要介紹了JavaScript中Date對(duì)象的常用方法示例,Date對(duì)象的相關(guān)運(yùn)用是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-10-10
js限制文本框輸入長(zhǎng)度兩種限制方式(長(zhǎng)度、字節(jié)數(shù))
在實(shí)際應(yīng)用中根據(jù)需要會(huì)用到文本框限制字符長(zhǎng)度,以些新手朋友有們可能還不清楚如何應(yīng)付，本人搜集整理了一些常用技巧，曬出來(lái)和大家分享一下，希望可以幫助你們2012-12-12
下面小編就為大家?guī)?lái)一篇Javascript中的幾種繼承方式對(duì)比分析。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，希望能給大家一個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-03-03