JavaScript 实例汇总【经典案例教程】
JavaScript基础 2022-04-25 01:55:08小码哥的IT人生shichen
JavaScript 实例
JavaScript 能做什么？
完整实例【JavaScript 能够改变 HTML 内容】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能做什么</h2>
<p id="demo">JavaScript 能够改变 HTML 内容。</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我！</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 能够改变 HTML 属性】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能做什么？</h2>
<p>JavaScript 能够改变 HTML 属性值。</p>
<p>在本例中，JavaScript 改变了图像的 src 属性值。</p>
<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>
<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 能够改变 CSS 样式】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能够做什么</h2>
<p id="demo">JavaScript 能够改变 HTML 元素的样式。</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">
点击我！
</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 能够隐藏 HTML 元素】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能够做什么</h2>
<p id="demo">JavaScript 能够隐藏 HTML 元素。</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">
点击我！
</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 能够显示隐藏的 HTML 元素】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能够做什么</h2>
<p>JavaScript 能够显示隐藏的 HTML 元素。</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">
点击我！
</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在何处插入 JavaScript
完整实例【<head> 中的 JavaScript】：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</head>
<body>
<h2>Head 中的 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【<body> 中的 JavaScript】：
<!DOCTYPE html>
<html>
<body>
<h2>Body 中的 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【外部文件中的 JavaScript】：
<!DOCTYPE html>
<html>
<body>
<h2>外部 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
<p>（myFunction 存储在名为 "myScript.js" 的外部文件中。）</p>
<script src="/demo/myScript.js"></script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【外部 url 中的 JavaScript】：
<!DOCTYPE html>
<html>
<body>
<h1>外部 JavaScript</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
<p>（myFunction 存储在名为 "myScript.js" 的外部文件中。）</p>
<script src="http://www.phpcodeweb.com/demo/myScript.js"></script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【外部文件夹中的 JavaScript】：
<!DOCTYPE html>
<html>
<body>
<h2>外部 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
<p>（myFunction 存储在名为 "myScript.js" 的外部文件中。）</p>
<script src="/demo/myScript.js"></script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 输出
完整实例【写入 HTML 输出】：
<!DOCTYPE html>
<html>
<body>
<h2>我的第一张网页</h2>
<p>我的第一个段落。</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【写入 HTML 元素】：
<!DOCTYPE html>
<html>
<body>
<h2>我的第一张网页</h2>
<p>我的第一个段落。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【写入窗口提示框】：
<!DOCTYPE html>
<html>
<body>
<h2>我的第一张网页</h2>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【写入浏览器控制台】：
<!DOCTYPE html>
<html>
<body>
<h2>按 F12 启动</h2>
<p>在 debugger 中选择 "Console"。然后再次点击运行按钮。</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 语法
完整实例【JavaScript 语句】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 语句</h2>
<p><b>JavaScript 程序</b> 是一系列由计算机执行的 <b>语句</b>。</p>
<p id="demo"></p>
<script>
var x, y, z; // 语句 1
x = 22; // 语句 2
y = 11; // 语句 3
z = x + y; // 语句 4
document.getElementById("demo").innerHTML =
"z 的值是" + z + "。";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 数字】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数值</h2>
<p>写数值有无小数点均可。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 15.90;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 字符串】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<p>字符串可由双引号或单引号包围。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 'Bill Gates';
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 变量】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 变量</h2>
<p>在本例中，x 被定义为变量。然后 x 被赋值 7：</p>
<p id="demo"></p>
<script>
var x;
x = 7;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 运算符】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 运算符</h2>
<p>JavaScript 使用算数运算符来计算值（类似代数）。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = (7 + 8) * 10;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 赋值】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 赋值</h2>
<p>在 JavaScript 中，= 运算符用于向变量赋值。</p>
<p id="demo"></p>
<script>
var x, y;
x = 7;
y = 8;
document.getElementById("demo").innerHTML = x + y;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 表达式（使用常量）】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 表达式</h2>
<p>表达式计算为值。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 6 * 10;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 表达式（使用字符串）】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 表达式</h2>
<p>表达式计算为值。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Bill" + " " + "Gates";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 表达式（使用变量）】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 表达式</h2>
<p>表达式计算为值。</p>
<p id="demo"></p>
<script>
var x;
x = 6;
document.getElementById("demo").innerHTML = x * 10;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 关键词】：
<!DOCTYPE html>
<html>
<body>
<h2>var 关键词创建变量</h2>
<p id="demo"></p>
<script>
var x, y;
x = 7 + 8;
y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 注释】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 注释<b>不会</b>被执行。</h2>
<p id="demo"></p>
<script>
var x;
x = 7;
// x = 8; 我不会被执行
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 对大小写敏感】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 对大小写敏感</h2>
<p>请试着把 lastName 改为 lastname。</p>
<p id="demo"></p>
<script>
var lastname, lastName;
lastName = "Gates";
lastname = "Jobs";
document.getElementById("demo").innerHTML = lastName;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 语句
完整实例【JavaScript 语句是对浏览器的命令】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 语句</h2>
<p><b>JavaScript 程序</b> 是一系列由计算机执行的 <b>语句</b>。</p>
<p id="demo"></p>
<script>
var x, y, z; // 语句 1
x = 22; // 语句 2
y = 11; // 语句 3
z = x + y; // 语句 4
document.getElementById("demo").innerHTML =
"z 的值是" + z + "。";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 代码是一系列语句】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 语句</h2>
<p>在 HTML 中，JavaScript 语句由浏览器执行。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Kitty.";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 语句由分号分隔】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 语句</h2>
<p>JavaScript 语句被分号分隔。</p>
<p id="demo1"></p>
<script>
var a, b, c;
a = 5;
b = 6;
c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【一行允许多条语句】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 语句</h2>
<p>一行允许多条语句。</p>
<p id="demo1"></p>
<script>
var a, b, c;
a = 5; b = 6; c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 语句可以在代码块中组合在一起】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 语句</h2>
<p>JavaScript 代码块在 { 与 } 之间编写。</p>
<button type="button" onclick="myFunction()">点击我！</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello Kitty.";
document.getElementById("demo2").innerHTML = "How are you?";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【您可以在运算符或逗号之后对代码折行】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 语句</h2>
<p>
折行的最佳位置是运算符或逗号之后。
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Kitty.";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 注释
完整实例【单行注释】：
<!DOCTYPE html>
<html>
<body>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
// 改变标题：
document.getElementById("myH").innerHTML = "JavaScript 注释";
// 改变段落：
document.getElementById("myP").innerHTML = "我的第一个段落。";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【行末的单行注释】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 注释</h2>
<p id="demo"></p>
<script>
var x = 5; // 声明 x，然后为其赋值 5
var y = x + 2; // 声明 y，然后为其赋值 x + 2
// 把 y 写入 demo
document.getElementById("demo").innerHTML = y;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【多行注释】：
<!DOCTYPE html>
<html>
<body>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
/*
下面的代码会改变
id = "myH" 的标题
以及 id = "myp" 的段落
*/
document.getElementById("myH").innerHTML = "JavaScript 注释";
document.getElementById("myP").innerHTML = "我的第一个段落。";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【阻止执行的单行注释】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 注释</h2>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
//document.getElementById("myH").innerHTML = "我的首页";
document.getElementById("myP").innerHTML = "我的第一个段落。";
</script>
<p>// 开头的代码行不会被执行。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【阻止执行的多行注释】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 注释</h2>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
/*
document.getElementById("myH").innerHTML = "欢迎访问我的首页";
document.getElementById("myP").innerHTML = "这是我的第一个段落。";
*/
document.getElementById("myP").innerHTML = "注释块不会被执行。";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 变量
完整实例【JavaScript 变量】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>在本例中，x、y 以及 z 都是变量。</p>
<p id="demo"></p>
<script>
var x = 7;
var y = 8;
var z = x + y;
document.getElementById("demo").innerHTML =
"z 的值是：" + z;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【作为代数的 JavaScript 变量】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p id="demo"></p>
<script>
var price1 = 7;
var price2 = 8;
var price3 = 12;
var total = price1 + price2 + price3;
document.getElementById("demo").innerHTML = "总计：" + total;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 数字和字符串】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>字符串用引号包围。</p>
<p>数值不用引号包围。</p>
<p id="demo"></p>
<script>
var pi = 3.14;
var person = "Bill Gates";
var answer = 'How are you!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript var 关键词】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>创建一个变量，向其赋值，然后显示它：</p>
<p id="demo"></p>
<script>
var carName = "porsche";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【在一条语句中声明多个变量】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>您可以在一条语句中声明许多变量。</p>
<p id="demo"></p>
<script>
var person = "Bill Gates", carName = "porsche", price = 150000;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【多行声明多个变量】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>您可以在一条语句中声明多个变量。</p>
<p id="demo"></p>
<script>
var person = "Bill Gates",
carName = "porsche",
price = 150000;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【没有值的变量返回值 undefined】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>如果变量声明时没有赋值，那么其值是 undefined。</p>
<p id="demo"></p>
<script>
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【重新声明变量不会破坏值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>如果您再次声明某个 JavaScript 变量，那么它的值不会丢失。</p>
<p id="demo"></p>
<script>
var carName = "porsche";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 数组相加】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>相加 5 + 2 + 3 的结果：</p>
<p id="demo"></p>
<script>
var x = 3 + 5 + 8;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 字符串相加】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>相加 "Bill" + " " + "Gates" 的结果是：</p>
<p id="demo"></p>
<script>
var x = "Bill" + " " + "Gates";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【字符串和数字相加】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>相加 "8" + 3 + 5 的结果是：</p>
<p id="demo"></p>
<script>
x = "8" + 3 + 5;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【数值和字符串相加】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>相加 3 + 5 + "8" 的结果是：</p>
<p id="demo"></p>
<script>
var x = 3 + 5 + "8"
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 算术
完整实例【加 (+) 运算符】：
<!DOCTYPE html>
<html>
<body>
<h1>+ 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
var y = 8;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【减 (-) 运算符】：
<!DOCTYPE html>
<html>
<body>
<h1>- 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
var y = 8;
var z = x - y;
document.getElementById("demo").innerHTML = z
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【乘 (*) 运算符】：
<!DOCTYPE html>
<html>
<body>
<h1>* 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
var y = 8;
var z = x * y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【除 (/) 运算符】：
<!DOCTYPE html>
<html>
<body>
<h1>/ 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
var y = 2;
var z = x / y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【取模 (%) 运算符】：
<!DOCTYPE html>
<html>
<body>
<h1>% 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
var y = 2;
var z = x % y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【递增 (++) 运算符】：
<!DOCTYPE html>
<html>
<body>
<h1>++ 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
x++;
var z = x;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【递减 (--) 运算符】：
<!DOCTYPE html>
<html>
<body>
<h1>-- 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
x--;
var z = x;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 赋值
完整实例【= 赋值运算符】：
<!DOCTYPE html>
<html>
<body>
<h1>= 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【+= 赋值运算符】：
<!DOCTYPE html>
<html>
<body>
<h1>+= 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
x += 8;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【-= 赋值运算符】：
<!DOCTYPE html>
<html>
<body>
<h1>-= 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
x -= 8;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【*= 赋值运算符】：
<!DOCTYPE html>
<html>
<body>
<h1>*= 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
x *= 8;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【/= 赋值运算符】：
<!DOCTYPE html>
<html>
<body>
<h1>/= 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
x /= 8;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【%= 赋值运算符】：
<!DOCTYPE html>
<html>
<body>
<h1>%= 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
x %= 8;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 字符串级联
完整实例【使用级联运算符 (+) 将两个字符串相加】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 运算符</h1>
<p>+ 运算符串联（相加）字符串。</p>
<p id="demo"></p>
<script>
var txt1 = "Bill";
var txt2 = "Gates";
document.getElementById("demo").innerHTML = txt1 + " " + txt2;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【对两个字符串相加，第一个字符串中包含空格】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 运算符</h1>
<p>+ 运算符级联（相加）字符串。</p>
<p id="demo"></p>
<script>
var txt1 = "What a very ";
var txt2 = "nice day";
document.getElementById("demo").innerHTML = txt1 + txt2;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【对两个字符串相加，字符串之间有空格】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 运算符</h1>
<p>+ 运算符级联（相加）字符串。</p>
<p id="demo"></p>
<script>
var txt1 = "What a very";
var txt2 = "nice day";
document.getElementById("demo").innerHTML = txt1 + " " + txt2;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 += 运算符对两个字符串相加】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 运算符</h1>
<p>赋值运算符 += 串联字符串。</p>
<p id="demo"></p>
<script>
txt1 = "Hello ";
txt1 += "Kitty！";
document.getElementById("demo").innerHTML = txt1;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【对字符串和数字相加】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 运算符</h1>
<p>对数字和字符串相加，会返回字符串。</p>
<p id="demo"></p>
<script>
var x = 7 + 8;
var y = "7" + 8;
var z = "Hello" + 7;
document.getElementById("demo").innerHTML =
x + "<br>" + y + "<br>" + z;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 数据类型
完整实例【声明（创建）字符串】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<p>您可以在字符串内使用引号，只要这些引号与包围字符串的引号不匹配：</p>
<p id="demo"></p>
<script>
var answer1 = "It's alright"; // 双引号内的单引号
var answer2 = "He is called 'Bill'"; // 双引号内的单引号
var answer3 = 'He is called "Bill"'; // 单引号内的双引号
document.getElementById("demo").innerHTML =
answer1 + "<br>" +
answer2 + "<br>" +
answer3;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【声明（创建）数字】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数值</h2>
<p>写数值时用不用小数点均可：</p>
<p id="demo"></p>
<script>
var x1 = 34.00;
var x2 = 34;
var x3 = 3.14;
document.getElementById("demo").innerHTML =
x1 + "<br>" + x2 + "<br>" + x3;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【声明（创建）数组】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数组</h2>
<p>数组索引基于零，这意味着第一个项目是 [0]，第二个项目是 [1]，以此类推。</p>
<p id="demo"></p>
<script>
var cars = ["Porsche", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【声明（创建）对象】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 对象</h2>
<p id="demo"></p>
<script>
var person = {
firstName : "Bill",
lastName : "Gates",
age : 62,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【确定变量的类型】：
<!DOCTYPE html>
<html>
<body>
<p>typeof 运算符返回变量或表达式的类型。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof "" + "<br>" +
typeof "Bill" + "<br>" +
typeof "Bill Gates" + "<br>" +
typeof 0 + "<br>" +
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3.14);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【对两个数字和一个字符串相加】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数据类型</h2>
<p>JavaScript 从左向右计算表达式。不同的次序会产生不同的结果：</p>
<p id="demo"></p>
<script>
var x = 911 + 7 + "Porsche";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【对一个字符串和两个数字相加】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数据类型</h2>
<p>JavaScript 从左向右计算表达式。不同的次序会产生不同的结果：</p>
<p id="demo"></p>
<script>
var x = "Porsche" + 911 + 7;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【一个未定义变量】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数据类型</h2>
<p>无值变量的值和数据类型是 <b>undefined</b>。</p>
<p id="demo"></p>
<script>
var car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【一个空变量】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数据类型</h2>
<p>空的字符串变量既有值也有类型。</p>
<p id="demo"></p>
<script>
var car = "";
document.getElementById("demo").innerHTML =
"其值是：" +
car + "<br>" +
"类型是：" + typeof car;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 对象
完整实例【创建 JavaScript 变量】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 变量</h2>
<p id="demo"></p>
<script>
// 创建并显示变量：
var car = "porsche";
document.getElementById("demo").innerHTML = car;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【创建 JavaScript 对象】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象</h1>
<p id="demo"></p>
<script>
// 创建对象：
var car = {type:"porsche", model:"911", color:"white"};
// 显示对象中的数据：
document.getElementById("demo").innerHTML = car.type;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【创建 person 对象（单行）】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象创建</h1>
<p id="demo"></p>
<script>
// 创建对象：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【创建 person 对象（多行）】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象创建</h1>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
firstName : "Bill",
lastName : "Gates",
age : 62,
eyeColor : "blue"
};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 .property 访问对象属性】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象属性</h1>
<p>有两种不同的方法来访问对象属性。</p>
<p>您可以使用 person.property 或 person["property"]。</p>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
firstName: "Bill",
lastName : "Gates",
id : 12345
};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 [property] 访问对象属性】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象属性</h1>
<p>有两种不同的方法来访问对象属性。</p>
<p>您可以使用 person.property 或 person["property"]。</p>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
firstName: "Bill",
lastName : "Gates",
id : 12345
};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【以方法访问函数属性】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象方法</h1>
<p>对象方法是一种函数定义，存储为属性值。</p>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
firstName: "Bill",
lastName : "Gates",
id : 12345,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// 显示对象中的数据：
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【以属性访问函数属性】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象方法</h1>
<p>如果您不使用 () 访问对象，则返回函数定义：</p>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
firstName: "Bill",
lastName : "Gates",
id : 12345,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// 显示对象中的数据：
document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 函数
完整实例【一个简单的函数】：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World!";
}
</script>
</head>
<body>
<p>单击“试一试”时，将调用一个函数。</p>
<p>该功能将显示一条消息。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【带一个参数的函数】：
<!DOCTYPE html>
<html>
<body>
<p>单击“试一试”以使用参数来调用函数</p>
<button onclick="myFunction('Harry Potter','Wizard')">试一试</button>
<p id="demo"></p>
<script>
function myFunction(name,job) {
document.getElementById("demo").innerHTML = "Welcome " + name + ", the " + job + ".";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【带一个参数的函数 2】：
<!DOCTYPE html>
<html>
<head>
<script>
function myfunction(txt) {
document.getElementById("demo").innerHTML = txt
}
</script>
</head>
<body>
<p>单击其中一个按钮时，将调用一个函数。该函数将显示传递给它的参数。</p>
<form>
<input type="button" onclick="myfunction('Good Morning!')" value="In the Morning">
<input type="button" onclick="myfunction('Good Evening!')" value="In the Evening">
</form>
<p id="demo"></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【返回一个值的函数】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>本例调用了一个执行计算的函数，然后返回结果：</p>
<p id="demo"></p>
<script>
var x = myFunction(7, 8);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把华氏度转换为摄氏度的函数】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>本例调用函数把华氏度转换为摄氏度：</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(86);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【没有 () 的函数】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>不使用 () 访问函数将返回函数声明而不是函数结果：</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 事件
完整实例【更改 HTML 元素的 onclick 事件】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 事件</h1>
<button onclick="document.getElementById('demo').innerHTML=Date()">时间是？</button>
<p id="demo"></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【更改元素本身的 onclick 事件】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 事件</h1>
<button onclick="this.innerHTML=Date()">时间是？</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【调用函数的 onclick 事件】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 事件</h1>
<p>点击按钮来显示日期。</p>
<button onclick="displayDate()">时间是？</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 字符串
完整实例【字符串可由单引号或双引号包围】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<p>字符串在引号中书写。您能够使用单引号或双引号：</p>
<p id="demo"></p>
<script>
var carName1 = "Porsche 911"; // 双引号
var carName2 = 'Porsche 911'; // 单引号
document.getElementById("demo").innerHTML =
carName1 + " " + carName2;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【展示一些字符串实例】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<p>您可以在字符串中使用引号，只要不匹配围绕字符串的引号即可：</p>
<p id="demo"></p>
<script>
var answer1 = "It's good to see you again!";
var answer2 = "He is called 'Bill'";
var answer3 = 'He is called "Bill"';
document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【在引号前添加反斜杠被认定为引号】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串</h1>
<p>转义序列 " 在字符串中插入双引号。</p>
<p id="demo"></p>
<script>
var x = "中国是瓷器的故乡，因此 china 与"China（中国）"同名。";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【确定字符串的长度】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串属性</h1>
<p>length 属性返回字符串的长度：</p>
<p id="demo"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【用反斜杠对文本字符串折行】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串</h1>
<p>您可以用反斜杠在文本字符串中进行换行。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello
Kitty";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【无法对代码使用反斜杠折行】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 语句</h1>
<p id="demo">您不能用反斜杠对代码行进行折行。</p>
<script>
document.getElementById("demo").innerHTML =
"Hello Kitty";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【确定文本在字符串中首次出现的位置 - indexOf()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串方法</h1>
<p>indexOf() 方法返回指定文本首次出现的位置：</p>
<p id="demo"></p>
<script>
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");
document.getElementById("demo").innerHTML = pos;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【在字符串中搜索文本并在找到后返回这段文本 - match()】：
<!DOCTYPE html>
<html>
<body>
<p>单击按钮，在字符串化中执行对字母“ain”（/ain）的全局（/g）搜索，并显示匹配项。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "The rain in SPAIN stays mainly in the plain";
var res = str.match(/ain/g);
document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【替换字符串中的字符 - replace()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串方法</h1>
<p>请把下面的段落中的“Microsoft”替换为“phpcodeweb”：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo">请访问 Microsoft！</p>
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","phpcodeweb");
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把字符串转换为大写 - toUpperCase()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串方法</h1>
<p>把字符串转换为大写：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo">Hello World!</p>
<script>
function myFunction() {
var text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = text.toUpperCase();
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把字符串转换为小写 - toLowerCase()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串方法</h1>
<p>把字符串转换为小写：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo">Hello World!</p>
<script>
function myFunction() {
var text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = text.toLowerCase();
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把字符串拆分入数组 - split()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串方法</h1>
<p>单击“试一试”以显示在字符串拆分后的第一个数组元素。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "a,b,c,d,e,f";
var arr = str.split(",");
document.getElementById("demo").innerHTML = arr[0];
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 数字
完整实例【带或不带小数点都可以写数值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>书写 JavaScript 数值既可以带小数点，也可以不带：</p>
<p id="demo"></p>
<script>
var x = 3.14;
var y = 3;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【可以使用指数计数法编写极大或极小的数】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>超大或超小的数可通过科学（指数）计数法来写：</p>
<p id="demo"></p>
<script>
var x = 123e5;
var y = 123e-5;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【数字会被精确到 15 位】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>整数（不使用指数或科学计数法）会被精确到 15 位：</p>
<p id="demo"></p>
<script>
var x = 999999999999999;
var y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【浮点算术不总是 100% 精确】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>浮点的算数并不总是 100% 精准：</p>
<p id="demo"></p>
<script>
var x = 0.2 + 0.1;
document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【但是可以通过乘并除以 10 解决此问题】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>浮点的算数并不总是 100% 精准：</p>
<p id="demo1"></p>
<p>但是乘法和除法是有用的：</p>
<p id="demo2"></p>
<script>
var x = 0.2 + 0.1;
document.getElementById("demo1").innerHTML = "0.2 + 0.1 = " + x;
var y = (0.2*10 + 0.1*10) / 10;
document.getElementById("demo2").innerHTML = "0.2 + 0.1 = " + y;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【两数相加会产生新数】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>如果您对两个数相加，结果将是一个数：</p>
<p id="demo"></p>
<script>
var x = 10;
var y = 20;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【两个数字字符串相加会产生连接的字符串】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>如果添加两个数字字符串，结果将是级联字符串：</p>
<p id="demo"></p>
<script>
var x = "10";
var y = "20";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【数字和数字字符串相加也会产生连接的字符串】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>如果数字和数字字符串相加，结果将是级联字符串：</p>
<p id="demo"></p>
<script>
var x = 10;
var y = "20";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【数字字符串和数字相加也会产生连接的字符串】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>如果数字字符串和数字相加，结果将是级联字符串：</p>
<p id="demo"></p>
<script>
var x = "10";
var y = 20;
document.getElementById("demo").innerHTML = "结果是：" + x + y;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【字符串和数字相加的常见错误 1】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>一个常见的错误是期望这个结果为 30：</p>
<p id="demo"></p>
<script>
var x = 10;
var y = 20;
document.getElementById("demo").innerHTML = "结果是：" + x + y;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【字符串和数字相加的常见错误 2】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>一个常见的错误是期望这个结果是 102030：</p>
<p id="demo"></p>
<script>
var x = 10;
var y = 20;
var z = "30";
var result = x + y + z;
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【在除法运算时，JavaScript 会尝试把字符串转换为数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>在相除时，JavaScript 会尝试把字符串转换为数字：</p>
<p id="demo"></p>
<script>
var x = "100";
var y = "10";
var z = x / y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【在乘法运算时，JavaScript 会尝试把字符串转换为数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>在相乘时，JavaScript 会尝试把字符串转换为数字：</p>
<p id="demo"></p>
<script>
var x = "100";
var y = "10";
var z = x * y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【在减法运算时，JavaScript 会尝试把字符串转换为数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>在相减时，JavaScript 会尝试把字符串转换为数字：</p>
<p id="demo"></p>
<script>
var x = "100";
var y = "10";
var z = x - y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【在加法运算时，JavaScript 不会把字符串转换为数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>在相加时，JavaScript 不会把字符串转换为数字：</p>
<p id="demo"></p>
<script>
var x = "100";
var y = "10";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【被字符串除的数不再是数】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>用非数字字符串进行除法会得到 NaN（Not a Number）：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 / "Apple";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【数字除以数字字符串为数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>数字除以数字字符串将是数字：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 / "10";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【全局 JavaScript 函数 isNaN() 判断值是否为数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>您可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数：</p>
<p id="demo"></p>
<script>
var x = 100 / "Apple";
document.getElementById("demo").innerHTML = isNaN(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【在数学运算中使用 NaN 会始终返回 NaN】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>假如您在数学运算中使用了 NaN，则结果也将是 NaN：</p>
<p id="demo"></p>
<script>
var x = NaN;
var y = 5;
document.getElementById("demo").innerHTML = x + y;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【在数学字符串运算中使用 NaN 将连接 NaN】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>假如您在数学运算中使用了 NaN，则结果可能是级联：</p>
<p id="demo"></p>
<script>
var x = NaN;
var y = "5";
document.getElementById("demo").innerHTML = x + y;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【NaN 的类型是数字（没错！typeof NaN 返回 number）】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>NaN 是数，typeof NaN 返回 number：</p>
<p id="demo"></p>
<script>
var x = NaN;
document.getElementById("demo").innerHTML = typeof x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【如果计算出最大可能数字之外的数字，则返回无穷大（Infinity）】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值：</p>
<p id="demo"></p>
<script>
var myNumber = 2;
var txt = "";
while (myNumber != Infinity) {
myNumber = myNumber * myNumber;
txt = txt + myNumber + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【被零除会生成 Infinity】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>除以 0（零）也会生成 Infinity：</p>
<p id="demo"></p>
<script>
var x = 2/0;
var y = -2/0;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Infinity 也是数（typeof Infinity 返回 number）】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>Infinity 是数字：</p>
<p id="demo"></p>
<script>
var x = Infinity;
document.getElementById("demo").innerHTML = typeof x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【前缀为 0x 的常量会被解释为十六进制】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>前缀为 0x 的数值常量会被解释为十六进制：</p>
<p id="demo"></p>
<script>
var x = 0xFF;
document.getElementById("demo").innerHTML = "0xFF = " + x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【toString() 方法能够以十六进制、八进制或二进制输出数】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>toString() 方法以基数 2 到 36 输出字符串：</p>
<p id="demo"></p>
<script>
var myNumber = 32;
document.getElementById("demo").innerHTML =
"32 = " + "<br>" +
" Decimal " + myNumber.toString(10) + "<br>" +
" Hexadecimal " + myNumber.toString(16) + "<br>" +
" Octal " + myNumber.toString(8) + "<br>" +
" Binary " + myNumber.toString(2);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【数字可以是对象】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>数字可以是对象，但是没有必要把数字创建为对象。</p>
<p id="demo"></p>
<script>
var x = 123;
var y = new Number(123);
document.getElementById("demo").innerHTML = typeof x + "<br>" + typeof y;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【数字和对象无法安全地比较】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>绝对不要把数字创建为对象。</p>
<p>数字和对象无法安全地比较。</p>
<p id="demo"></p>
<script>
var x = 500; // x 是数字
var y = new Number(500); // y 是对象
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【对象和对象无法安全地比较】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>绝对不要把数字创建为对象。</p>
<p>数字和对象无法安全地比较。</p>
<p id="demo"></p>
<script>
var x = new Number(500); // x 是对象
var y = new Number(500); // y 是对象
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 数字方法
完整实例【toString() 方法将数字转换为字符串】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>toString() 方法以基数 2 到 36 输出字符串：</p>
<p id="demo"></p>
<script>
var myNumber = 32;
document.getElementById("demo").innerHTML =
"32 = " + "<br>" +
" Decimal " + myNumber.toString(10) + "<br>" +
" Hexadecimal " + myNumber.toString(16) + "<br>" +
" Octal " + myNumber.toString(8) + "<br>" +
" Binary " + myNumber.toString(2);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【valueOf() 方法以数字返回数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字方法</h1>
<p>valueOf() 把数字返回为数字：</p>
<p id="demo"></p>
<script>
var x = 123;
document.getElementById("demo").innerHTML =
x.valueOf() + "<br>" +
(123).valueOf() + "<br>" +
(100 + 23).valueOf();
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【toExponential() 返回一个带指数表示法的数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字方法</h1>
<p>toExponential() 方法返回一个字符串，包含进行舍入的数字并使用指数表示法。</p>
<p>可选参数定义小数点后面的位数。</p>
<p id="demo"></p>
<script>
var x = 9.656;
document.getElementById("demo").innerHTML =
x.toExponential() + "<br>" +
x.toExponential(2) + "<br>" +
x.toExponential(4) + "<br>" +
x.toExponential(6);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【toFixed() 方法将数字四舍五入为指定位的数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字方法</h1>
<p>toFixed() 方法将数字四舍五入为给定的位数。</p>
<p>对于处理金钱，toFixed(2) 是完美的。</p>
<p id="demo"></p>
<script>
var x = 9.656;
document.getElementById("demo").innerHTML =
x.toFixed(0) + "<br>" +
x.toFixed(2) + "<br>" +
x.toFixed(4) + "<br>" +
x.toFixed(6);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【toPrecision() 返回指定长度的数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字方法</h1>
<p>toPrecision() 方法返回一个字符串，其中包含一个用指定长度写的数字：</p>
<p id="demo"></p>
<script>
var x = 9.656;
document.getElementById("demo").innerHTML =
x.toPrecision() + "<br>" +
x.toPrecision(2) + "<br>" +
x.toPrecision(4) + "<br>" +
x.toPrecision(6);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【全局方法 Number() 将变量转换为数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 全局方法</h1>
<p>Number() 方法把变量转换为数字：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Number(true) + "<br>" +
Number(false) + "<br>" +
Number("10") + "<br>" +
Number(" 10") + "<br>" +
Number("10 ") + "<br>" +
Number(" 10 ") + "<br>" +
Number("10.33") + "<br>" +
Number("10,33") + "<br>" +
Number("10 33") + "<br>" +
Number("Bill");
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【全局方法 Number() 甚至可以将日期转换为数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 全局方法</h1>
<p>Number() 方法可以把日期转换为数字：</p>
<p id="demo"></p>
<script>
var x = new Date("2017-09-30");
document.getElementById("demo").innerHTML = Number(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【全局方法 parseInt() 将字符串转换为数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 全局函数</h1>
<p>全局 JavaScript 函数 parseInt() 把字符串转换为数字：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
parseInt("10") + "<br>" +
parseInt("10.33") + "<br>" +
parseInt("10 6") + "<br>" +
parseInt("10 years") + "<br>" +
parseInt("years 10");
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【全局方法 parseFloat() 将字符串转换为数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 全局方法</h1>
<p>parseFloat() 方法把字符串转换为数字：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
parseFloat("10") + "<br>" +
parseFloat("10.33") + "<br>" +
parseFloat("10 6") + "<br>" +
parseFloat("10 years") + "<br>" +
parseFloat("years 10");
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【MAX_VALUE 返回 JavaScript 中可能的最大数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Number 对象属性</h1>
<p>MAX_VALUE 返回 JavaScript 中可能的最大值。</p>
<p id="demo"></p>
<script>
var x = Number.MAX_VALUE;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【MIN_VALUE 返回 JavaScript 中可能的最小数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Number 对象属性</h1>
<p>MIN_VALUE 返回 JavaScript 中可能的最小数字。</p>
<p id="demo"></p>
<script>
var x = Number.MIN_VALUE;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【POSITIVE_INFINITY 表示无穷大】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Number 对象属性</h1>
<p>POSITIVE_INFINITY</p>
<p id="demo"></p>
<script>
var x = Number.POSITIVE_INFINITY;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【溢出时返回 POSITIVE_INFINITY】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Number 对象属性</h1>
<p>溢出时返回 POSITIVE_INFINITY：</p>
<p id="demo"></p>
<script>
var x = 1 / 0;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【NEGATIVE_INFINITY 表示负无穷大】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Number 对象属性</h1>
<p>NEGATIVE_INFINITY</p>
<p id="demo"></p>
<script>
var x = Number.NEGATIVE_INFINITY;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【溢出时返回 NEGATIVE_INFINITY】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Number 对象属性</h1>
<p>NEGATIVE_INFINITY</p>
<p id="demo"></p>
<script>
var x = -1 / 0;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【NaN 代表“非数字”】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Number 对象属性</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Number.NaN;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【对字符串执行的算术将导致 NaN】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数字</h1>
<p>数字除以非数字字符串会成为 NaN (Not a Number)：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 / "Apple";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【对变量使用数字属性将返回 undefined】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Number 对象属性</h1>
<p>对变量、表达式或值使用数字属性，将返回 undefined：</p>
<p id="demo"></p>
<script>
var x = 6;
document.getElementById("demo").innerHTML = x.MAX_VALUE;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 数学
完整实例【Math.PI 返回 PI 的值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math.PI</h1>
<p>Math.PI 返回圆周长与直径的比率：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.PI;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Math.round(x) 返回 x 的 取整值（舍入值）】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math.round()</h1>
<p>Math.round(x) 返回 x 四舍五入到最接近的整数的值：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.round(4.4);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Math.pow(x, y) 返回 x 的 y 次方】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math.pow()</h1>
<p>Math.pow(x,y) 返回 x 的 y 次幂的值：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.pow(8,2);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Math.sqrt(x) 返回 x 的平方】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math.sqrt()</h1>
<p>Math.sqrt(x) 返回 x 的平方根：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.sqrt(64);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Math.abs(x) 返回 x 的绝对值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math.abs()</h1>
<p>Math.abs(x) 返回 x 的绝对值：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.abs(-4.4);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Math.ceil(x) 返回 x 的向上舍入值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math.ceil()</h1>
<p>Math.ceil() 把数字上舍入为最接近的整数：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.ceil(4.4);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Math.floor(x) 返回 x 的向下舍入值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math.floor()</h1>
<p>Math.floor(x) 返回 x 被下舍入为最接近整数的值：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.floor(4.7);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Math.sin(x) 返回角度 x（以弧度计）的正弦】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math.sin()</h1>
<p>Math.sin(x) 返回 x（以弧度计）的正弦：</p>
<p>以弧度计的角度 = (以度数计的角度) * PI / 180。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"The sine value of 90 degrees is " + Math.sin(90 * Math.PI / 180);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Math.cos(x) 返回角度 x（以弧度计）的余弦】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math.cos()</h1>
<p>Math.cos(x) 返回 x（以弧度计）的余弦：</p>
<p>以弧度计的角度 = (以度数计的角度) * PI / 180。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"The cosine value of 0 degrees is " + Math.cos(0 * Math.PI / 180);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Math.max() 返回参数列表中的最高值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math.max()</h1>
<p>Math.max() 返回参数列表中的最高值：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Math.max(0, 150, 30, 20, -8, -200);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Math.min() 返回参数列表中的最低值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math.min()</h1>
<p>Math.min() 返回参数列表中的最低值：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Math.min(0, 150, 30, 20, -8, -200);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把摄氏度转换为华氏度】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 摄氏度转华氏度</h2>
<p>在下面的输入字段之一中插入一个数字：</p>
<p><input id="c" onkeyup="convert('C')"> 摄氏度</p>
<p><input id="f" onkeyup="convert('F')"> 华氏度</p>
<p>请注意，使用了 <b>Math.round()</b> 方法，因此结果将作为整数返回。</p>
<script>
function convert(degree) {
var x;
if (degree == "C") {
x = document.getElementById("c").value * 9 / 5 + 32;
document.getElementById("f").value = Math.round(x);
} else {
x = (document.getElementById("f").value -32) * 5 / 9;
document.getElementById("c").value = Math.round(x);
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 随机
完整实例【Math.random() 返回介于 0（包括）与 1（不包括）之间的随机整数】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.random()</h2>
<p>Math.random() 返回 0（包含）和 1（不包括）之间的随机数：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.random();
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【如何返回介于 0 与 9 之间（都包括）的随机整数】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math</h2>
<p>Math.floor(Math.random() * 10) 返回 0 与 9 之间的随机整数（均包含）：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 10);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【如何返回介于 0 与 10 之间（都包括）的随机整数】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math</h2>
<p>Math.floor(Math.random() * 11) 返回 0 与 10 之间的随机整数（均包含）：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 11);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【如何返回介于 0 与 99 之间（都包括）的随机整数】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math</h2>
<p>Math.floor(Math.random() * 100)) 返回 0 与 99 之间的随机整数（均包含）：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 100);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【如何返回介于 0 与 100 之间（都包括）的随机整数】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math</h2>
<p>Math.floor() 与 Math.random() * 101 一起使用，返回 0 与 100 之间的随机整数（均包含）：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 101);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【如何返回介于 1 与 10 之间（都包括）的随机整数】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math</h2>
<p>Math.floor(Math.random() * 10) + 1) 返回 1 与 10 之间的随机整数（均包含）：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 10) + 1;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【如何返回介于 1 与 100 之间（都包括）的随机整数】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math</h2>
<p>Math.floor(Math.random() * 100) + 1) 返回 1 与 100 之间的随机整数（均包含）：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 100) + 1;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【如何返回介于 x（包括）与 y（不包括）之间的随机整数】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.random()</h2>
<p>每当您点击按钮，getRndInteger(min, max) 就会返回 0 与 9（均包含）之间的随机数：</p>
<button onclick="document.getElementById('demo').innerHTML = getRndInteger(0,10)">点击我</button>
<p id="demo"></p>
<script>
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【如何返回介于 x 与 y 之间（都包括）的随机整数】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.random()</h2>
<p>每当您点击按钮，getRndInteger(min, max) 就会返回 1 与 10（均包含）之间的随机数：</p>
<button onclick="document.getElementById('demo').innerHTML = getRndInteger(1,10)">点击我</button>
<p id="demo"></p>
<script>
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 日期
完整实例【使用 Date() 来显示今天的日期和时间】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript new Date()</h2>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 getFullYear() 显示年份】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript getFullYear()</h2>
<p>getFullYear() 方法返回日期的完整年：</p>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 getTime() 计算 1970 年至今的毫秒数】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript getTime()</h2>
<p>JavaScript 中的内部时钟从 1970 年 1 月 1 日午夜开始计算。</p>
<p>getTime() 函数返回从那时起的毫秒数：</p>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 setFullYear() 设置一个具体的日期】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript setFullYear()</h2>
<p>setFullYear() 方法设置日期对象的年份：</p>
<p id="demo"></p>
<script>
var d = new Date();
d.setFullYear(2020);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 toUTCString() 把今天的日期（根据 UTC）转换为字符串】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Date()</h2>
<p>toUTCString() 方法将日期转换为 UTC 字符串（日期显示标准）：</p>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.toUTCString();
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 getDay() 以数字显示星期名】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript getDay()</h2>
<p>getDay() 方法将周名作为数字返回：</p>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getDay();
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 getDay() 以及一个数组以名称显示星期名】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript getDay()</h2>
<p>getDay() 方法将周名作为数字返回：</p>
<p>您可以使用数组来显示星期的名称：</p>
<p id="demo"></p>
<script>
var d = new Date();
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
document.getElementById("demo").innerHTML = days[d.getDay()];
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【显示时钟】：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 显示时钟</title>
</head>
<body>
<div id="demo"></div>
<script>
var demo = document.getElementById('demo')
//不足十位补零
var addZero = val => val < 10 ? '0' + val : val
//把阿拉伯数字的星期转化为中国汉字的星期 // 星期映射表
var trans = val => {
var obj = {
0: '日',
1: '一',
2: '二',
3: '三',
4: '四',
5: '五',
6: '六'
}
return obj[val]
}
setTime ()
//获取时间的方法
function setTime() {
var time = new Date();
var year = time.getFullYear(); // 获取年
var month = time.getMonth() + 1; // 获取月（是从0到11，所以我们要给他加1）
var date = time.getDate(); // 获取日
var day = time.getDay(); // 获取星期几(0是星期日)
var hour = time.getHours(); // 获取小时
var min = time.getMinutes(); // 获取分钟
var sec = time.getSeconds(); // 获取秒
var value = year + '年' + addZero(month) + '月' + addZero(date) + '日 星期' + trans(day) + ' '+addZero(hour) +
'时' + addZero(min) + '分' + addZero(sec) + '秒'
// 把所有的时间拼接到一起
demo.innerText = value
// console.log(value)
// 把拼接好的时间插入到页面
}
// 让定时器每间隔一秒就执行一次setTime这个方法（这是实现时钟的核心）
setInterval(setTime, 1000)
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 数组
完整实例【创建数组 1】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p id="demo"></p>
<script>
var cars = ["Audi", "BMW", "porsche"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【创建数组 2】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p id="demo"></p>
<script>
var cars = [
"Audi",
"BMW",
"porsche"
];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【访问数组元素】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>使用数字索引（从 0 开始）访问 JavaScript 数组元素。</p>
<p id="demo"></p>
<script>
var cars = ["Audi", "BMW", "porsche"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【更改数组元素】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>使用数字索引（从 0 开始）访问 JavaScript 数组元素。</p>
<p id="demo"></p>
<script>
var cars = ["Audi", "BMW", "porsche"];
cars[0] = "Volvo";
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【访问整个数组】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p id="demo"></p>
<script>
var cars = ["Audi", "BMW", "porsche"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【确定数组的长度】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>length 属性返回数组长度。</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.length;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【遍历数组】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>遍历数组的最佳方法是使用标准的 for 循环：</p>
<p id="demo"></p>
<script>
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【向数组添加元素】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>length 属性提供了一种在不使用 push() 方法的情况下将新元素附加到数组的简便方法。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits[fruits.length] = "Lemon";
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【将未定义的“孔”添加到数组中】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>添加具有高索引的元素可以在数组中创建未定义的“孔”。</p>
<p id="demo"></p>
<script>
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";
fLen = fruits.length;
text = "";
for (i = 0; i < fLen; i++) {
text += fruits[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【如何识别数组 1】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>当在数组上使用时，instanceof 运算符返回true：</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits instanceof Array;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【如何识别数组 2】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>新的 ECMASCRIPT 5 方法 isArray 在数组上使用时返回 true：</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = Array.isArray(fruits);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 数组方法
完整实例【向数组添加元素】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组方法</h1>
<h2>push()</h2>
<p>push() 方法将新元素追加到数组中。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.push("Kiwi");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【删除数组中最后一个元素 - pop()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组方法</h1>
<h2>pop()</h2>
<p>pop() 方法从数组中删除最后一个元素。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【将数组的所有元素连接成一个字符串 - join()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组方法</h1>
<h2>join()</h2>
<p>join() 方法将数组元素连接成一个字符串。</p>
<p>在这个例子中我们使用“*”作为元素之间的分隔符：</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【连接两个数组 - concat()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组方法</h1>
<h2>concat()</h2>
<p>concat() 方法用于合并（连接）数组：</p>
<p id="demo"></p>
<script>
var myGirls = ["Emma", "Isabella"];
var myBoys = ["Jacob", "Michael", "Ethan"];
var myChildren = myGirls.concat(myBoys);
document.getElementById("demo").innerHTML = myChildren;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【连接三个数组 - concat()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组方法</h1>
<h2>concat()</h2>
<p>concat() 方法用于合并（连接）数组：</p>
<p id="demo"></p>
<script>
var arr1 = ["Emma", "Isabella"];
var arr2 = ["Jacob", "Michael", "Ethan"];
var arr3 = ["Joshua", "Daniel"];
var myChildren = arr1.concat(arr2, arr3);
document.getElementById("demo").innerHTML = myChildren;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【将一个元素添加到数组中的位置 2 - splice()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组方法</h1>
<h2>splice()</h2>
<p>splice() 方法将新元素添加到数组中。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "原数组：<br>" + fruits;
function myFunction() {
fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = "新数组：<br>" + fruits;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把数组转换为字符串 - toString()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组方法</h1>
<h2>toString()</h2>
<p>toString() 方法以逗号分隔的字符串返回数组：</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把新元素添加到数组的开头 - unshift()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组方法</h1>
<h2>unshift()</h2>
<p>unshift() 方法将新元素添加到数组的开头。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.unshift("Lemon");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【删除数组中的第一个元素 - shift()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组方法</h1>
<h2>shift()</h2>
<p>shift() 方法删除数组的第一个元素（并将所有其他元素“移位”到左侧）：</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【选取数组中的元素 - slice()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组方法</h1>
<h2>splice()</h2>
<p>splice() 方法将新元素添加到数组中。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "原数组：<br>" + fruits;
function myFunction() {
fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = "新数组：<br>" + fruits;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 数组排序
完整实例【按升序对数组排序】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组排序</h1>
<p>sort() 方法按字母顺序对数组进行排序。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.sort();
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【按降序对数组排序】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组排序反转</h1>
<p>reverse() 方法反转数组中的元素。</p>
<p>通过组合 sort() 和 reverse()，您可以按降序对数组进行排序。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
// Create and display an array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
// First sort the array
fruits.sort();
// Then reverse it:
fruits.reverse();
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【按升序排列数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组排序</h1>
<p>单击按钮以升序对数组进行排序。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
points.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【按降序排列数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组排序</h1>
<p>单击按钮可按降序对数组进行排序。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
points.sort(function(a, b){return b - a});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【排序数字（按字母顺序或数字顺序）】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组排序</h1>
<p>单击按钮可按字母顺序或数字顺序对数组进行排序。</p>
<button onclick="myFunction1()">按字母排序</button>
<button onclick="myFunction2()">按数字排序</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction1() {
points.sort();
document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
points.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【按随机顺序排序数组中的数字】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组排序</h1>
<p>请反复点击按钮，对数组进行随机排序。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
points.sort(function(a, b){return 0.5 - Math.random()});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【确定数组中最小的数】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组排序</h1>
<p>最低值是：<span id="demo"></span></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
document.getElementById("demo").innerHTML = points[0];
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【确定数组中最大的数】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组排序</h1>
<p>最高值是：<span id="demo"></span></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
document.getElementById("demo").innerHTML = points[0];
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 Math.min() 确定数组中最小的数】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组排序</h1>
<p>最低值是：<span id="demo"></span></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);
function myArrayMin(arr) {
return Math.min.apply(null, arr);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 Math.max() 确定数组中最大的数】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组排序</h1>
<p>最高值是：<span id="demo"></span></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用“自制的” myArrayMin 方法】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组排序</h1>
<p>最低值是：<span id="demo"></span></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);
function myArrayMin(arr) {
var len = arr.length;
var min = Infinity;
while (len--) {
if (arr[len] < min) {
min = arr[len];
}
}
return min;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用“自制的” myArrayMax 方法】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组排序</h1>
<p>最高值是：<span id="demo"></span></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);
function myArrayMax(arr) {
var len = arr.length;
var max = -Infinity;
while (len--) {
if (arr[len] > max) {
max = arr[len];
}
}
return max;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【按数字属性排序对象】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组排序</h1>
<p>点击按钮按年份对汽车进行排序：</p>
<button onclick="myFunction()">排序</button>
<p id="demo"></p>
<script>
var cars = [
{type:"BMW", year:2017},
{type:"Audi", year:2019},
{type:"porsche", year:2018}
];
displayCars();
function myFunction() {
cars.sort(function(a, b){return a.year - b.year});
displayCars();
}
function displayCars() {
document.getElementById("demo").innerHTML =
cars[0].type + " " + cars[0].year + "<br>" +
cars[1].type + " " + cars[1].year + "<br>" +
cars[2].type + " " + cars[2].year;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【按字符串属性排序对象】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组排序</h1>
<p>点击按钮按车型对汽车进行排序：</p>
<button onclick="myFunction()">排序</button>
<p id="demo"></p>
<script>
var cars = [
{type:"BMW", year:2017},
{type:"Audi", year:2019},
{type:"porsche", year:2018}
];
displayCars();
function myFunction() {
cars.sort(function(a, b){
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});
displayCars();
}
function displayCars() {
document.getElementById("demo").innerHTML =
cars[0].type + " " + cars[0].year + "<br>" +
cars[1].type + " " + cars[1].year + "<br>" +
cars[2].type + " " + cars[2].year;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 数组迭代
完整实例【Array.forEach()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.forEach()</h1>
<p>为每个元素调用一次函数。</p>
<p id="demo"></p>
<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) {
txt = txt + value + "<br>";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Array.map()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.map()</h1>
<p>通过对每个数组元素执行函数来创建新数组。</p>
<p id="demo"></p>
<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) {
return value * 2;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Array.filter()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.filter()</h1>
<p>使用通过测试的所有数组元素创建一个新数组。</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Array.reduce()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.reduce()</h1>
<p>此例确定数组中所有数字的总和：</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "总和是：" + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Array.reduceRight()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.reduceRight()</h1>
<p>此例确定数组中所有数字的总和：</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "总和是：" + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Array.every()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.every()</h1>
<p>every() 方法检查所有数组值是否通过测试。</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "所有大于 18 的是：" + allOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Array.some()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.some()</h1>
<p>some() 方法检查某些数组值是否通过了测试。</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
document.getElementById("demo").innerHTML = "某些值大于 18 是：" + someOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Array.indexOf()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.indexOf()</h1>
<p id="demo"></p>
<script>
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
document.getElementById("demo").innerHTML = "Apple 被找到的位置是：" + (a + 1);
</script>
<p>Internet Explorer 8 或更早的版本不支持 indexOf()。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Array.lastIndexOf()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.lastIndexOf()</h1>
<p id="demo"></p>
<script>
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
document.getElementById("demo").innerHTML = "Apple is found in position " + (a + 1);
</script>
<p>Internet Explorer 8 或更早的版本不支持 lastIndexOf()。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Array.find()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.find()</h1>
<p id="demo"></p>
<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
document.getElementById("demo").innerHTML = "大于 18 的第一个值是：" + first;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Array.findIndex()】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.findIndex()</h1>
<p id="demo"></p>
<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
document.getElementById("demo").innerHTML = "大于 18 的第一个值的索引是：" + first;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 类型转换
完整实例【显示所有变量的类型】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof 运算符</h2>
<p>typeof 运算符返回变量、对象、函数或表达式的类型。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof "john" + "<br>" +
typeof 3.14 + "<br>" +
typeof NaN + "<br>" +
typeof false + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof {name:'john', age:34} + "<br>" +
typeof new Date() + "<br>" +
typeof function () {} + "<br>" +
typeof myCar + "<br>" +
typeof null;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【显示所有变量类型的构造器】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript constructor 属性</h2>
<p>constructor 属性返回变量或对象的构造器函数。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"john".constructor + "<br>" +
(3.14).constructor + "<br>" +
false.constructor + "<br>" +
[1,2,3,4].constructor + "<br>" +
{name:'john', age:34}.constructor + "<br>" +
new Date().constructor + "<br>" +
function () {}.constructor;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 String() 把数转换为字符串】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String() 方法</h2>
<p>String() 方法把数字转换为字符串。</p>
<p id="demo"></p>
<script>
var x = 123;
document.getElementById("demo").innerHTML =
String(x) + "<br>" +
String(123) + "<br>" +
String(100 + 23);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 toString() 把数转换为字符串】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数字方法</h2>
<p>toString() 方法把数字转换为字符串。</p>
<p id="demo"></p>
<script>
var x = 123;
document.getElementById("demo").innerHTML =
x.toString() + "<br>" +
(123).toString() + "<br>" +
(100 + 23).toString();
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【确认变量是否是数组】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.isArray()</h1>
<p>单击按钮以检查“fruits”是否为数组。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【确认变量是否是日期】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Date 对象</h1>
<p>这个“自制的” isDate() 函数在日期上使用时返回 true：</p>
<p id="demo"></p>
<script>
var myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);
function isDate(myDate) {
return myDate.constructor.toString().indexOf("Date") > -1;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 布尔
完整实例【显示 Boolean(10 > 9) 的值】：
<!DOCTYPE html>
<html>
<body>
<p>显示 Boolean(10 > 9) 的值：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Boolean(10 > 9);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【显示 10 > 9 的值】：
<!DOCTYPE html>
<html>
<body>
<p>显示 10 > 9 的值：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = 10 > 9;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【拥有真正值的一切均为 true】：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var b1 = Boolean(100);
var b2 = Boolean(3.14);
var b3 = Boolean(-15);
var b4 = Boolean("Hello");
var b5 = Boolean('false');
var b6 = Boolean(1 + 7 + 3.14);
document.getElementById("demo").innerHTML =
"100 是 " + b1 + "<br>" +
"3.14 是 " + b2 + "<br>" +
"-15 是 " + b3 + "<br>" +
"任何（非空）字符串是 " + b4 + "<br>" +
"即使字符串 'false' 也是 " + b5 + "<br>" +
"任何表达式（除了零）是 " + b6;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【零的布尔值是 false】：
<!DOCTYPE html>
<html>
<body>
<p>显示 0 的布尔值：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【减零（minus zero）的布尔值是 false】：
<!DOCTYPE html>
<html>
<body>
<p>显示 -0 的布尔值：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = -0;
document.getElementById("demo").innerHTML = Boolean(x);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【空字符串的布尔值是 false】：
<!DOCTYPE html>
<html>
<body>
<p>显示 "" 的布尔值：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = "";
document.getElementById("demo").innerHTML = Boolean(x);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【undefined 的布尔值是 false】：
<!DOCTYPE html>
<html>
<body>
<p>显示 undefined 的布尔值：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x;
document.getElementById("demo").innerHTML = Boolean(x);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【null 的布尔值是 false】：
<!DOCTYPE html>
<html>
<body>
<p>显示 null 的布尔值：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = null;
document.getElementById("demo").innerHTML = Boolean(x);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【false 的布尔值是 false】：
<!DOCTYPE html>
<html>
<body>
<p>显示 false 的布尔值：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = false;
document.getElementById("demo").innerHTML = Boolean(x);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【NaN 的布尔值是 false】：
<!DOCTYPE html>
<html>
<body>
<p>显示 NaN 的布尔值：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = 10 / "H";
document.getElementById("demo").innerHTML = Boolean(x);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 比较
完整实例【把 5 赋值给 x，然后显示 (x == 8) 的值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x == 8) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x == 8);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把 5 赋值给 x，然后显示 (x == 5) 的值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x == 5) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x == 5);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把 5 赋值给 x，然后显示 (x === 5) 的值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x === 5) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x === 5);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把 5 赋值给 x，然后显示 (x === "5") 的值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x == "5") 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x == "5");
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把 5 赋值给 x，然后显示 (x != 8) 的值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x != 8) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x != 8);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把 5 赋值给 x，然后显示 (x !== 5) 的值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x !== 5) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x !== 5);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把 5 赋值给 x，然后显示 (x !== "5") 的值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x !== "5") 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x !== "5");
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把 5 赋值给 x，然后显示 (x > 8) 的值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x > 8) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x > 8);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把 5 赋值给 x，然后显示 (x < 8) 的值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x < 8) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x < 8);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把 5 赋值给 x，然后显示 (x >= 8) 的值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x >= 8) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x >= 8);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【把 5 赋值给 x，然后显示 (x <= 8) 的值】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 比较</h1>
<p>把 5 赋值给 x，然后显示比较 (x <= 8) 的值：</p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x <= 8);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 条件
完整实例【if 语句】：
<!DOCTYPE html>
<html>
<body>
<p>如果小时小于18:00，显示“美好的一天！”：</p>
<p id="demo">晚安</p>
<script>
if (new Date().getHours() < 18) {
document.getElementById("demo").innerHTML = "美好的一天！";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【else 语句】：
<!DOCTYPE html>
<html>
<body>
<p>单击按钮以显示基于时间的问候语：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "日安";
} else {
greeting = "晚安";
}
document.getElementById("demo").innerHTML = greeting;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【else if 语句】：
<!DOCTYPE html>
<html>
<body>
<p>单击按钮以显示基于时间的问候语：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var greeting;
var time = new Date().getHours();
if (time < 10) {
greeting = "早安";
} else if (time < 20) {
greeting = "日安";
} else {
greeting = "晚安";
}
document.getElementById("demo").innerHTML = greeting;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【随机链接】：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
if (Math.random() < 0.5) {
text = "<a href='http://www.phpcodeweb.com/'>访问 phpcodeweb</a>";
} else {
text = "<a href='https://wwf.org'>访问 WWF</a>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【Switch 语句】：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var day;
switch (new Date().getDay()) {
case 0:
day = "周日";
break;
case 1:
day = "周一";
break;
case 2:
day = "周二";
break;
case 3:
day = "周三";
break;
case 4:
day = "周四";
break;
case 5:
day = "周五";
break;
case 6:
day = "周六";
}
document.getElementById("demo").innerHTML = "今天是" + day;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 循环
完整实例【for 循环】：
<!DOCTYPE html>
<html>
<body>
<p>单击按钮循环一段代码五次。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = "", i;
for (i=0; i<5; i++) {
x = x + "数字是：" + i + "<br>";
}
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【遍历 HTML 标题】：
<!DOCTYPE html>
<html>
<body>
<p>单击按钮从 1 到 6 循环，以生成 HTML 标题。</p>
<button onclick="myFunction()">试一试</button>
<div id="demo"></div>
<script>
function myFunction() {
var x ="", i;
for (i=1; i<=6; i++) {
x = x + "<h" + i + ">标题 " + i + "</h" + i + ">";
}
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【while 循环】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript while</h2>
<p id="demo"></p>
<script>
var text = "";
var i = 0;
while (i < 10) {
text += "<br>数字是 " + i;
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【do while 循环】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript do ... while</h2>
<p id="demo"></p>
<script>
var text = ""
var i = 0;
do {
text += "<br>数字是 " + i;
i++;
}
while (i < 10);
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【打破循环】：
<!DOCTYPE html>
<html>
<body>
<p>带 break 的循环</p>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 10; i++) {
if (i === 3) { break; }
text += "数字是 " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【打破并继续循环】：
<!DOCTYPE html>
<html>
<body>
<p>这个循环在 i=3 时跳过这一步：</p>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 10; i++) {
if (i === 3) { continue; }
text += "数字是 " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 for...in 语句遍历对象中的元素】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 循环</h1>
<p>for/in 语句循环遍历对象的属性。</p>
<p id="demo"></p>
<script>
var txt = "";
var person = {fname:"Bill", lname:"Gates", age:62};
var x;
for (x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 错误处理
完整实例【try...catch 语句】：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
try {
adddlert("欢迎您，亲爱的用户！");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【弹出提示框的 try...catch 语句】：
<!DOCTYPE html>
<html>
<head>
<script>
var txt = "";
function message() {
try {
adddlert("Welcome guest!");
}
catch(err) {
txt = "此页面出错。nn";
txt += "单击“确定”继续查看此页面，n";
txt += "或取消以返回主页。nn";
if(!confirm(txt)) {
document.location.href = "http://www.phpcodeweb.com/";
}
}
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onerror 事件】：
<!DOCTYPE html>
<html>
<head>
<script>
onerror = handleErr;
var txt = "";
function handleErr(msg, url, l) {
txt = "此页面出错。nn";
txt += "错误：" + msg + "n";
txt += "URL：" + url + "n";
txt += "Line：" + l + "nn";
txt += "单击“确定”以继续。nn";
alert(txt);
return true;
}
function message() {
adddlert("欢迎访客！");
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 正则表达式
完整实例【在字符串中检索表达式】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 正则表达式</h1>
<p>在字符串中搜索“phpcodeweb”，并显示匹配的位置：</p>
<p id="demo"></p>
<script>
var str = "Visit phpcodeweb!";
var n = str.search(/phpcodeweb/i);
document.getElementById("demo").innerHTML = n;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【检索表达式然后替换它】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 正则表达式</h1>
<p>将“microsoft”替换为以下段落中的“phpcodeweb”：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo">Please visit Microsoft and Microsoft!</p>
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i,"phpcodeweb");
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 对象
完整实例【创建 JavaScript 变量】：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 变量</h2>
<p id="demo"></p>
<script>
// 创建并显示变量：
var car = "porsche";
document.getElementById("demo").innerHTML = car;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【创建 JavaScript 对象】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象</h1>
<p id="demo"></p>
<script>
// 创建对象：
var car = {type:"porsche", model:"911", color:"white"};
// 显示对象中的数据：
document.getElementById("demo").innerHTML = car.type;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【创建 JavaScript 对象（单行）】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象创建</h1>
<p id="demo"></p>
<script>
// 创建对象：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【创建 JavaScript 对象（多行）】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象创建</h1>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
firstName : "Bill",
lastName : "Gates",
age : 62,
eyeColor : "blue"
};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 new 创建 JavaScript 对象】：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var person = new Object();
person.firstName = "Bill";
person.lastName = "Gates";
person.age = 50;
person.eyeColor = "blue";
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用构造器创建 JavaScript 对象】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<p id="demo"></p>
<script>
// Person 对象的构造器函数
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// 创建 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
// 显示年龄
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.age + ".";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【创建内置的 JavaScript 对象】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<p id="demo"></p>
<script>
var x1 = new Object(); // 新的 Object 对象
var x2 = new String(); // 新的 String 对象
var x3 = new Number(); // 新的 Number 对象
var x4 = new Boolean(); // 新的 Boolean 对象
var x5 = new Array(); // 新的 Array 对象
var x6 = new RegExp(); // 新的 RegExp 对象
var x7 = new Function(); // 新的 Function 对象
var x8 = new Date(); // 新的 Date 对象
// 显示所有对象的类型
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>" +
"x8: " + typeof x8 + "<br>";
</script>
<p>没有必要使用 String()、Number()、Boolean()、Array() 以及 RegExp()。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【创建 JavaScript 变量的最佳方式】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<p id="demo"></p>
<script>
var x1 = {}; // 对象
var x2 = ""; // 字符串
var x3 = 0; // 数字
var x4 = false; // 布尔
var x5 = []; // 对象（非数组）
var x6 = /()/; // 对象
var x7 = function(){}; // 函数
// 显示所有类型
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【JavaScript 对象是易变的】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象是易变的</h1>
<p>对对象副本的任何更改也将更改原始对象。</p>
<p id="demo"></p>
<script>
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"}
var x = person;
x.age = 10;
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 对象属性
完整实例【使用 .property 访问属性】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象属性</h1>
<p>访问对象属性有两种不同的方法：</p>
<p>您可以使用 .property 或 ["property"]。</p>
<p id="demo"></p>
<script>
var person = {
firstname:"Bill",
lastname:"Gates",
age:62,
eyecolor:"blue"
};
document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old.";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 [property] 访问属性】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象属性</h1>
<p>访问对象属性有两种不同的方法：</p>
<p>您可以使用 .property 或 ["property"]。</p>
<p id="demo"></p>
<script>
var person = {
firstname:"Bill",
lastname:"Gates",
age:62,
eyecolor:"blue"
};
document.getElementById("demo").innerHTML = person["firstname"] + " is " + person["age"] + " years old.";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 for in 访问属性】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象属性</h1>
<p id="demo"></p>
<script>
var txt = "";
var person = {fname:"Bill", lname:"Gates", age:62};
var x;
for (x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【向已有对象添加新属性】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象属性</h1>
<p>您可以向现有对象添加新属性。</p>
<p id="demo"></p>
<script>
var person = {
firstname:"Bill",
lastname:"Gates",
age:62,
eyecolor:"blue"
};
person.nationality = "English";
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.nationality + ".";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【从对象中删除属性】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象属性</h1>
<p>您可以删除对象属性。</p>
<p id="demo"></p>
<script>
var person = {
firstname:"Bill",
lastname:"Gates",
age:62,
eyecolor:"blue"
};
delete person.age;
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JSON 对象
完整实例【使用 .property 访问属性】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>使用点号表示法访问 JSON 对象：</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"Bill Gates", "age":62, "car":null};
x = myObj.name;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 [property] 访问属性】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>使用括号表示法访问 JSON 对象：</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"Bill Gates", "age":62, "car":null};
x = myObj["name"];
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【遍历属性】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何遍历 JSON 对象中的所有属性。</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"Bill Gates", "age":62, "car":null};
for (x in myObj) {
document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【遍历属性值】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>使用括号表示法访问属性值。</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"Bill Gates", "age":62, "car":null};
for (x in myObj) {
document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【访问嵌套的 JSON 对象】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何访问嵌套的 JSON 对象。</p>
<p id="demo"></p>
<script>
var myObj = {
"name":"Bill Gates",
"age":62,
"cars": {
"car1":"Porsche",
"car2":"BMW",
"car3":"Volvo"
}
}
document.getElementById("demo").innerHTML += myObj.cars.car2 + "<br>";
//or:
document.getElementById("demo").innerHTML += myObj.cars["car2"];
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用点号表示法修改值】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何修改 JSON 对象中的值。</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars": {
"car1":"Porsche",
"car2":"BMW",
"car3":"Volvo"
}
}
myObj.cars.car2 = "Mercedes Benz";
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用括号表示法修改值】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何使用括号表示法修改 JSON 对象中的值。</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars": {
"car1":"Porsche",
"car2":"BMW",
"car3":"Volvo"
}
}
myObj.cars["car2"] = "Mercedes Benz";
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【删除对象属性】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何删除 JSON 对象的属性。</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars": {
"car1":"Porsche",
"car2":"BMW",
"car3":"Volvo"
}
}
delete myObj.cars.car3;
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JSON 数组
完整实例【访问数组值】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>访问 JSON 对象的数组值。</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {
"name":"Bill Gates",
"age":62,
"cars":[ "Porsche", "BMW", "Volvo" ]
};
x = myObj.cars[0];
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 for-in 循环遍历数组】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>使用 for in 循环遍历数组</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars":[ "Porsche", "BMW", "Volvo" ]
};
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 for 循环遍历数组】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>使用 for 循环遍历数组</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars":[ "Porsche", "BMW", "Volvo" ]
};
for (i = 0; i < myObj.cars.length; i++) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【访问嵌套的 JSON 数组】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>遍历数组内的数组。</p>
<p id="demo"></p>
<script>
var myObj, i, j, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars": [
{"name":"Porsche", "models":["911", "Taycan"]},
{"name":"BMW", "models":["M5", "M3", "X5"]},
{"name":"Volvo", "models":["XC90", "V60"] }
]
}
for (i in myObj.cars) {
x += "<h2>" + myObj.cars[i].name + "</h2>";
for (j in myObj.cars[i].models) {
x += myObj.cars[i].models[j] + "<br>";
}
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【修改数组值】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>如何修改 JSON 对象的数组值。</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars": ["Porsche","BMW","Volvo"]
}
myObj.cars[2] = "Mercedes Benz";
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【删除数组项目】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>如何删除数组的属性。</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars": ["Porsche","BMW","Volvo"]
}
delete myObj.cars[2];
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JSON 解析
完整实例【使用 JSON 解析】：
<!DOCTYPE html>
<html>
<body>
<h1>用 JSON 字符串创建对象</h1>
<p id="demo"></p>
<script>
var text = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"Steve","lastName":"Jobs" },' +
'{"firstName":"Elon","lastName":"Musk" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【在 AJAX 实例中使用 JSON 解析】：
<!DOCTYPE html>
<html>
<body>
<h1>使用 XMLHttpRequest 获取文件的内容</h1>
<p>JSON 格式的内容能够轻松转换为 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "/example/json/json_demo.txt", true);
xmlhttp.send();
</script>
<p>查看 <a href="/example/json/json_demo.txt" target="_blank">json_demo.txt</a></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【对数组使用 JSON 解析】：
<!DOCTYPE html>
<html>
<body>
<h1>数组内容</h1>
<p>以 JSON 数组写的内容会被转换为 JavaScript 数组。</p>
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[0];
}
};
xmlhttp.open("GET", "/demo/json_demo_array.txt", true);
xmlhttp.send();
</script>
<p>查看 <a href="/example/json/json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【解析日期】：
<!DOCTYPE html>
<html>
<body>
<h1>把字符串转换为 date 对象</h1>
<p id="demo"></p>
<script>
var text = '{"name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 reviver 函数解析日期】：
<!DOCTYPE html>
<html>
<body>
<h1>把字符串转换为 date 对象</h1>
<p id="demo"></p>
<script>
var text = '{"name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
if (key == "birth") {
return new Date(value);
} else {
return value;
}
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【解析函数】：
<!DOCTYPE html>
<html>
<body>
<h1>把字符串转换为函数</h1>
<p id="demo"></p>
<script>
var text = '{"name":"Bill Gates", "age":"function() {return 62;}", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JSON Stringify
完整实例【使用 JSON 字符串化】：
<!DOCTYPE html>
<html>
<body>
<h1>从 JavaScript 对象创建 JSON 字符串</h1>
<p id="demo"></p>
<script>
var obj = { name: "Bill", age: 62, city: "Seatle" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【对数组使用 JSON 字符串化】：
<!DOCTYPE html>
<html>
<body>
<h1>用 JavaScript 数组创建 JSON 字符串</h1>
<p id="demo"></p>
<script>
var arr = [ "Bill Gates", "Steve Jobs", "Elon Musk" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【对日期字符串化】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON.stringify 会把任何日期对象转换为字符串</h1>
<p id="demo"></p>
<script>
var obj = { name: "Bill Gates", today: new Date(), city: "Seattle" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【对函数字符串化】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON.stringify 会删除对象中的任何函数</h1>
<p id="demo"></p>
<script>
var obj = { name: "Bill Gates", age: function () {return 62;}, city: "Seattle" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 toString() 方法对日期进行字符串化】：
<!DOCTYPE html>
<html>
<body>
<h1>JSON.stringify 会删除对象中的任何函数</h1>
<p>把函数转换为字符串，就可以在 JSON 对象中保留该函数。</p>
<p id="demo"></p>
<script>
var obj = { name: "Bill Gates", age: function () {return 62;}, city: "Seattle" };
obj.age = obj.age.toString();
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JSON PHP
完整实例【从 php 文件获取 JSON】：
<!DOCTYPE html>
<html>
<body>
<h1>从服务器上的 PHP 获取 JSON 数据</h1>
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "/demo/demo_php_json_encode.php", true);
xmlhttp.send();
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【从 php 文件获取 JSON 数组】：
<!DOCTYPE html>
<html>
<body>
<h1>从 PHP 文件获取 JSON 数据，并把它转换为 JavaScript 数组</h1>
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj[2];
}
};
xmlhttp.open("GET", "/demo/demo_php_json_encode_array.php", true);
xmlhttp.send();
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【从数据库获取 JSON】：
<!DOCTYPE html>
<html>
<body>
<h1>通过服务器上的 PHP 获取 JSON 数据</h1>
<p>从 PHP 文件接收的 JSON：</p>
<p id="demo"></p>
<script>
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "/demo/demo_json_db.php", true);
xmlhttp.send();
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【遍历来自数据库的结果】：
<!DOCTYPE html>
<html>
<body>
<h1>通过服务器上的 PHP 文件获取 JSON 数据</h1>
<p id="demo"></p>
<script>
var xmlhttp, myObj, x, txt = "";
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
for (x in myObj) {
txt += myObj[x].CustomerId + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("GET", "/demo/demo_json_db.php", true);
xmlhttp.send();
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【使用 POST 方法发送 JSON】：
<!DOCTYPE html>
<html>
<body>
<h1>使用 HTTP 方法 POST 把数据发送到 PHP 文件</h1>
<p id="demo"></p>
<script>
var xmlhttp, myObj, x, txt = "";
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
for (x in myObj) {
txt += myObj[x].CustomerId + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "/demo/demo_json_db.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JSON HTML
完整实例【生成基于 JSON 数据的 HTML 表格】：
<!DOCTYPE html>
<html>
<body>
<h2>做一个基于 JSON 数据的表格。</h2>
<p id="demo"></p>
<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "customers", limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<table border='1'>"
for (x in myObj) {
txt += "<tr><td>" + myObj[x].name + "</td></tr>";
}
txt += "</table>"
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【生成动态 HTML 表格】：
<!DOCTYPE html>
<html>
<body>
<h2>做一个基于下拉列表值的表格。</h2>
<select id="myselect" onchange="change_myselect(this.value)">
<option value="">Choose an option:</option>
<option value="customers">Customers</option>
<option value="products">Products</option>
<option value="suppliers">Suppliers</option>
</select>
<p id="demo"></p>
<script>
function change_myselect(sel) {
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: sel, limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<table border='1'>"
for (x in myObj) {
txt += "<tr><td>" + myObj[x].name + "</td></tr>";
}
txt += "</table>"
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【生成基于 JSON 数据的 HTML 下拉列表】：
<!DOCTYPE html>
<html>
<body>
<h2>做一个基于 JSON 数据的下拉列表。</h2>
<p id="demo"></p>
<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "customers", limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<select>"
for (x in myObj) {
txt += "<option>" + myObj[x].name;
}
txt += "</select>"
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JSON JSONP
完整实例【简单的 JSONP 实例】：
<!DOCTYPE html>
<html>
<body>
<h1>使用 script 标签请求 JSON</h1>
<p>PHP 文件所返回的函数调用处理的是 JSON 数据。</p>
<p id="demo"></p>
<script>
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
</script>
<script src="/demo/demo_php_jsonp.php"></script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【创建动态脚本标签】：
<!DOCTYPE html>
<html>
<body>
<h1>点击按钮</h1>
<p>将创建一个带有 src 属性的 script 标签并将其放在文档中。</p>
<p>PHP 文件以 JSON 对象作为参数返回对函数的调用。</p>
<button onclick="clickButton()">单击我！</button>
<p id="demo"></p>
<script>
function clickButton() {
var s = document.createElement("script");
s.src = "/demo/demo_php_jsonp.php";
document.body.appendChild(s);
}
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【带动态结果的 JSONP 实例】：
<!DOCTYPE html>
<html>
<body>
<h1>点击按钮</h1>
<p>将创建一个带有 src 属性的 script 标签并将其放在文档中。</p>
<p>PHP 文件以 JSON 对象作为参数返回对函数的调用。</p>
<button onclick="clickButton()">单击我！</button>
<p id="demo"></p>
<p>请尝试将 table 属性从“customers”更改为“products”。</p>
<script>
function clickButton() {
var obj, s
obj = { table: "customers", limit: 10 };
s = document.createElement("script");
s.src = "/demo/demo_php_jsonp_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
}
function myFunc(myObj) {
var x, txt = "";
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【带回调函数的 JSONP 实例】：
<!DOCTYPE html>
<html>
<body>
<h1>请求调用函数</h1>
<p>PHP 文件返回对您作为回调发送的函数的调用。</p>
<button onclick="clickButton()">单击我！</button>
<p id="demo"></p>
<script>
function clickButton() {
var s = document.createElement("script");
s.src = "demo_jsonp2.php?callback=myDisplayFunction";
document.body.appendChild(s);
}
function myDisplayFunction(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
