虽然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::before{border-color:transparent transparent " + color + " transparent}</style>");
$('.big-star-div').append("<style>.big-star-div::after{border-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>
