search

Wscats / CV

:see_no_evil:Front End Engineer Curriculum Vitae - 面试宝典和简历生成器
http://wscats.github.io/CV/omi/build/index.html
1.04k stars 204 forks source link

day4 #18

Closed Wscats closed 6 years ago

Wscats commented 6 years ago

01函数的声明方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数声明</title>
    <script>
    var sum
        /* 
            函数声明提前
            1.查找js中定义的函数，并保存起来（变量声明）
            2.从上往执行代码
            只声明变量不赋值，则变量为undefined
        */
        // 在函数声明前执行这个函数
        check();
        // 1.函数声明
        // 可以在任意位置执行
        function check(){
            console.log('666');
        }
        // 2.赋值式(变量声明)
        // 不能在函数赋值前执行
        var sum = function(){
            var a = 10;
            var b = 20;
            console.log(a + b);
        }
        sum();//30
        // 3. 构造函数
        var test = new Function();

        // 函数的执行
        // 格式：函数名()
        // check();
        console.log(myName);
        var myName = 'laoxie';

    </script>
</head>
<body>

</body>
</html>
Wscats commented 6 years ago

02利用函数计算阶乘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02利用函数计算阶乘</title>
    <script>
    // 延迟代码执行
    // 页面加载事件onload
    // 当页面上所有的内容加载完成后才执行函数中的代码
    window.onload = function(){
        /*
            02利用函数计算阶乘
                1）获取页面元素
                2）根据输入的值计算阶乘
         */
        function factorial(){
            var output = document.getElementById('output');

            // 获取页面元素的值
            var num = document.getElementById('num').value;

            var res = 1;
            for(var i=2;i<=num;i++){
                res *= i;
            }

            // 把计算的结果写入#output
            output.innerHTML = res;
        }

        // 第一种执行函数的方式：手动执行
        // factorial();

        // 事件驱动
        // 按钮.onclick = factorial;
        var btnCalc = document.getElementById('btnCalc');

        // console.log(btnCalc);

        // 事件绑定
        // 点击事件
        btnCalc.onclick = factorial;
    }
    </script>
</head>
<body>
    <input type="text" id="num">
    <button id="btnCalc">计算阶乘</button>
    <div id="output"></div>

</body>
</html>
Wscats commented 6 years ago

03常见事件触发函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03常见事件触发函数</title>
    <style>
        #box{width:300px;height:80px;background-color:#ffc;border:1px solid #f90;}
    </style>
    <script>
    window.onload = function(){
        // 获取页面元素#box
        var box = document.getElementById('box');

        // 点击#box这个元素是执行
        // 具名函数
        function clickHandle(){
            console.log('点击');
        }

        // 点击事件
        box.onclick = clickHandle;

        // 鼠标移入事件
        // 匿名函数（没有名字函数）
        box.onmouseover = function(){
            console.log('移入事件');
        }
    }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>
Wscats commented 6 years ago

04打印表单内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04打印表单内容</title>
    <script>
    window.onload = function(){
        var name = document.getElementById('name');
        var gender = document.getElementById('gender');
        var psw = document.getElementById('psw');
        var output = document.getElementById('output');

        // 绑定事件
        // 当change事件发生时才执行函数中的代码
        // 当输入框的内容改变并且失去焦点时触发change事件
        name.onchange = function(){
            // 打印输入框的内容
            // 如何获取输入框的内容？
            console.log(name.value);
        }

        gender.onchange = function(){
            console.log(gender.value);
        }

        // 监听密码输入
        psw.onkeyup = function(){
            output.innerHTML = psw.value;
        }
    }

    </script>
</head>
<body>
    <input type="text" id="name">
    <input type="password" id="psw">
    <select name="gender" id="gender">
        <option value="男">男</option>
        <option value="女">女</option>
        <option value="保密">保密</option>
    </select>
    <div id="output"></div>
</body>
</html>
Wscats commented 6 years ago

05利用函数封装99乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05利用函数封装99乘法表</title>
    <style>
        span{display: inline-block;padding:0 5px;margin:5px;width:60px;line-height:2;background-color: #efefef;text-align:center;}
    </style>
    <script>
        window.onload = function(){
            var btnShow = document.getElementById('btnShow');
            var output = document.getElementById('output');
            btnShow.onclick = function(){
                // 字符串拼接
                var str = '';
                // 外层循环控制行
                for(var i=1;i<=9;i++){
                    // 内层循环控制列
                    for(var j=1;j<=i;j++){
                        str += '<span>' + j + '&times;' + i + '=' + i*j +'</span>';
                    }
                    str += '<br/>';
                }
                // console.log(str);
                output.innerHTML = str;
            }
        }
    </script>
</head>
<body>
    <button id="btnShow">显示99乘法表</button>
    <div id="output"></div>
</body>
</html>
Wscats commented 6 years ago

06封装加减乘除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06封装加减乘除</title>
    <script>
        window.onload = function(){
            // 这里的代码在页面加载完成后执行
            // 获取页面元素
            var num1 = document.getElementById('num1');
            var num2 = document.getElementById('num2');
            var ysf = document.getElementById('ysf');
            var btnCalc = document.getElementById('btnCalc');
            var output = document.getElementById('output');
            // 绑定点击事件
            btnCalc.onclick = function(){
                // 点击按钮的时候执行
                var _num1 = Number(num1.value);
                var _num2 = Number(num2.value);
                var _ysf = ysf.value;
                console.log(_ysf);
                // 根据运算符的值进行相应的运算
                switch(_ysf){
                    case '+':
                        output.innerHTML = _num1 + _num2;
                        break;
                    case '-':
                        output.innerHTML = _num1 - _num2;
                        break;
                    case 'x':
                        output.innerHTML = _num1 * _num2;
                        break;
                    case '/':
                        output.innerHTML = _num1 / _num2;
                        break;
                    case '%':
                        output.innerHTML = _num1 % _num2;
                        break;
                }
            }
        }
    </script>
</head>
<body>
    <input type="text" id="num1">
    <select id="ysf">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="x">&times;</option>
        <option value="/">/</option>
        <option value="%">%</option>
    </select>
    <input type="text" id="num2">
    <button id="btnCalc">计算</button>
    <div id="output"></div>
</body>
</html>