diaoting2815-CSDN博客

转载 flex弹性盒子实现微博页面

结果图：源代码：html部分：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"/> ...

2019-07-03 08:46:00 206

转载 canvas绘制折线图

效果图：重难点：　　1、画布左上角的顶点的坐标为（0 ，0），右下角的坐标最大，与平常思维相反　　2、数据的处理html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas</title...

2019-07-02 14:28:00 206

转载小米官网轮播图js+css3+html实现

官网轮播：我的轮播：重难点：　　1、布局　　2、图片和右下角小圆点的同步问题　　3、setInterval定时器的使用　　4、淡入淡出动画效果　　5、左右箭头点击时，图片和小圆点的效果同步　　6、另一种轮播思维解答：　　1、最底下容器使用相对定位，图片、小圆点、箭头均使用绝对定位悬浮在底部容器上，图片均的top和left值均设置...

2019-07-01 16:48:00 1230

转载 css3实现旋转卡片

基本思路：父div使用相对定位包裹着两个子元素，子元素使用绝对定位，定位在同一个位置，初始时一个div翻转到后面隐藏，另一个在前面显示，当鼠标悬停在父元素上时，前面的子元素旋转180度，到背面隐藏；背面的元素旋转360度，转到前面显示，这样就实现了旋转卡片的效果。撒花<!DOCTYPE html><html lang="en"><head> &l...

2019-05-15 23:14:00 561

转载 Vue中使用echarts，ajax请求的远程数据赋值给图表不刷新的问题和解决办法

问题：　　vue-cli搭建的项目，在mounted钩子函数里面创建echarts图表，本地模拟数据可以正常显示，但是当将ajax请求的远程数据赋值给图表时，图表并不会刷新。解决办法：　　刚开始以为是vue绑定的数据没有绑定成功，查找资料后发现并不是vue的问题，而是echarts的问题，echarts的数据发生改变时并不会自动刷新，而是需要重新创建这个图表，于是将图表创建部...

2019-05-14 22:42:00 618

转载 vue+el-menu设置了router之后如何跳转到外部链接

<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>　　　&lt...

2019-04-25 09:38:00 6923

转载 el-input的color修改无效问题

相信很多前端初学者跟我一样也遇到过el-input的color修改无效问题如下图：我想把el-input里面的文字改成蓝色，但是使用总是失败修改方法：打开调试界面，找到el-input对应的style样式，找到style下面的color，对其进行颜色修改，看界面上的el-input颜色是否会发生改变，若是改变，那么就是这个类了，步骤如下修改调试器里面的color...

2019-03-16 16:15:00 2659

转载区域性右键弹出菜单随笔

需求：div整体右键弹出一个菜单，然后div上不同组件右键弹出不同菜单，如图：树根节点右键的菜单：除树根以外的其他树节点右键的菜单：table部分右键时的菜单：其他地方右键的菜单：主题思路：右键时对于不同元素进行判断，然后进行li隐藏/显现和label修改的操作，左键单击隐藏菜单关键代码： /*显示菜单*/ sho...

2019-03-05 19:40:00 91

转载 html页面通过http访问mysql数据库中的内容，实现用户登录的功能

需求：　　通过html编写用户登录页面，页面内容包括用户名、密码和登录按钮，点击登录后访问login.php文件，使用按钮默认的submit提交用户名和密码，在login.php中访问mysql数据库，查找是否存在用户名和密码均相同的项，然后通过判断$mysqli->num_rows是否为0，为0时表示数据库中没有相同的数据，通过echo向html页面返回‘失败’的信息，反之则...

2019-01-16 19:44:00 15669

转载 js解决下拉列表框互斥选项的问题

如图不区分选项与其他选项是互斥的关系，当选择了不区分时，其他选项就要去除，当有其他选项存在时，就不能有不区分解决办法：定义change事件，若列表发生改变，首先判断点击的是否是不区分，若是，则将其他选项剪切掉，若是点击的是其他选项，就判断已选择的选项中是否有不区分，若有，则将其切除源码：下拉列表框中定义事件：@change="handleSelectedChange"...

2018-12-22 15:12:00 336

转载 vue实例

效果图：点击减按钮后：进度条减为0后：点击重置后：源码：<!--需求：背景图片，进度条，减和重置按钮进度...

2018-12-13 16:26:00 92

转载 jQuery-UI的使用

使用效果图:源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>testUI</title> <link href="jQueryUI/sunny/jquery-ui.css" rel=...

2018-12-11 16:41:00 178

转载 JQuery+formValidator实现表单验证

<!-- 需求：用户注册页面要有用户名、密码、确认密码、邮箱用户名文本框：用户名不能为空，且必须为数字与字母的6到12位的组合密码框：密码不能为空，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符确认密码框：确认密码不能为空，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊...

2018-12-10 15:19:00 157

转载 JQUERY之表单验证案例

<!-- 需求：用户注册页面要有用户名、密码、确认密码、邮箱用户名文本框：用户名不能为空，且必须为数字与字母的6到12位的组合密码框：密码不能为空，六到八位数字或字母的组合确认密码框：确认密码不能为空，六到八位数字或字母的组合，并且庶和密码框中的内容保持一致邮箱框：邮箱需要输入正确的邮箱格式并且不...

2018-12-08 21:51:00 216

转载 jQuery的appendTo案例

案例要求：点击双击第一个下拉列表框的选项可以把对应选项移到第二个下拉列表框中，选中第一个列表框的选项（可多选）单击-->按钮可使被选中项移动到右边下拉列表框中，单击==>按钮时将左边的所有option选项移到右边，反过来亦是如此。效果图：注意点：这里只能使用内部插入，而不能使用外部插入，否则会使得option选项跑到下拉列表框的外面去存在问题：若是有一个下拉列...

2018-12-07 15:53:00 100

转载 JQEUERY案例

案例效果：点击显示全部奶粉品牌前：点击后：源码：<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>JQUERY</title> <script src="jquery-3.3.1.js"><...

2018-12-06 22:13:00 119

转载 sessionStorage实现note的功能

功能图如图所示：文本域中输入点击保存后的结果如图所示：点击读取后的结果图：选择山羊对应的按钮进行修改并点击保存后的结果：选择山羊养对应的单选按钮进行删除操作后的结果图：点击清空后的结果：源代码：<!DOCTYPE html><html xmlns:height="http://www.w3.org/1999/x...

2018-12-05 22:04:00 130

转载 Web Worker模拟抢票

web worker工作原理图：抢票系统思维导图：思路：五个人（5个div窗口模拟）同时进行抢票，有百分之十的几率可以抢到票，抢到票后对应的窗口（即随机生成的数大于等于0小于9的情况）会编程天蓝色，没抢到票的窗口（即随机生成的数大于9小于100的情况）会变成红色HTML源码：<!DOCTYPE html><html><he...

2018-12-04 23:16:00 131

转载 javaScript+html5实现图片拖拽

源码：<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>html5拖拽效果</title> <style> #d1 { width: 400px; heigh...

2018-12-04 16:52:00 480

转载 svg旋转动画

<!doctype html><html><head> <title>test</title> <meta charset="UTF-8"></head><body><div></div><script src="two.js"></scr...

2018-12-03 18:55:00 869

转载 SVG绘制太极图

思路：先画一整个圆，填充颜色为黑色，再用一个边框和填充颜色均为白色的长方形覆盖右半边的半圆，再以同一个圆心，相同半径绘制一整个圆，该圆的边线颜色为黑色，没有填充颜色，最后常规操作再画四个小圆源代码：<!doctype html><html><head> <title>test</title> <meta...

2018-12-02 09:27:00 366

转载 canvas绘制气泡

思路：使用Math.random()函数绘制是个不同位置，大小，颜色的圆形，然后设置定时器，前一个状态用一个与画布相同颜色的背景图片进行覆盖，改变圆形的位置，每次改变都是在这张空白的背景图片上面重新进行重新绘制的过程源码：<!doctype html><html><head> <title>test</title>...

2018-12-01 13:14:00 406

转载圆点自动跟随鼠标移动

<canvas>绘制思路：在画布上绘制一个圆点，在移动鼠标时用背景图覆盖上一次的图片，然后再在这张背景图上绘制一个原点，利用定时器每隔10ms进行一次刷新<!doctype html><html><head> <title>test</title> <meta charset="UTF-8">...

2018-11-30 22:34:00 845

转载 chart.js应用中遇到的问题

问题一：chart.js的版本问题：打开官网https://github.com/chartjs/Chart.js/releases/tag/v2.7.3，点击Tags，选择最新版本，我这里选用的是V2.7.3，下载对应的ZIP文件，下载好后，解压缩，打开dist文件夹，找　　　　到对应的chart.js文件，复制到自己的开发路径下，使用<script...

2018-11-30 09:56:00 359

转载 canvas画布内部重复画圆

<!DOCTYPE html><html><head> <title>canvas example</title> <meta charset="utf-8"></head><body><canvas id="canvas" width="600px" height="600p...

2018-11-29 10:05:00 661

转载 canvas元素绘制太极图