[JavaScript知识库] web笔记

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> web笔记 - 【JavaScript】 -> 正文阅读

[JavaScript知识库]web笔记 - 【JavaScript】

<!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>内置函数初阶</title>
</head>

<body>
    <style></style>

    <!-- css与javascript的分界线 -->

    <script>
        console.log(Math.PI);
        console.log(Math.max(1, 99, 3));
        console.log(-2, -3, -5);
        console.log(Math.max(2, 2, 1, 4, 5, 'sas')); //当有字符串，输出情况NaN
        console.log(Math.max()); //输出的-Infinity即负的无穷，这就是不输入值的情况下的默认输出值

        var m = {
            pi: 3.14,
            max: function () {
                // arguments()我们并不知道最终要输入多少个数
                var max = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] > max) {
                        max = arguments[i];
                    }
                }
                return max;
            },
            // 注意上方的逗号！用于分割连续的函数
            min: function () {
                // arguments()我们并不知道最终要输入多少个数
                var min = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] < min) {
                        min = arguments[i];
                    }
                }
                return min;
            }
        }
        console.log(m.pi);
        console.log(m.max(25, 55, 5, 5, 847, 5, 6, 4, 6, 3, 2, 4, 7, 9, 9, 5));
        console.log(m.min(2, 6, 5, 88, 3, 6, 9, 8, 5, 0, 1));

        console.log('下面为内置绝对值abs');
        console.log(Math.abs(-56));
        console.log(Math.abs('-456') + '   隐式转换，将字符串的数字转换成了数值型，但是输出为字符型');
        console.log(Math.abs('sasa') + '  NaN means: Not a Number');

        function getRandomInt(max) {
            return Math.floor(Math.random() * max);
        }

        console.log(getRandomInt(3));
        // expected output: 0, 1 or 2

        console.log(getRandomInt(100));
        // expected output: 100

        console.log(Math.random());
        // expected output: a number from 0 to <1

        console.log('Math.random随机数这个东西，最好去  MDN  网站去搜索看看人家写成的现成的代码拿来使用');

        console.log('下面是日期基础内容：');
        // 日期对象是一个构造函数，必须使用new实例化对象才能使用
        // 月份的起始数值是0、周日是一周的第一天
        var date = new Date();

        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var day = date.getDay();
        var hour = date.getHours(),
            minite = date.getMinutes(),
            second = date.getSeconds();
        var zhouci = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');

        // 重点————重点————重点————重点————重点——————————————————————————

        console.log('现在的时间是' + year + '年' + month + '月' + dates + '日' + zhouci[day]);
        console.log('时间：' + hour + '时' + minite + '分' + second + '秒');
        console.log('------------------------- \n 常用案例————倒计时————分析，永远比先写代码更重要\n 使用【时间戳】');
        console.log('转换公式：\n');

        function jishiqi(time) {
            var nowTime = +new Date(),//+new Date（）函数返回的即为当前时间的毫秒数
                inputTime = +new Date(time),//将用户的输入的指定时间转换为总的毫秒
                times = (inputTime - nowTime) / 1000; //一秒=1000毫秒

            var d = parseInt(times / 60 / 60 / 24),
                d = d < 10 ? '0' + d : d,
                h = parseInt(times / 60 / 60 % 24),
                h = h < 10 ? '0' + h : h,
                m = parseInt(times / 60 % 60),
                m = m < 10 ? '0' + m : m,
                s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            return '距离2022年元旦还剩：' + d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(jishiqi('2022-1-1 00:00:00'));



        // 数组学习——————
        var arr = [4, 12, 3, 1];
        console.log(arr[0]);
        var arr1 = new Array(10),//创建了一个长度为10的空的数组对象
            arr2 = new Array(4, 5, 6, 9, 7, 8);//等价于字面量创建数组对象
        console.log(arr1 + '\n' + arr2);

        //_
        // 数组元素的添加_push,在末尾追加元素
        console.log('数组追加之前的元素内容：\n' + arr);
        arr.push(233, 'eew', 4312, 'safc');
        console.log('Push追加之后的新的数组内容：\n' + arr);
        // push()、unshift()函数有返回结果，会返回新的数组的长度！
        //unshift，在元素的首部追加元素
        arr.unshift(5, 3, 2, 'kyy')
        console.log('unshift前置追加后的新数组：' + arr);
        arr.pop();
        //pop()、shift()没有参数
        //pop（）、shift()返回值：返回删掉的元素的值
        console.log('pop()、shift()一次只能删除数组的最后一个、第一个元素，pop新的：' + arr);

        // 灵活应用：
        // 自己思考到底用在何场景，tips:push()
        var arr = [100, 255, 3, 45, 786, 12, 32, 14];
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] < 50) {
                newArr.push(arr[i]);
            }
        }


        //数组排序
        arr.reverse(arr); console.log('reverse翻转数组：' + arr);
        arr.sort(function (a, b) {
            return a - b;//升序
            // return b-a;  降序
        });
        console.log(arr);

        //数组索引查找
        var arr = ['red', 'bk', 'sa', 'ea', 'red'];
        console.log(arr);
        console.log(arr.indexOf('blue'));
        // 注意indexOf()函数只会返回第一个满足条件的元素的相应数组下标，数组内的重复项将忽略
        // 如果数组内没有想要索引的内容，则返回-1
        // arr.lastIndexOf('red')  从数组的最后一个元素开始向前查找，正好相反

        // 数组去重（重点）
        // -------------------------------------------------------------------------------------------

        function qvchong(x) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(x[i]) === -1) {
                    newArr.push(x[i]);
                }
            }
            return newArr;
        }
        var demo = qvchong(['a', 'b', 'c', 'd', 'e', 'a', 'a', 'a'])
        console.log(demo);
        // -------------------------------------------------------------------------------------------
        //toString()数组变字符串
        //join()更加好使多变自由
        console.log(demo.toString());
        console.log(demo.join('-'));
        // concat()    连接数组                                返回一个新的数组
        // slice()     数组截取（begin,end）                   返回被截取后的新数组
        // splice()    数组删除（第几个开始，要删除的个数）      返回新的数组
        // 字符串的【不可变型】告诉我们不要大量的使用同一个变量为其赋值、for循环因为这个特性会很占内存空间
        //根据位置返回字符 ----------------------------------------------------------------------------

        charAt(index)
        charCodeAt(index)
        str[index]
        charCodeAt()/*-----可以用来判断用户按下了哪个键*/
// ----------------------------------------------------------------------------------------




    </script>

    <!-- 以下为html代码 -->
    <p>请打开控制台查看js运行的结果</p>
    <br>
    <div style="align-content: center;"><span>使用时间戳的倒计时原理：<br></span>
        <ul>
            <ol>d = parseInt(总秒数/60/60/24);</ol>
            <ol>h = parseInt(总秒数/60/60%24);</ol>
            <ol>m = parseInt(总秒数/60%60);</ol>
            <ol>s = parseInt(总秒数%60);</ol>
        </ul>
    </div>
</body>

</html>