<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[diaoting2815的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/diaoting2815</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; diaoting2815]]></copyright><item><title><![CDATA[flex弹性盒子实现微博页面]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766375</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766375</guid><author>diaoting2815</author><pubDate>Wed, 03 Jul 2019 08:46:00 +0800</pubDate><description><![CDATA[结果图：


源代码：
html部分：
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="utf-8"&gt;    &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"/&gt;  ...]]></description><category></category></item><item><title><![CDATA[canvas绘制折线图]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766378</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766378</guid><author>diaoting2815</author><pubDate>Tue, 02 Jul 2019 14:28:00 +0800</pubDate><description><![CDATA[效果图：

重难点：
　　1、画布左上角的顶点的坐标为（0 ，0），右下角的坐标最大，与平常思维相反
　　2、数据的处理
html代码：
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;canvas&lt;/title...]]></description><category></category></item><item><title><![CDATA[小米官网轮播图js+css3+html实现]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766372</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766372</guid><author>diaoting2815</author><pubDate>Mon, 01 Jul 2019 16:48:00 +0800</pubDate><description><![CDATA[官网轮播：


我的轮播：


重难点：
　　1、布局
　　2、图片和右下角小圆点的同步问题
　　3、setInterval定时器的使用
　　4、淡入淡出动画效果
　　5、左右箭头点击时，图片和小圆点的效果同步
　　6、另一种轮播思维
解答：
　　1、最底下容器使用相对定位，图片、小圆点、箭头均使用绝对定位悬浮在底部容器上，图片均的top和left值均设置...]]></description><category></category></item><item><title><![CDATA[css3实现旋转卡片]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766377</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766377</guid><author>diaoting2815</author><pubDate>Wed, 15 May 2019 23:14:00 +0800</pubDate><description><![CDATA[基本思路：父div使用相对定位包裹着两个子元素，子元素使用绝对定位，定位在同一个位置，初始时一个div翻转到后面隐藏，另一个在前面显示，当鼠标悬停在父元素上时，前面的子元素旋转180度，到背面隐藏；背面的元素旋转360度，转到前面显示，这样就实现了旋转卡片的效果。撒花&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &l...]]></description><category></category></item><item><title><![CDATA[Vue中使用echarts，ajax请求的远程数据赋值给图表不刷新的问题和解决办法]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766374</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766374</guid><author>diaoting2815</author><pubDate>Tue, 14 May 2019 22:42:00 +0800</pubDate><description><![CDATA[问题：
　　vue-cli搭建的项目，在mounted钩子函数里面创建echarts图表，本地模拟数据可以正常显示，但是当将ajax请求的远程数据赋值给图表时，图表并不会刷新。
解决办法：
　　刚开始以为是vue绑定的数据没有绑定成功，查找资料后发现并不是vue的问题，而是echarts的问题，echarts的数据发生改变时并不会自动刷新，而是需要重新创建这个图表，于是将图表创建部...]]></description><category></category></item><item><title><![CDATA[vue+el-menu设置了router之后如何跳转到外部链接]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766370</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766370</guid><author>diaoting2815</author><pubDate>Thu, 25 Apr 2019 09:38:00 +0800</pubDate><description><![CDATA[&lt;el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"

text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router&gt;
　　　&lt...]]></description><category></category></item><item><title><![CDATA[el-input的color修改无效问题]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766368</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766368</guid><author>diaoting2815</author><pubDate>Sat, 16 Mar 2019 16:15:00 +0800</pubDate><description><![CDATA[相信很多前端初学者跟我一样也遇到过el-input的color修改无效问题
如下图：我想把el-input里面的文字改成蓝色，但是使用总是失败


修改方法：打开调试界面，找到el-input对应的style样式，找到style下面的color，对其进行颜色修改，看界面上的el-input颜色是否会发生改变，若是改变，那么就是这个类了，
步骤如下
修改调试器里面的color...]]></description><category></category></item><item><title><![CDATA[区域性右键弹出菜单随笔]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766366</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766366</guid><author>diaoting2815</author><pubDate>Tue, 05 Mar 2019 19:40:00 +0800</pubDate><description><![CDATA[需求：div整体右键弹出一个菜单，然后div上不同组件右键弹出不同菜单，如图：
树根节点右键的菜单：


除树根以外的其他树节点右键的菜单：

table部分右键时的菜单：

其他地方右键的菜单：

主题思路：右键时对于不同元素进行判断，然后进行li隐藏/显现和label修改的操作，左键单击隐藏菜单
关键代码：


 /*显示菜单*/
 sho...]]></description><category></category></item><item><title><![CDATA[html页面通过http访问mysql数据库中的内容，实现用户登录的功能]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766376</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766376</guid><author>diaoting2815</author><pubDate>Wed, 16 Jan 2019 19:44:00 +0800</pubDate><description><![CDATA[需求：
　　通过html编写用户登录页面，页面内容包括用户名、密码和登录按钮，点击登录后访问login.php文件，使用按钮默认的submit提交用户名和密码，在login.php中访问mysql数据库，查找是否存在用户名和密码均相同的项，然后通过判断$mysqli-&gt;num_rows是否为0，为0时表示数据库中没有相同的数据，通过echo向html页面返回‘失败’的信息，反之则...]]></description><category></category></item><item><title><![CDATA[js解决下拉列表框互斥选项的问题]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766364</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766364</guid><author>diaoting2815</author><pubDate>Sat, 22 Dec 2018 15:12:00 +0800</pubDate><description><![CDATA[如图不区分选项与其他选项是互斥的关系，当选择了不区分时，其他选项就要去除，当有其他选项存在时，就不能有不区分

解决办法：定义change事件，若列表发生改变，首先判断点击的是否是不区分，若是，则将其他选项剪切掉，若是点击的是其他选项，就判断已选择的选项中是否有不区分，若有，则将其切除
源码：

下拉列表框中定义事件：@change="handleSelectedChange"...]]></description><category></category></item><item><title><![CDATA[vue实例]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766369</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766369</guid><author>diaoting2815</author><pubDate>Thu, 13 Dec 2018 16:26:00 +0800</pubDate><description><![CDATA[&lt;!--需求：    背景图片，进度条，减和重置按钮    进度条填满红色，值为100%，点击减时，进度条依次减十，减到0时换一张背景图片，减按钮消失，点击重置按钮时，进度条重新填满红色--&gt;效果图：


点击减按钮后：


进度条减为0后：


点击重置后：


源码：
&lt;!--需求：    背景图片，进度条，减和重置按钮    进度...]]></description><category></category></item><item><title><![CDATA[jQuery-UI的使用]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766362</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766362</guid><author>diaoting2815</author><pubDate>Tue, 11 Dec 2018 16:41:00 +0800</pubDate><description><![CDATA[使用效果图:


源码：
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;testUI&lt;/title&gt;    &lt;link href="jQueryUI/sunny/jquery-ui.css" rel=...]]></description><category></category></item><item><title><![CDATA[JQuery+formValidator实现表单验证]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766367</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766367</guid><author>diaoting2815</author><pubDate>Mon, 10 Dec 2018 15:19:00 +0800</pubDate><description><![CDATA[&lt;!--
    需求：        用户注册页面要有用户名、密码、确认密码、邮箱        用户名文本框：用户名不能为空，且必须为数字与字母的6到12位的组合        密码框：密码不能为空，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符        确认密码框：确认密码不能为空，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊...]]></description><category></category></item><item><title><![CDATA[JQUERY之表单验证案例]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766359</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766359</guid><author>diaoting2815</author><pubDate>Sat, 08 Dec 2018 21:51:00 +0800</pubDate><description><![CDATA[&lt;!--    需求：        用户注册页面要有用户名、密码、确认密码、邮箱        用户名文本框：用户名不能为空，且必须为数字与字母的6到12位的组合        密码框：密码不能为空，六到八位数字或字母的组合        确认密码框：确认密码不能为空，六到八位数字或字母的组合，并且庶和密码框中的内容保持一致        邮箱框：邮箱需要输入正确的邮箱格式并且不...]]></description><category></category></item><item><title><![CDATA[jQuery的appendTo案例]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766365</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766365</guid><author>diaoting2815</author><pubDate>Fri, 07 Dec 2018 15:53:00 +0800</pubDate><description><![CDATA[案例要求：点击双击第一个下拉列表框的选项可以把对应选项移到第二个下拉列表框中，选中第一个列表框的选项（可多选）单击--&gt;按钮可使被选中项移动到右边下拉列表框中，单击==&gt;按钮时将左边的所有option选项移到右边，反过来亦是如此。
效果图：

注意点：这里只能使用内部插入，而不能使用外部插入，否则会使得option选项跑到下拉列表框的外面去
存在问题：若是有一个下拉列...]]></description><category></category></item><item><title><![CDATA[JQEUERY案例]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766357</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766357</guid><author>diaoting2815</author><pubDate>Thu, 06 Dec 2018 22:13:00 +0800</pubDate><description><![CDATA[案例效果：
点击显示全部奶粉品牌前：

点击后：

源码：
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta charset="utf-8"/&gt;    &lt;title&gt;JQUERY&lt;/title&gt;    &lt;script src="jquery-3.3.1.js"&gt;&lt;...]]></description><category></category></item><item><title><![CDATA[sessionStorage实现note的功能]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766361</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766361</guid><author>diaoting2815</author><pubDate>Wed, 05 Dec 2018 22:04:00 +0800</pubDate><description><![CDATA[功能图如图所示：

文本域中输入点击保存后的结果如图所示：

点击读取后的结果图：

选择山羊对应的按钮进行修改并点击保存后的结果：


选择山羊养对应的单选按钮进行删除操作后的结果图：

点击清空后的结果：

源代码：
&lt;!DOCTYPE html&gt;&lt;html xmlns:height="http://www.w3.org/1999/x...]]></description><category></category></item><item><title><![CDATA[Web Worker模拟抢票]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766354</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766354</guid><author>diaoting2815</author><pubDate>Tue, 04 Dec 2018 23:16:00 +0800</pubDate><description><![CDATA[web worker工作原理图：


抢票系统思维导图：


思路：五个人（5个div窗口模拟）同时进行抢票，有百分之十的几率可以抢到票，抢到票后对应的窗口（即随机生成的数大于等于0小于9的情况）会编程天蓝色，没抢到票的窗口（即随机生成的数大于9小于100的情况）会变成红色
HTML源码：
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;he...]]></description><category></category></item><item><title><![CDATA[javaScript+html5实现图片拖拽]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766358</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766358</guid><author>diaoting2815</author><pubDate>Tue, 04 Dec 2018 16:52:00 +0800</pubDate><description><![CDATA[源码：
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta charset="utf-8"/&gt;    &lt;title&gt;html5拖拽效果&lt;/title&gt;    &lt;style&gt;        #d1 {            width: 400px;            heigh...]]></description><category></category></item><item><title><![CDATA[svg旋转动画]]></title><link>https://blog.youkuaiyun.com/diaoting2815/article/details/101766356</link><guid>https://blog.youkuaiyun.com/diaoting2815/article/details/101766356</guid><author>diaoting2815</author><pubDate>Mon, 03 Dec 2018 18:55:00 +0800</pubDate><description><![CDATA[&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;    &lt;title&gt;test&lt;/title&gt;    &lt;meta charset="UTF-8"&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;/div&gt;&lt;script src="two.js"&gt;&lt;/scr...]]></description><category></category></item></channel></rss>