本页目录

30分钟

JavaScript 对象实例

使用内置的JavaScript对象实例。

String（字符串）对象

返回字符串的长度

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<script>
var txt = "Hello World!";
document.write(txt.length);
</script>

</body>
</html>

为字符串添加样式

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<script>
var txt = "Hello World!";
document.write("<p>字体变大: " + txt.big() + "</p>");
document.write("<p>字体缩小: " + txt.small() + "</p>");
document.write("<p>字体加粗: " + txt.bold() + "</p>");
document.write("<p>斜体: " + txt.italics() + "</p>");
document.write("<p>固定定位: " + txt.fixed() + "</p>");
document.write("<p>加删除线: " + txt.strike() + "</p>");
document.write("<p>字体颜色: " + txt.fontcolor("green") + "</p>");
document.write("<p>字体大小: " + txt.fontsize(6) + "</p>");
document.write("<p>下标: " + txt.sub() + "</p>");
document.write("<p>上标: " + txt.sup() + "</p>");
document.write("<p>链接: " + txt.link("http://www.w3cschool.cc") + "</p>");
document.write("<p>闪动文本: " + txt.blink() + " (不能用于IE,Chrome,或者Safari)</p>");
</script>

</body>
</html>

返回字符串中指定文本首次出现的位置 - indexOf()方法

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p id="demo">单击按钮来定位指定文本首次出现的位置。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var str="Hello world, welcome to the universe.";
	var n=str.indexOf("welcome");
	document.getElementById("demo").innerHTML=n;
}
</script>

</body>
</html>

查找字符串中特定的字符，若找到，则返回该字符 - match() 方法

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<script>
var str="Hello world!";
document.write(str.match("world") + "<br>");
document.write(str.match("World") + "<br>");
document.write(str.match("worlld") + "<br>");
document.write(str.match("world!"));
</script>

</body>
</html>

替换字符串中的字符 - replace()

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>单击按钮将段落中的第一个 Microsoft 替换成 Runoob：</p>
<p id="demo">Visit Microsoft!Visit Microsoft!</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var str=document.getElementById("demo").innerHTML; 
	var n=str.replace("Microsoft","Runoob");
	document.getElementById("demo").innerHTML=n;
}
</script>

</body>
</html>

Date（日期）对象

使用 Date() 方法来返回今天的日期和时间

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script>
var d=new Date();
document.write(d);
</script>

</body>
</html>

使用 getTime() 计算从1970年到今天有多少毫秒

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮显示1970年1月1号至今的毫秒数。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var d = new Date();
	var x = document.getElementById("demo");
	x.innerHTML=d.getTime();
}
</script>

</body>
</html>

使用 setFullYear() 设置具体的日期

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮显示修改后的年月日。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var d = new Date();
	d.setFullYear(2020,10,3);
	var x = document.getElementById("demo");
	x.innerHTML=d;
}
</script>
<p>记住 JavaScript 月数是从0至11。10是11月。</p>
</body>
</html>

使用 toUTCString() 把当日的日期（根据 UTC）转换为字符串

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">点击按钮把 utc 日期和时间转换成字符串。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var d = new Date();
	var x = document.getElementById("demo");
	x.innerHTML=d.toUTCString();
}
</script>

</body>
</html>

使用 getDay() 来显示星期，而不仅仅是数字

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮显示今天周几</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var d = new Date();
	var weekday=new Array(7);
	weekday[0]="周日";
	weekday[1]="周一";
	weekday[2]="周二";
	weekday[3]="周三";
	weekday[4]="周四";
	weekday[5]="周五";
	weekday[6]="周六";
	var x = document.getElementById("demo");
	x.innerHTML=weekday[d.getDay()];
}
</script>

</body>
</html>

显示一个钟表

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function startTime(){
	var today=new Date();
	var h=today.getHours();
	var m=today.getMinutes();
	var s=today.getSeconds();// 在小于10的数字前加一个‘0’
	m=checkTime(m);
	s=checkTime(s);
	document.getElementById('txt').innerHTML=h+":"+m+":"+s;
	t=setTimeout(function(){startTime()},500);
}
function checkTime(i){
	if (i<10){
		i="0" + i;
	}
	return i;
}
</script>
</head>
<body onload="startTime()">
	
<div id="txt"></div>
	
</body>
</html>

Array（数组）对象

创建数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script>
var i;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (i=0;i<mycars.length;i++){
	document.write(mycars[i] + "<br />");
}
</script>

</body>
</html>

合并两个数组 - concat()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	
<script>
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
document.write(children);
</script>
	
</body>
</html>

合并三个数组 - concat()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	
<script>
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
document.write(children);
</script>
	
</body>
</html>

用数组的元素组成字符串 - join()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">点击按钮将数组作为字符串输出。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var x=document.getElementById("demo");
	x.innerHTML=fruits.join();
}
</script>

</body>
</html>

删除数组的最后一个元素 - pop()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮删除数组的最后一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.pop();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

数组的末尾添加新的元素 - push()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮给数组添加新的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.push("Kiwi")
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

反转一个数组中的元素的顺序 - reverse()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮将数组反转排序。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.reverse();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

删除数组的第一个元素 - shift()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮删除数组的第一个元素。</p>
<p id="demo2"></p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	var delell = fruits.shift();
	var x=document.getElementById("demo");
	x.innerHTML= '删除后数组为：' +  fruits;
	document.getElementById("demo2").innerHTML= '删除的元素是：' +  delell;
}
</script>

</body>
</html>

从一个数组中的选择元素 - slice()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
	var citrus = fruits.slice(1,3);
	var x=document.getElementById("demo");
	x.innerHTML=citrus;
}
</script>

</body>
</html>

数组排序（按字母顺序升序）- sort()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.sort();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

数字排序（按数字顺序升序）- sort()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return a-b});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>

</body>
</html>

数字排序（按数字顺序降序）- sort()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮降序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return b-a});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>

</body>
</html>

在数组的第2位置添加一个元素 - splice()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">点击按钮向数组添加元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.splice(2,0,"Lemon","Kiwi");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

转换数组到字符串 -toString()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">点击按钮将数组转为字符串并返回。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var str = fruits.toString();
	var x=document.getElementById("demo");
	x.innerHTML= str;
}
</script>

</body>
</html>

在数组的开头添加新元素 - unshift()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮在数组中插入元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.unshift("Lemon","Pineapple");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
<p><b>注意:</b> unshift()方法不能用于 Internet Explorer 8 之前的版本，插入的值将被返回成<em> undefined </em>。</p>

</body>
</html>

Boolean（布尔）对象

检查逻辑值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script>
var b1=new Boolean(0);
var b2=new Boolean(1);
var b3=new Boolean("");
var b4=new Boolean(null);
var b5=new Boolean(NaN);
var b6=new Boolean("false");
document.write("0 为布尔值 "+ b1 +"<br>");
document.write("1 为布尔值 "+ b2 +"<br>");
document.write("空字符串是布尔值 "+ b3 + "<br>");
document.write("null 是布尔值 "+ b4+ "<br>");
document.write("NaN 是布尔值 "+ b5 +"<br>");
document.write("字符串'false' 是布尔值"+ b6 +"<br>");
</script>

</body>
</html>

Math（算数）对象

使用 round() 对数字进行舍入

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮舍入与“2.5”最接近的整数</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	document.getElementById("demo").innerHTML=Math.round(2.5);
}
</script>

</body>
</html>

使用 random() 来返回 0 到 1 之间的随机数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">点击按钮显示一个随机数</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	document.getElementById("demo").innerHTML=Math.random();
}
</script>

</body>
</html>

使用 max() 来返回两个给定的数中的较大的数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮返回5到10之间的最大值。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	document.getElementById("demo").innerHTML=Math.max(5,10);
}
</script>

</body>
</html>

使用 min() 来返回两个给定的数中的较小的数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮返回5到10之间最小的值。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	document.getElementById("demo").innerHTML=Math.min(5,10);
}
</script>

</body>
</html>

摄氏度与华氏转换

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function convert(degree){
	if (degree=="C"){
		F=document.getElementById("c").value * 9 / 5 + 32;
		document.getElementById("f").value=Math.round(F);
	}
	else{
		C=(document.getElementById("f").value -32) * 5 / 9;
		document.getElementById("c").value=Math.round(C);
	}
}
</script>
</head>
<body>
	
<p><b>在下面输入框中插入一个数值：</b></p>
<form>
<input id="c" name="c" onkeyup="convert('C')"> 摄氏度<br>
等于<br> 
<input id="f" name="f" onkeyup="convert('F')"> 华氏度 
</form>
<p>注意使用<b>Math.round()</b> 方法返回的结果是一个整数。</p>
</body>

</html>

一般

通过对象元素使用for...in语句

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var txt="";
	var person={fname:"Bill",lname:"Gates",age:56}; 
	for (x in person){
		txt=txt + person[x];
	}
	document.getElementById("demo").innerHTML=txt;
}
</script>
	
</body>
</html>

上一节: JavaScript 实例下一节: JavaScript Browser 对象实例

直播支持申请

目录

评价

推荐

JavaScript 教程

1. JavaScript 教程

JavaScript 简介

为什么学习 JavaScript?

谁适合阅读本教程?

JavaScript 参考手册

您将学到什么？

JavaScript 与 Java

ECMAScript 版本

JavaScript 用法

<script> 标签

<body> 中的 JavaScript

JavaScript 函数和事件

在 <head> 或者 <body> 的JavaScript

<head> 中的 JavaScript 函数

<body> 中的 JavaScript 函数

外部的 JavaScript

JavaScript 输出

JavaScript 显示数据

使用 window.alert()

操作 HTML 元素

写到 HTML 文档

写到控制台

JavaScript 语法

JavaScript 字面量

JavaScript 变量

JavaScript 操作符

JavaScript 语句

JavaScript 关键字

JavaScript 注释

JavaScript 数据类型

数据类型的概念

JavaScript 函数

JavaScript 字母大小写

JavaScript 字符集

JavaScript 语句

分号 ;

JavaScript 代码

JavaScript 代码块

JavaScript 语句标识符

空格

对代码行进行折行

JavaScript 注释

JavaScript 多行注释

使用注释来阻止执行

在行末使用注释

JavaScript 变量

JavaScript 数据类型

声明（创建） JavaScript 变量

一条语句，多个变量

Value = undefined

重新声明 JavaScript 变量

JavaScript 算数

JavaScript 数据类型

JavaScript 拥有动态类型

JavaScript 字符串

JavaScript 数字

JavaScript 布尔

JavaScript 数组

JavaScript 对象

Undefined 和 Null

声明变量类型

JavaScript 对象

对象定义

对象属性

访问对象属性

对象方法

访问对象方法

JavaScript 函数

JavaScript 函数语法

调用带参数的函数

带有返回值的函数

局部 JavaScript 变量

全局 JavaScript 变量

JavaScript 变量的生存期

向未声明的 JavaScript 变量分配值

JavaScript 作用域