小5聊使用js+css+div布局方式画一棵圣诞树，带闪烁霓虹灯效果

Posted 2022-12-16 小5聊

虽然jQuery时代已经逐渐退出历史舞台，在拥抱vue的同时，也还是可以用jQuery锻炼下编程思维，毕竟比较灵活。

1、适合基础入门的前端小伙伴

2、适合使用jQuery锻炼实现前端效果小伙伴

3、锻炼css+div布局实现绘制一棵圣诞树，通过箭头方式布局绘制

4、使用jQuery实现闪烁霓虹灯效果

5、javascript随机函数的使用

6、RGB颜色值，通过随机方式生成

• 界面效果

 

• 完整代码，点击下载资源

<meta charset="utf-8">
<script src="jquery.21.js"></script>
<style type="text/css">
    .area-div  position: relative; width: 500px; height: 700px; margin: 0 auto; box-shadow: 0 0 13px #ccc; 
        .area-div .tree-root-div  width: 11px; background-color: #957161; height: 600px; position: absolute; top: 50px; left: 50%; margin-left: -5px; 
        .area-div .tree-node-div  position: absolute; bottom: 0; left: 0; height: 0; width: 0; border-color: green; border-style: solid; position: absolute; border-width: 5px 5px 0 0; transform: rotate(-45deg); 
            .area-div .tree-node-div .arrow-left-div  position: absolute; top: 0; left: 0; height: 0; width: 0; border-color: green; border-style: solid; position: absolute; border-width: 3px 3px 0 0; transform: rotate(45deg); 
            .area-div .tree-node-div .arrow-right-div  position: absolute; top: 0; right: 0; height: 0; width: 0; border-color: green; border-style: solid; position: absolute; border-width: 3px 3px 0 0; transform: rotate(-45deg); 
    /*五角星*/
    .big-star-div  position: absolute; top: 0; left: 213px;z-index:20221213; width: 0; height: 0; border-style: solid; border-color: transparent transparent #9f1b1c transparent; border-width: 35px 50px; transform: rotate(35deg); 
        .big-star-div::before  position: absolute; content: ''; width: 0; height: 0; top: -64px; left: -48px; border-style: solid; border-color: transparent transparent #9f1b1c transparent; border-width: 40px 15px; transform: rotate(-35deg); 
        .big-star-div::after  position: absolute; content: ''; width: 0; height: 0; top: -23px; left: -70px; border-style: solid; border-color: transparent transparent #9f1b1c transparent; border-width: 35px 50px; transform: rotate(-70deg); 
    /*小圆球*/
    .qiu-div  position: absolute; top: 100px; left: 50%; margin-left: -10px; width: 20px; height: 20px; border-radius: 20px; background: #9f1b1c; z-index: 999; background-image: linear-gradient(45deg,#fff, #9f1b1c); 
    .qiu-div-left  position: absolute; top: -13px; left: -17px; width: 20px; height: 20px; border-radius: 20px; background: #9f1b1c; z-index: 999; background-image: linear-gradient(45deg,#fff, #9f1b1c); 
    .qiu-div-right  position: absolute; bottom: -13px; right: -13px; width: 20px; height: 20px; border-radius: 20px; background: #9f1b1c; z-index: 999; background-image: linear-gradient(45deg,#fff, #9f1b1c); 
</style>

<div class="area-div">
    <div style="width:100px;height:60px;line-height:60px;text-align:center;">圣诞树</div>
    <!--树主根-->
    <div class="tree-root-div"></div>
    <!--五角星-->
    <div class="big-star-div"></div>
    <!--小圆球-->
    <div class="qiu-div qiu-div1"></div>
    <div class="qiu-div qiu-div2" style="top:175px;"></div>
    <div class="qiu-div qiu-div3" style="top:250px;"></div>
    <div class="qiu-div qiu-div4" style="top:320px;"></div>
    <div class="qiu-div qiu-div5" style="top:390px;"></div>
</div>

<script type="text/javascript">
    $(function () 
        var areaWidth = 500;
        var areaHeight = 700;
        var unitValue = 20;
        var bottomValue = 0;
        var leftValue = 0;
        var divSize = 300;

        for (var i = 0; i < 6; i++) 
            // 6根树枝
            var szDiv = $('<div class="tree-node-div"></div>');
            var width = divSize - i * (unitValue + 20);
            var height = width;
            var bottom = (i * (unitValue + 100) - 70);
            var left = (areaWidth - width) / 2 - 2;
            szDiv.css( "width": width + "px", "height": height + "px", "bottom": bottom + "px", "left": left + "px" );

            // 左边小树枝（小箭头）
            var length = (i == 5 ? 3 : i == 4 ? 5 : i == 3 ? 6 : i == 2 ? 7 : 10 - i);
            for (var j = 0; j < length; j++) 
                var szDiv2 = $('<div class="arrow-left-div"></div>');
                var width2 = 20;
                var height2 = width2;
                var top2 = -14;
                var left2 = j * 30;
                szDiv2.css( "width": width2 + "px", "height": height2 + "px", "top": top2 + "px", "left": left2 + "px" );

                szDiv.append(szDiv2.prop('outerhtml'));
            
            szDiv.append('<div class="qiu-div-left"></div>');

            // 右边小树枝（小箭头）
            for (var j = 0; j < length; j++) 
                var szDiv2 = $('<div class="arrow-right-div"></div>');
                var width2 = 20;
                var height2 = width2;
                var top2 = j * 30;
                var right2 = -14;
                szDiv2.css( "width": width2 + "px", "height": height2 + "px", "top": top2 + "px", "right": right2 + "px" );

                szDiv.append(szDiv2.prop('outerHTML'));
            
            szDiv.append('<div class="qiu-div-right"></div>');

            $(".area-div").append(szDiv.prop('outerHTML'));
        

        // 随机颜色
        setInterval(function () 
            // 五角星
            var color = getRgb(0, 255);
            $('.big-star-div').css( "borderColor": "transparent transparent " + color + " transparent" );
            $('.big-star-div').html("<style>.big-star-div::beforeborder-color:transparent transparent " + color + " transparent</style>");
            $('.big-star-div').append("<style>.big-star-div::afterborder-color:transparent transparent " + color + " transparent</style>");
        , 500 + Math.random() * 500);
        setInterval(function () 
            // 竖线小圆球
            $('.qiu-div1').css( "background-image": "linear-gradient(45deg," + getRgb(0, 255) + ", " + getRgb(0, 255) + ")" );
            $('.qiu-div2').css( "background-image": "linear-gradient(45deg," + getRgb(0, 255) + ", " + getRgb(0, 255) + ")" );
            $('.qiu-div3').css( "background-image": "linear-gradient(45deg," + getRgb(0, 255) + ", " + getRgb(0, 255) + ")" );
            $('.qiu-div4').css( "background-image": "linear-gradient(45deg," + getRgb(0, 255) + ", " + getRgb(0, 255) + ")" );
            $('.qiu-div5').css( "background-image": "linear-gradient(45deg," + getRgb(0, 255) + ", " + getRgb(0, 255) + ")" );
        , 200 + Math.random() * 800);
        setInterval(function () 
            // 左右两边小圆球
            for (var i = 0; i < 6; i++) 
                $('.qiu-div-left').eq(i).css( "background-image": "linear-gradient(45deg," + getRgb(0, 255) + ", " + getRgb(0, 255) + ")" );
                $('.qiu-div-right').eq(i).css( "background-image": "linear-gradient(45deg," + getRgb(0, 255) + ", " + getRgb(0, 255) + ")" );
            
        , 200 + Math.random() * 500);

        function getRgb(min, max) 
            var r = Math.floor(Math.random() * (max - 0 + 1)) + min;
            var g = Math.floor(Math.random() * (max - 0 + 1)) + min;
            var b = Math.floor(Math.random() * (max - 0 + 1)) + min;
            return 'rgb(' + r + ',' + g + ',' + b + ')';
        
    );
</script>