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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
深入理解JavaScript单体内置对象
JavaScript中定义了两个单体内置对象:Global和Math. Global对象 Global对象是JavaScript中最特别的一个对象.不属于任何其他对象的属性和方法,最终都是它的属性和方法.实际上,没有全局变量或全局作用域,所有在全局作用域中定义的属性和函数,都是Global对象的属性. Global对象包含了一些有用的方法: 1.URI编码方法 Global对象的encodeURI()和encodeURIComponent()方法可以对URI进行编码,encodeURI()主要用
-
jsp内置对象及方法详细介绍
jsp提供了的9个内置对象,下面jsp的9大内置对象方法说明 内置对象 类型 作用域 request javax.servlet.http.HttpServletRequest request response javax.servlet.http.HttpServletResponse response pageContext javax.servlet.jsp.PageContext page session javax.servlet.http.HtpSession session app
-
javascript内置对象操作详解
1.indexOf() 方法 -----这个方法比较常用 返回某个指定的字符串值在字符串中首次出现的位置 使用格式:stringObject.indexOf(substring, startpos) 举个例子:寻找第二个o所在的位子 var mystr="Hello World!" document.write(mystr.indexOf("o",mystr.indexOf("o")+1));--------结果是:7 mystr.indexOf
-
JavaScript 内置对象属性及方法集合
1.Date 属性(1): constructor 所建立对象的函数参考 prototype 能够为对象加入的属性和方法 方法(43): getDay() 返回一周中的第几天(0-6) getYear() 返回年份.2000年以前为2位,2000(包含)以后为4位 getFullYear() 返回完整的4位年份数 getMonth() 返回月份数(0-11) getDate() 返回日(1-31) getHours() 返回小时数(0-23) getMinutes() 返回分钟(0-59) ge
-
JavaScript为内置对象添加原型方法实现
对象调用方法的顺序: 实例中的方法如果没有,去创建该实例对象的构造函数的原型对象中找 我们能为系统的对象的原型中添加方法,其实也就是相当于在改变源码 添加字符串倒序输出字符串的方法 我希望字符串中有一个倒序字符串的方法 String.prototype.myReverse=function () { for(var i=this.length-1;i>=0;i--){ console.log(this[i]); } }; var str="abcdefg"; str.myReve
-
浅谈js常用内置方法和对象
JS内置函数不从属于任何对象,在JS语句的任何地方都可以直接使用这些函数.JS中常用的内置函数如下: 1.eval(str)接收一个字符串形式的表达式,并试图求出表达式的值.作为参数的表达式可以采用任何合法的操作符和常数.如果参数中包含JS命令,这些命令也可以被执行,就像这些命令是JS程序的一部分一样. 2.parseInt(str,n)试图从一个字符串中提取一个整数.可附加一个n整数实现返回n进制整数.如果在字符串中存在除了数字.符号.小数点和指数符号以外的字符,就停止转换,返回已有的结果.如
-
JavaScript内置对象math,global功能与用法实例分析
本文实例讲述了JavaScript内置对象math,global功能与用法.分享给大家供大家参考,具体如下: 学习要点: 1.Global对象 2.Math对象 ECMA-262对内置对象的定义是:"由ECMAScript实现提供的.不依赖宿主环境的对象,这些对象在ECMAScript程序执行之前就已经存在了."意思就是说,开发人员不必显示地实例化内置对象:因为它们已经实例化了.ECMA-262只定义了两个内置对象:Global和Math. 一．Global对象 Global(全局)对
-
javascript对象之内置对象Math使用方法
一.Math.min()和Math.max(),分别返回参数中的最小和最大值 例: alert(Math.min(1,2,3)) //输出 "1" alert(Math.max(1,2,3)) //输出 "3" 二.Math.abs(),返回参数的绝对值 例: alert(Math.abs(-1)) //输出 "1" 三.Math.random(),产生一个0到1的随机数 例: window.open("http://www.***.c
-
JavaScript常用内置对象用法分析
本文实例讲述了JavaScript常用内置对象用法.分享给大家供大家参考,具体如下: 博主最近半个月没有更新博客,主要是每天都在学车中,学车的过程虽然挺折腾的,但是人吗总得学会适应,在百忙之中给大家分享一篇关于JavaScript的内置对象,不清楚的小伙伴可以进来看看. (1)String对象 当使用到字符串的属性或方法时,系统会把字符串包装成一个对象 属性 length:获取字符串的长度 方法 concat(str1,str2):连接字符串 indexOf(str):查找第一次出现的子字符串的
-
JavaScript内置对象介绍
目录 一.内置对象 二.Math对象 1.Math对象的使用 2.生成指定范围的随机数 三.日期对象 1.Date()方法的使用 2.日期对象的使用 3.获取时间戳 四.数组对象 1.数组对象的创建 2.检测是否为数组 3.添加删除数组元素的方法 4.数组排序 5. 数组索引方法 6.数组转换为字符串 五.字符串对象 1.根据字符返回位置 2. 根据位置返回字符 3. 字符串操作方法 4.split()方法 一.内置对象 内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一
-
详解JavaScript的内置对象
什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法:能够在对象上执行的动作.例如,表单的"提交"(Submit),时间的"获取"(getYear)等: JavaScript 提供多个内建对象,比如 String.Date.Array 等等,使用对象前先定义,如下使用数组对象: var objectName =new Ar
-
Javascript基础知识中关于内置对象的知识
目录 1.内置对象介绍 1.1 Math对象 1.2 Math中的方法 1.3 Date对象 2.Date中的方法 3.经典案例:倒计时效果: 4.Array数组对象 4.1 数组的创建 4.2 数组中的常用方法 5.字符串String 1.内置对象介绍 JavaScript组成: ECMAScript | DOM | BOM ECMAScript: 变量 , 函数, 数据类型 ,流程控制,内置对象 js中的对象: 自定义对象 , 内置对象 , 浏览器对象(不属于ECMAScript) 1.1