版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fanqingtulv/article/details/85043819
一,效果图。
二,代码。
<!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>
参考资料:《菜鸟教程》