【代码笔记】Web-JavaScript-JavaScript 运算符

一，效果图。

 

二，代码。

 

复制代码
<!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>
复制代码

 

 

参考资料：《菜鸟教程》

posted @ 2018-12-17 09:19  花儿迎风笑  阅读(261)  评论(0)  编辑  收藏  举报