JavaScript 运算符
运算符 = 用于赋值。
运算符 + 用于加值。
运算符 = 用于给 JavaScript 变量赋值。
算术运算符 + 用于把值加起来。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击按钮计算 x 的值.</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
y=5;
z=2;
x=y+z;
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
JavaScript 算术运算符
加法：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>假设 y=5，计算 x=y+2，并显示结果。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var y=5;
var x=y+2;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
减法：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>设置 y=5, 计算出 x=y-2, 并输出结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
var y=5;
var x=y-2;
var demoP=document.getElementById("demo");
demoP.innerHTML="x=" + x;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
乘法：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>设置 y=5, 计算出 x=y*2, 并输出结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
var y=5;
var x=y*2;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
除法：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>设置 y=5, 计算 x=y/2, 并输出结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
var y=5;
var x=y/2;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
取模（余数）
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>设置 y=5, 计算出 x=y%2, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
var y=5;
var x=y%2;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
自增：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>设置 y=5, 计算出 x=++y, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
var y=5;
var x=++y;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x + ", y=" + y;
}
</script>
<p><strong>注意:</strong>两个值 x 和 y 都受到影响。</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>设置 y=5, 计算出 x=y++, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
var y=5;
var x=y++;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x + ", y=" + y;
}
</script>
<p><strong>注意:</strong> x 和 y 两个值都受到影响。</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
自减：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>设置 y=5, 计算出 x=--y, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
var y=5;
var x=--y;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x + ", y=" + y;
}
</script>
<p><strong>注意:</strong> x 和 y 两个值都会被影响。</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>设置 y=5, 计算出 x=y--, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
var y=5;
var x=y--;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x + ", y=" + y;
}
</script>
<p><strong>注意：</strong>x 和 y 两个值都会受到影响。</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
JavaScript 赋值运算符
赋值运算符用于给 JavaScript 变量赋值。
给定 x=10 和 y=5，下面的表格解释了赋值运算符：
=：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>设置 x=10 和 y=5, 计算 x=y, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x=10;
var y=5;
x=y;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
+=：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>设置 x=10 和 y=5, 计算 x+=y, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x=10;
var y=5;
x+=y;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
-=：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>设置 x=10 和 y=5, 计算 x-=y, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x=10;
var y=5;
x-=y;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
*=：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>设置 x=10 和 y=5, 计算 x*=y, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x=10;
var y=5;
x*=y;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
/=：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>设置 x=10 和 y=5, 计算 x/=y, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x=10;
var y=5;
x/=y;
var demoP=document.getElementById("demo");
demoP.innerHTML="x=" + x;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
%=：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>设置 x=10 和 y=5, 计算 x%=y, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x=10;
var y=5;
x%=y;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
用于字符串的 + 运算符
+ 运算符用于把文本值或字符串变量加起来（连接起来）。
如需把两个或多个字符串变量连接起来，请使用 + 运算符。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击按钮创建及增加字符串变量。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
document.getElementById("demo").innerHTML=txt3;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
要想在两个字符串之间增加空格，需要把空格插入一个字符串之中：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击按钮创建及增加字符串变量。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;
document.getElementById("demo").innerHTML=txt3;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
或者把空格插入表达式中：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击按钮创建及增加字符串变量。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
document.getElementById("demo").innerHTML=txt3;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
对字符串和数字进行加法运算
两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串，如下实例：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击按钮创建及增加字符串变量。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x=5+5;
var y="5"+5;
var z="Hello"+5;
var demoP=document.getElementById("demo");
demoP.innerHTML=x + "<br>" + y + "<br>" + z;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
规则:如果把数字与字符串相加，结果将成为字符串！
