用前端实现圣诞树以及前端开发部分知识的讲解

圣诞树源码粗讲:用前端实现圣诞树以及前端开发部分知识的讲解效果展示:圣诞树源码<!DOCTYPE HEML PUBLIC><html><head><meta charset="utf-8"><style>html,body {width: 100%;height: 100%;marg.

一位即将成功的野男人

1167人浏览 · 2021-12-16 22:30:08

一位即将成功的野男人 · 2021-12-16 22:30:08 发布

圣诞树源码粗讲:用前端实现圣诞树以及前端开发部分知识的讲解

效果展示:

圣诞树源码

<!DOCTYPE HEML PUBLIC>
<html>

<head>
    <meta charset="utf-8">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            border: 0;
        }
        
        div {
            margin: 0;
            padding: 0;
            border: 0;
        }
        
        .nav {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 27px;
            background-color: white;
            color: black;
            text-align: center;
            line-height: 25px;
        }
        
        a {
            color: black;
            /* a标签会有下划线,然后下面的这个代码,就是取消下划线 */
            text-decoration: none;
            border-bottom: 1px dashed black;
        }
        
        a:hover {
            border-bottom: 1px solid red;
        }
        
        .previous {
            float: left;
            margin-left: 10px;
        }
        
        .next {
            float: right;
            margin-right: 10px;
        }
        
        .green {
            color: green;
        }
        
        .red {
            color: red;
        }
        
        textarea {
            width: 100%;
            height: 100%;
            border: 0;
            padding: 0;
            margin: 0;
            padding-bottom: 20px;
        }
        
        .block-outer {
            float: left;
            width: 22%;
            height: 100%;
            padding: 5px;
            border-left: 1px solid black;
            margin: 30px 3px 3px 3px;
        }
        
        .block-inner {
            height: 68%;
        }
        
        .one {
            border: 0;
        }
    </style>
</head>

<body marginwidth="0" marginheight="0">
    <canvas id="c" height="356" width="446">
        <script>
            var collapsed = true; Float64Array
            function toggle() {
                var fs = top.document.getElementsByTagName('frameset')[0];
                var f = fs.getElementsByTagName('frame');
                if (collapsed) {
                    fs.rows = '250px,*';
                    fs.noResize = false;
                    f[0].noResize = false;
                    f[1].noResize = false;
                }
                else {
                    fs.rows = '30px,*';
                    fs.noResize = true;
                    f[0].noResize = true;
                    f[1].noResize = true;
                }
                collapsed = !collapsed;
            }
        </script>
        <script>
            var b = document.body;
            // dom操作
            var c = document.getElementsByTagName('canvas')[0];
            var a = c.getContext('2d');
            document.body.clientWidth;
        </script>
        <script>
            M = Math;
            Q = M.random; J = [];
            U = 16;
            T = M.sin;
            E = M.sqrt;
            for (O = k = 0; x = z = j = i = k < 200;)
                with (M[k] = k ? c.cloneNode(0) : c) {
                    width = height = k ? 32 : W = 446;
                    with (getContext('2d'))
                    if (k > 10 | !k)
                        for (
                            font = '70px Impact',
                            V = 'rgba('; I = i * U, fillStyle = k ? k == 13 ? V + '205,205,215,.15)' :
                                V + (147 + I) + ',' + (k % 2 ? 128 + I : 0) + ',' + I + ',.5)' : '#999', i < 7;
                        )
                            beginPath(
                                fill(
                                    arc(
                                        U - i / 3,
                                        24 - i / 2,
                                        k == 13 ? 4 - (i++) / 2 : 8 - i++,
                                        0,
                                        M.PI * 2, 1
                                    )
                                )
                            );
                    else for (;
                        x = T(i),
                        y = Q() * 2 - 1,
                        D = x * x + y * y,
                        B = E(D - x / .9 - 1.5 * y + 1),
                        R = 67 * (B + 1) * (L = k / 9 + .8) >> 1,
                        i++ < W;
                    )
                        if (D < 1)
                            beginPath(
                                strokeStyle = V + R + ',' + (R + B * L >> 0) + ',40,.1)'
                            ),
                                moveTo(U + x * 8, U + y * 8),
                                lineTo(U + x * U, U + y * U),
                                stroke();
                    for (
                        y = H = k + E(k++) * 25,
                        R = Q() * W;
                        P = 3, j < H;
                    )
                        J[O++] = [x += T(R) * P + Q() * 6 - 3, y += Q() * U - 8, z += T(R - 11) * P + Q() * 6 - 3, j / H * 20 + ((j += U) > H & Q() > .8 ? Q(P = 9) * 4 : 0) >> 1]
                }
            setInterval(function G(m, l) {
                A = T(D - 11);
                if (l)
                    return (
                        m[2] - l[2]) * A + (l[0] - m[0]) * T(D);
                a.clearRect(0, 0, W, W);
                J.sort(G);
                for (
                    i = 0;
                    L = J[i++];
                    a.drawImage
                        (
                            M[L[3] + 1], 207 + L[0] * A + L[2] * T(D) >> 0, L[1] >> 1)) {
                    if (i == 2e3)
                        a.fillText
                            (
                                '野男人',
                                U, 345);
                    if (!(i % 7))
                        a.drawImage
                            (
                                M[13],
                                ((157 * (i * i) + T(D * 5 + i * i) * 5) % W) >> 0,
                                ((113 * i + (D * i) / 60) % (290 + i / 99)) >> 0
                            );
                }
                D += .02
            }, 1)
        </script>
</body>

</html>