Vue开发无人点餐系统/无人收银系统项目(完整版)

<script>
    /* 定义一个函数
    function 函数名(){
        代码块
    }
    需求1:写一个函数,实现1到100相加
    */
   function sum(){
       var num = 0;
       for(i=1;i<=100;i++){
        num += i;
       }
       console.log(num);
   }
    /* 调用函数,使用函数
    函数名();
   */
   sum();
   
   function fist(){
       var a = 0;
       for(j=50;j<=500;j++){
           a += j;
       }
       document.write(a+'<br>');
   }
// 使用函数
   fist();

</script><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 绑定一个点击事件,通过事件调用函数
        onclick:点击事件
        onkeydowm:按下事件
    -->
    <button "sum();">计算</button>
    <input type="text" "sum();">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h3>实现1-xxx相加的计算</h3>
    <input type="text" value="" "showSum();">
    <button "sum();">计算</button>
    <p>1-<span id="num">xxx</span>相加的结果是:<span id="total">50</span></p>

</body>
<script>
    function sum(){
        /*
        获取input的节点并且取名为$input,
        这里要注意的是为了方便可以在前面用$后面接该标签的名字便于查看
        */
        var $input = document.querySelector('input');
        // 获取输入框的值
        var num = $input.value;
        console.log(num);
        var total = 0;
        for(var i =0;i<=num;i++){
            total += i;
        }
        console.log(total);
        // 教训:innerHTML后面接的是等于号不是逗号
        document.querySelector('#total').innerHTML=total;
        document.querySelector('#num').innerHTML=num;
    }
</script>
</html>

猜你喜欢

转载自blog.csdn.net/aa1234567546654/article/details/89489787