web笔记 - 【JavaScript】

最新推荐文章于 2024-09-07 13:38:28 发布

玖夜Kty

最新推荐文章于 2024-09-07 13:38:28 发布

阅读量82

点赞数

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

本文链接：https://blog.csdn.net/weixin_44587107/article/details/120857187

版权

web 同时被 3 个专栏收录

47 篇文章 1 订阅

订阅专栏

html

44 篇文章 0 订阅

订阅专栏

前端

41 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了JavaScript中的内置数学函数如Math.PI、Math.max以及自定义max、min函数的用法，并展示了如何实现倒计时功能。此外，还讲解了日期对象的使用，包括获取当前日期及时间戳计算。最后，文章深入探讨了数组的各种操作，如push、unshift、pop、sort等，并提供了数组去重的方法。同时，文中也包含了关于HTML、CSS和JavaScript的基础知识。

摘要由CSDN通过智能技术生成

<!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>

玖夜Kty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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>内置
复制链接

扫一扫

专栏目录