JavaScript

几个js实用代码——动态加载时间、滚动条优化、两个数组转化为map对象等

Nick · 1月3日 · 2021年本文2283字 · 阅读6分钟402

1. 当页面加载时间调用

代码如下

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2 id="show" style="text-align: center;"></h2>
    <script>
        //当页面加载时间调用
        window.onload = function () {
            //计时器 1000秒
            setInterval(function () {
                var date = new Date();
                var year = date.getFullYear(); //获取当前年份   
                var mon = date.getMonth() + 1; //获取当前月份   
                var da = date.getDate(); //获取当前日   
                var day = date.getDay(); //获取当前星期几   
                var h = date.getHours(); //获取小时   
                var m = date.getMinutes(); //获取分钟   
                var s = date.getSeconds(); //获取秒   
                var d = document.getElementById('show');

                //判断当数字小于等于9时 显示 01 02 ----- 08 09
                if (mon >= 1 && mon <= 9) {
                    mon = "0" + mon;
                }
                if (da >= 0 && da <= 9) {
                    da = "0" + da;
                }
                if (h >= 0 && h <= 9) {
                    h = "0" + h;
                }
                if (m >= 0 && m <= 9) {
                    m = "0" + m;
                }
                if (s >= 0 && s <= 9) {
                    s = "0" + s;
                }

                d.innerHTML = year + '-' + mon + '-' + da + ' ' + h + ':' + m + ':' + s;
            }, 1000)
        }
    </script>
</body>
</html>

效果如下

在这里插入图片描述

2. 滚动条优化

代码如下

<!Doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>css滚动条样式</title>
    <style type="text/css">
        .box {
            width: 600px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid #000;
            border-right: 0;
        }

        .main {
            overflow-x: hidden;
            overflow-y: auto;
            color: #000;
            font-size: 16px;
            height: 100%;
        }

        .main p {
            height: 300px;
        }

        /*-------滚动条整体样式----*/
        .main::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        /*滚动条里面小方块样式*/
        .main::-webkit-scrollbar-thumb {
            border-radius: 100px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #4788fb;
        }

        /*滚动条里面轨道样式*/
        .main::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 0;
            background: rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="main">
            <p>内容1</p>
            <p>内容2</p>
            <p>内容3</p>
        </div>
    </div>
</body>

</html>

效果如下

在这里插入图片描述

3. 两个数组转化为map对象

代码如下

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* 将两个数组转化为map对象 */
        var arr1 = [90, 85, 75, 80, 95, 100];
        var arr2 = ["张三", "李四", "王五", "马六", "小妞", "小黑"];

        //map类型转换
        function transformObject(keyArr, valueArr) {
            var obj = [];
            var i = 0;
            keyArr.map((v, i) => {
                obj.push({
                    "value": valueArr[i],
                    "name": keyArr[i]
                });
                // obj[keyArr[i]] = valueArr[i];
            })
            return obj;
        }
        //转换为map
        var map = transformObject(arr2, arr1);
        console.log('map :>> ', map);
    </script>
</body>

</html>

效果如下

在这里插入图片描述

4. 好看的按钮特效

效果如下

在这里插入图片描述

代码下载

链接:https://pan.baidu.com/s/1Pn_yAhXrTXJhmN5uWj5S-g
提取码:c4x3

5. particles.js背景特效

效果如下

在这里插入图片描述

代码下载

链接:https://pan.baidu.com/s/1Mw725r4KSbkiFf-1vffqWg
提取码:py6o

0 条回应
在线人数:1人 来访统计
隐藏