一，效果图。
二，代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript 运算符</title>
</head>
<body>
<!--javascriptyu运算符-->
<p>惦记按钮计算</p>
<button onclick="myFunction0()">点击这里</button>
<p id="demo0"></p>
<script>
function myFunction0() {
y = 5;
z = 2;
x = y + z;
document.getElementById("demo0").innerHTML = x;
}
</script>
<!--用于字符串的+运算符-->
<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>
<!--在字符串中增加空格-->
<p>点击按钮创建及增加字符串变量。</p>
<button onclick="myFunction1()">点击这里</button>
<p id="demo1"></p>
<script>
function myFunction1() {
txt1 = "What a very ";
txt2 = "nice day";
txt3 = txt1 + txt2;
document.getElementById("demo1").innerHTML = txt3;
}
</script>
<p>点击按钮创建及增加字符串变量</p>
<button onclick="myFunction2()">点击这里</button>
<p id="demo2"></p>
<script>
function myFunction2() {
txt1 = "what a very";
txt2 = "nice day";
txt3 = txt1 + " " + txt2;
document.getElementById("demo2").innerHTML = txt3;
}
</script>
<!--对字符串和数字进行加法运算-->
<P>点击按钮创建及增加字符串变量</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo3"></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>
参考资料：《菜鸟教程》