关键词：
虽然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>
画一棵漂亮的樱花树（不同种樱花+玫瑰+圣诞树喔）
最近翻到一篇知乎，上面有不少用Python（大多是turtle库）绘制的树图，感觉很漂亮，我整理了一下，挑了一些我觉得不错的代码分享给大家（这些我都测试过，确实可以生成喔~）one樱花树 动态生成樱花效果图（这个是动态... 查看详情
html用css控制div边框画一个圣诞树
参考技术A这个很好理解的，你用一个div的边框可以画一个三角型，三个的话，链接一起就是一个圣诞树啦，希望能帮到你，（群：5一七，3八65五9） 查看详情
css+div布局
...*****布局步骤**************************************一.画效果图二.使用DIV进行 查看详情
python如何画3d圣诞树
参考技术A以下是用Python语言编写的程序，用于画一棵圣诞树的图形：#导入turtle库importturtle#设置画笔颜色为绿色turtle.color('green')#设置线条宽度为3turtle.width(3)#循环三次foriinrange(3):#向前移动100像素turtle.forward(100)#向右转120度t... 查看详情
web前端开发技术div+css页面布局5行5列怎么弄？
...才需求，累计更新74个版本。DIV全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样，CSS则提供对文档外观的更好更全面的控制，而且不干扰文档的内容。DIV+CSS模式具有比表格更大的优势，他将网页结构与内容相分离... 查看详情
css两列布局的多种实现方式及原理。
两列布局是非常常见的需求在实际项目中，实现的方式也有很多。这里提供几种实现方式和原理。供大家参考 页面基本布局如下代码所示： 1<divclass="main">2<divclass=‘left‘>3左侧14</div>5<divclass=‘right‘&... 查看详情
css：css+div布局网页
...是顺序布局的，很难达到我们需要的网页布局格式，此时使用DIV进行分层布局，类似于盒子，对每一部分内容进行设计。这是现在主流的网页布局方式，使用DIV+CSS。 CSS盒模型： 网页设计中常听的属性名：内容(content)、... 查看详情
it兄弟连html5教程div+css网页标准化布局的优势
...布局方式，目前绝大多数的网站都是采用这种布局方式。使用DIV+CSS对网站进行布局符合W3C标准，采用这种方式布局通常是为了说明与HTML表格定位方式的区别。通过使用DIV盒子模型结构将各部分内容划分到不同的区块，然后用CSS... 查看详情
div+css布局和table布局的优缺点
...是早以前CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，虽然它有时候布局网页很简单。现在绝大多数的网站都是用DIV+CSS布局。这两种布局各有各的优点。... 查看详情
最美圣诞树|用python画棵雪夜圣诞树送给你(代码片段)
...应该是苹果最畅销的日子…提到圣诞节，就不得不提圣诞树，本文我们用Python来画一棵圣诞树，先睹为快。下面展开来看一下主要代码实现。树圣诞树主要代码实现如下：#画第一层seth(-120)foriinrange(10):fd(12)right(2)pe... 查看详情
最美圣诞树！用python画棵雪夜圣诞树送给你
...应该是苹果最畅销的日子...提到圣诞节，就不得不提圣诞树，本文我们用Python来画一棵圣诞树，先睹为快。下面展开来看一下主要代码实现。树圣诞树主要代码实现如下：# 画第一层seth(-120)for i in range(10): ... 查看详情
html第5章div+css布局技术
2018-05-22css左右布局左中右布局以及一些小技巧
...局常用的方法就是为子元素设置浮动，然后在其父元素上使用clearfix类清除浮动。示例代码如下： 查看详情
小5聊winform从指定服务器下载文件的方式(代码片段)
...件量不大的话如果文件数量会很多，那么就需要考虑使用第三方来保管存储不管是自己服务器存储还是第三方存储，有时候总会需要下载到本地或者，这个时候自己就可以写 查看详情
小5聊jquery基础之触发a标签的click事件无效的解决方法(代码片段)
使用trigger触发click事件有时在特定情况下无效，需要使用click方式直接替换1、代码注入方式无效在浏览器代码注入，trigger触发click无效，但在console输出区域又可以代码如下$(".a").trigger('click');//一般此类方... 查看详情
html5-div布局
<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>div布局-div与css搭配，不建议内部style方式</title></head><body>< 查看详情
圣诞节来临，不打算送一棵圣诞树吗？
圣诞节快到了，提前送一课棵圣诞树给大家喔喔 #define_CRT_SECURE_NO_WARNINGS1#include<stdlib.h>#include<stdio.h>#include<time.h>intmain() charhanzi[20]; intn,j,i,m,x,y; printf("送给"); scanf("%s",hanzi);//输入你... 查看详情
转载css+div实现局部布局
...购物版块布局，效果图： 2、技术目标:使用div+ul-li实现导航菜单布局 查看详情