web概述10

做梦追仙

已于 2022-11-07 14:14:57 修改

阅读量87

点赞数

分类专栏：前端文章标签： javascript html

于 2022-11-03 22:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_44251806/article/details/127665209

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

函数定义

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h3>函数定义</h3>
    <p>
        函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。<br />
        函数就是包裹在花括号中的代码块，前面使用了关键词 function：<br />
        function functionname()
        {<br />
        // 执行代码<br />
        }<br />
        当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
        <br /><strong>JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。</strong>
    </p>
    <nav>
        <a href="计算器.html">计算器</a>
        <a href="进制转换.html">进制转换</a>
    </nav>
    <div>
        <form name="fm1">
            <input name="num1" />
            <input name="num2" />
            <input id="res" readonly/>
            <input type="button" onclick="ff()" value="计算"/>
        </form>
        <script language="javascript">
            function ff() {
                var v1 = document.fm1.num1.value;
                var vv = check(v1);
                if (!vv) {
                    document.fm1.num1.value = "";
                    document.fm1.num1.focus();
                    return;
                }
                var v2 = document.fm1.num2.value;
                var vv = check(v2);
                if (!vv) {
                    document.fm1.num2.value = "";
                    document.fm1.num2.focus();
                    return;
                }

                var lm = mm(v1, v2);
                document.getElementById("res").value="最大值为"+lm

                var ll = parseInt(v1) + parseInt(v2) - lm;
                var sum = 0;
                for (i = ll; i <= lm; i++) {
                    sum += jiecheng(i);
                }
                alert(sum);
            }

            function check(a) {
                if (isNaN(a)) {
                    window.alert("输入数据异常!");
                    return false;
                }
                return true;
            }

            function mm(a, b) {
                a = parseInt(a);
                b = parseInt(b);
                if (a == b) {
                    window.alert("输入数据异常!");
                    return 1;
                }
                if (a > b) return a;
                else return b;
            }

            function jiecheng(a) {
                var res = 1;
                for (i1 = 1; i1 <= a; i1++) {
                    res *= i1;
                }
                return res;
            }
        </script>
    </div>
    <h3>声明提升</h3>
    <p>
        JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。在JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
    </p>
    <p id="demo"></p>
    <script>
        x = 5; // 变量 x 设置为 5
        elem = document.getElementById("demo"); // 查找元素 
        elem.innerHTML = x;                     // 在元素中显示 x
        var x; // 声明 x
    </script>
</body>

</html>

函数基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //    1、函数是一个对象类型，标准方式使用new Function(函数参数,函数主体);
        //    2、标准方式建立的函数，遵循程序一般的逻辑（先定义再使用）。
        //    3、函数有另一种定义方式
        //        function 函数名称(函数参数) {
        //            函数主体
        //        }
        //        这种方式定义的函数，会优先被缓存。
        //    4、程序的书写顺序：
        //        先定义各种变量
        //        再书写程序逻辑
        //        最后是各种函数
        //    5、函数是有名称的先不执行的代码块。函数可以接受参数，可以返回值。
        //    6、函数的参数，可以在小括号内定义，也可以不定义，都存储在arguments对象中
        //        这个对象是一个数组。
        //    7、函数在js中可以用来定义作用域，任何内容都有自己的作用域。
        //    8、不同作用域下的同名变量，不是相同的。如果在一个作用域内（不管位置）定义了一个
        //        变量，那么，这个作用域内的所有同名变量就都是局部变量。
        //    9、包含的作用域之间，局部可以访问全局，但全局不能访问局部。
        //        不包含的作用域之间，不能访问。
        //    10、规则：
        //        除非必要，否则，不要滥用全局变量。
        //        建议优先使用局部变量。
        //        使用函数（通常是自调用函数）进行封装。
        //    func(2,3);
        //    var func = new Function("x,y","alert(x*y)");
        //    func(2,3)
        //    function func(x,y) {
        //        alert(x*y);
        //    }
        //argument 参数
        //    var x = jia(3,5,5) + 2;
        //    document.write(x);
        //    function jia(x,y) {
        //        var x = arguments[0];
        //        var y = arguments[1];
        //        var z = x + y;
        //        return z;
        //    }
        
        //    var x = 123;
        //    aa();
        //    function aa() {
        //        alert(x);
        //        x =  x + 1;
        //        alert(x);
        //        var x = 456;
        //        alert(x);
        //    }
        //    var x = 123
        //aa()
        //    function aa() {
        //        var x = 456;
        //        alert(window.x)
        //    }
        //    alert(aa(5));
        //    function aa(x) {
        //        return aa(x);
        //        function aa(x) {
        //            return aa(x);
        //            function aa(x) {
        //                return aa(x);
        //                function aa(x) {
        //                    return aa(x);
        //                    function aa(x) {
        //                        return x*2
        //                    }
        //                }
        //            }
        //        }
        //    }
        //    alert(中国(1000))
        //    function 中国(x) {
        //        return 陕西(x/2)
        //        function 陕西(x) {
        //            return 西安(x/2)
        //            function 西安(x) {
        //                return x
        //            }
        //        }
        //    }
        //    var x = 123
        //
        //    function aa() {
        //        var  www = 123
        //    }
        //
        //    function bb() {
        //        var x = www
        //    }
        //构造函数（构造了对象的原型）
        //    var date = new Date();
        //    var xiaoming = new liqiang();
        //xiaoming.prototype.a=123
        //    document.write(
        //            xiaoming.shengao
        //    )
        //
        //
        //
        //
        //    function liqiang() {
        //        this.shengao = 183;
        //        this.age = 18;
        //        this.tizhong = 65;
        //        this.a = 123
            }
        //    匿名函数
        //    obj.onclick = function () {
        //
        //    }
        //    自调用函数（自执行函数）：
        //        使用小括号将一个匿名函数包裹，后跟执行符的形式，叫自调用函数。
        //        (function () {})()
        //        必然执行一次且只执行一次。
        //        自调用函数之前的语句，必须使用分号结束！！！！！！！。
        //var x = 123;
        //(function () {})()
        //(function () {
        //    var x = 123;
        //    var y = 456;
        //    document.write(x+y);
        //})();
        //    aa()
        //    aa()
        //    function aa() {
        //        var x = 123;
        //        var y = 456;
        //        document.write(x+y);
        //    }
        //    闭包   封装
        //    闭包是通过函数的操作，使得全局能够访问局部的变量，这叫做闭包的过程，这个函数叫做闭包函数
        //闭包函数： 通过全局函数打包局部变量的函数叫闭包函数。
        //aa()()
        //    function aa() {
        //        var x = 123;
        //        return function () {
        //            alert(x);
        //        }
        //    }
        
        </script>
        </body>
        </html>

计算器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .ttt {
            font-family: "华文彩云";
            font-size: 24px;
            font-style: normal;
            font-weight: bolder;
            color: #FF0000;
        }
    </style>
</head>
<script language="javascript">
    function ff() {
        var v1 = document.fm1.num1.value;
        if (isNaN(v1)) {
            alert("输入数据1异常!");
            document.fm1.num1.value = "";
            return;
        }
        var op = document.fm1.oper.value;
        var v2 = document.fm1.num2.value;
        if (isNaN(v2)) {
            alert("输入数据2异常!");
            document.fm1.num2.value = "";
            return;
        }
        var res = v1 + op + v2;
        res = eval(res);

        document.fm1.num3.value = res;
    }
</script>

<body>
    <form name="fm1">
        <p>
            <input name="num1" class="ttt" value="0" size="6" maxlength="6" />
            <select name="oper" class="ttt">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
                <option value="%">%</option>
            </select>
            <input name="num2" class="ttt" value="0" size="6" maxlength="6" />
            <strong class="ttt">=</strong>
            <input name="num3" disabled class="ttt" value="0" size="12" maxlength="12" />
        </p>
        <p><input type="button" onclick="ff()" value="计算" /></p>
    </form>
</body>

</html>

进制转换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script language="javascript">
    function ff() {
        var v1 = document.fm1.num1.value;
        var v2 = document.fm1.num2.value;
        var res = parseInt(v1, v2);
        alert(res);
        document.all.bb.innerHTML = v1 + "<sub>" + v2 + "</sub>=" + "<font color=red size=36>" + res + "</font><sub>10</sub>";
    }
    function hh() {
        var v1 = document.fm2.num1.value;
        var v2 = document.fm2.num2.value;
        v1 = parseInt(v1);
        var res = v1.toString(v2);
        alert(res);
        document.all.bb.innerHTML = v1 + "<sub>10</sub>=" + "<font color=red size=36>" + res + "</font><sub>" + v2 + "</sub>";
    }
</script>

<body>
    <h1>任意数制数据转换为十进制数据</h1>
    <form name="fm1">
        <input name="num1" />
        <select name="num2">
            <script>
                for (i = 2; i <= 36; i++) {
                    document.write("<option value='", i, "'>", i, "</option>");
                }
            </script>
        </select>
        <input type="button" onclick="ff()" value="转为十进制" />
    </form>

    <hr color="#FF0000" size="5" />
    <h1>十进制数据转换为任意数制数据</h1>
    <form name="fm2">
        <input name="num1" />
        <strong>=</strong>
        <select name="num2">
            <script>
                for (i = 2; i <= 36; i++) {
                    document.write("<option value='", i, "'>", i, "</option>");
                }
            </script>
        </select>
        <input type="button" onclick="hh()" value="转换" />
    </form>
    <hr />
    <div id="bb"></div>
</body>

</html>