- 博客(66)
- 收藏
- 关注
RSS订阅原创 bootstrap花里胡哨部分笔记
由于组件部分官方整理的非常好，在这里不再整理https://v4.bootcss.com/docs/4.0/components/alerts/1.网格系统v3:https://v3.bootcss.com/css/#gridv4:https://v4.bootcss.com/docs/4.0/layout/grid/container和container-fluid（v3,v4相同...
2019-08-01 16:58:18
799
原创 bootstrap3,4对比(速度过)之网格系统
网格系统v3:<https://v3.bootcss.com/css/#gridv4:https://v4.bootcss.com/docs/4.0/layout/grid/container和container-fluid（v3,v4相同）container两边有一定的margincontainer-fluid占满横向全屏，无两侧margin行用row，列col...
2019-06-26 17:04:35
975
原创 vuex的使用
vuexhttps://www.jianshu.com/p/a804606ad8e91.安装npm install vuex --save2.导入import Vuex from 'vuex'Vue.use(Vuex)3.创建库var store = new Vuex.Store({ state:{ count:0 }, mutati...
2019-06-26 17:00:09
244
原创 vue跳转网页的两种方式
网页跳转的两种方式使用a标签（<router-link>）方式跳转<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-s...
2019-06-26 16:58:02
37581
1
原创 promise使用
promise回调函数解决异步问题需求：依次读取1.txt，2.txt,3.txt中的内容回调地狱：const fs = require('fs');const path = require('path');function getPath(path,succFun,errFun) { fs.readFile(path,'utf-8',function (err,data) ...
2019-06-23 20:47:02
183
原创 vue笔记(9)vue中使用webapck
vue笔记(1)初识部分: https://blog.csdn.net/qq_43537987/article/details/93402865vue笔记(2)vue中ajax:https://blog.csdn.net/qq_43537987/article/details/93403293vue笔记(3)动画：https://blog.csdn.net/qq_43537987/articl...
2019-06-23 20:42:57
347
原创 vue笔记(8)webapck使用
vue笔记(1)初识部分: https://blog.csdn.net/qq_43537987/article/details/93402865vue笔记(2)vue中ajax:https://blog.csdn.net/qq_43537987/article/details/93403293vue笔记(3)动画：https://blog.csdn.net/qq_43537987/articl...
2019-06-23 20:37:30
241
原创 vue笔记(7)watch,methods,computed使用nrm的使用
vue笔记(1)初识部分: https://blog.csdn.net/qq_43537987/article/details/93402865vue笔记(2)vue中ajax:https://blog.csdn.net/qq_43537987/article/details/93403293vue笔记(3)动画：https://blog.csdn.net/qq_43537987/articl...
2019-06-23 20:28:52
174
原创 vue笔记(6)路由
vue笔记(1)初识部分: https://blog.csdn.net/qq_43537987/article/details/93402865vue笔记(2)vue中ajax:https://blog.csdn.net/qq_43537987/article/details/93403293vue笔记(3)动画：https://blog.csdn.net/qq_43537987/articl...
2019-06-23 20:24:44
261
原创 vue笔记(5)使用ref获取DOM元素和组件
vue笔记(1)初识部分: https://blog.csdn.net/qq_43537987/article/details/93402865vue笔记(2)vue中ajax:https://blog.csdn.net/qq_43537987/article/details/93403293vue笔记(3)动画：https://blog.csdn.net/qq_43537987/articl...
2019-06-23 20:20:30
726
原创 vue笔记(4)组件化
vue笔记(1)初识部分: https://blog.csdn.net/qq_43537987/article/details/93402865vue笔记(2)vue中ajax:https://blog.csdn.net/qq_43537987/article/details/93403293vue笔记(3)动画：https://blog.csdn.net/qq_43537987/articl...
2019-06-23 20:14:51
265
原创 vue笔记(3)动画
vue笔记(1)初识部分: https://blog.csdn.net/qq_43537987/article/details/93402865vue笔记(2)vue中ajax:https://blog.csdn.net/qq_43537987/article/details/93403293Vue动画使用过渡类名实现一个简单动画https://cn.vuejs.org/v2/guid...
2019-06-23 20:13:02
291
原创 vue笔记(2)vue中使用ajax
vue笔记(1): https://blog.csdn.net/qq_43537987/article/details/93402865Vue中利用 vue-resource发起Ajax请求除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求参考网址：https://www.runoob.com/vue2/vuejs-ajax.htmlhttp...
2019-06-23 20:05:58
752
原创 vue笔记(1)初识
Vue.js 初识内容包括基本代码常用vue指令事件修饰符vue样式过滤器自定义指令vue实例的生命周期什么是Vue.jsVue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js 是前端的主流框架之一，和Angular.js、Re...
2019-06-23 20:04:20
300
原创 node.js+express+bootstrap+ajax实现登录注册，商品增删改查
1 问题描述想要实现对手表商品的管理功能，以及用户的登录和注册功能。2 功能分析调用数据库，在页面上实现手表商品的增删改查功能，以及登录注册功能。3 系统设计3.1 系统功能模块图3.2 系统功能设计3.3 数据库设计用户表：商品表：4 系统实现4.1 工程层次图├─ /手表商品管理/ ··················· 项目所在目录└─┬─ /models/...
2019-06-21 11:02:31
1711
原创 Vue实现数据的增删查功能，简易学生管理案例
简易学生管理案例效果展示：代码及注释讲解：<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=...
2019-06-03 12:56:41
2187
2
原创 会动的文字背景
效果展示：代码部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } html,body {...
2019-05-26 20:37:14
483
原创 bootstrap案例
效果展示：总体代码：<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor...
2019-05-26 15:50:43
1571
2
原创 移动端京东案例
效果展示：index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, ma...
2019-05-26 15:44:06
629
原创 canvas绘制行走的小人
根据键盘上下左右控制小人行走的方向。素材:效果展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>行走的小人</title> <style> canvas { display: block; ...
2019-05-26 15:37:13
1717
原创 canvas绘制饼图
效果展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> canvas { border:1px solid red; display: block...
2019-05-26 15:31:12
176
原创 canvas绘制渐变的矩形
效果展示：代码部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>渐变矩形</title> <style> canvas { border: 1px dashed red; } </st...
2019-05-26 15:20:40
831
原创 Canvas绘制折线图
效果展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> canvas { display: block; margin: 80px auto; ...
2019-05-26 15:19:16
444
原创 CSS3制作360切换屏幕显示每屏动画>>全屏插件使用及过渡案例
首先先分享一下全屏插件：链接：https://pan.baidu.com/s/164Ki7sIpxq-3fL4OIdqy0A提取码：qph0使用介绍：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</tit...
2019-04-19 16:49:33
433
原创 CSS3制作炫酷切割效果轮播图
效果展示：思路：当你看到这张图的时候可能会有些启发。没错就是生成一个正方体，让正方体进行旋转。那切割效果又是怎么做到的呢？把每个面在平均分成五份，旋转的时候让每份有一个各自的延迟不就好了嘛。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t...
2019-04-19 16:37:42
1040
原创 携程网案例>>flex伸缩布局
效果展示：目的：可以达到屏幕自适应的效果。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ pa...
2019-04-19 16:30:22
538
原创 CSS3制作时钟案例animation练习
效果展示：思路：1.最外层的灰色圆圈是一个div，利用border-radius: 50%;设成圆形。2.圆圈四周的时刻是六个div经过旋转所得。3.设一个覆盖层，将中间部分覆盖，便可将矩形变成时刻形状。4.利用定位和transform,添加时针分针秒针。5.使针转动，利用动画animation:zhuan 43200s linear infinite;大功告成。代码：...
2019-04-19 16:26:02
555
原创 CSS3制作正方体案例transform练习
案例：制作正方体。思路：通过transform属性，使六个面通过平移旋转得到最终效果。效果展示：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>正方体</title> <style> .contai...
2019-04-19 16:16:15
607
1
原创 CSS3之transform-origin属性案例
案例：鼠标经过时，扑克牌转动到各自角度。目的：掌握transform-origin属性的使用。效果展示：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>旋转中心</title> <style> #c...
2019-04-19 16:10:18
419
原创 CSS3实现自适应的聊天气泡
边框图片功能：将图片规定为包围 div 元素的边框a) 定义和用法： border-image 属性是一个简写属性，用于设置以下属性border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeatb) 属性说明：值 描述border-image...
2019-04-19 16:03:28
2807
原创 CSS3多过渡效果
效果展示：知识点：1…box > img:nth-of-type(1)表示选择box下的第一个img2. transform: translate(100px,100px) rotate(30deg);多过度效果，该行代码表示先进行平移在旋转注： transform: rotate(30deg) translate(100px,100px);如果写成这样是先旋转在平移，旋转...
2019-04-18 19:54:53
527
1
原创 CSS3小案例之安卓机器人
效果展示：知识点：1.伪元素选择器.head::before,.head::after {}一定要加content: ;2.设置圆角border-radius: 50%;border-bottom-right-radius: 20px;border-bottom-left-radius: 20px;代码：<!DOCTYPE html><html lang="...
2019-04-18 19:47:06
679
原创 sessionStorage 和localStorage
特点：a) 设置、读取方便b) 容量较大，sessionStorage约5M、localStorage约20Mc) 只能存储字符串，可以将对象JSON.stringify() 编码后存储Window.sessionStorage的使用a) 特点：i. 生命周期为关闭浏览器窗口：相当于存储在当前页面的内内存中ii. 在同一个窗口下数据可以共享(在当前页面下可以获取到，换另外一个页面下...
2019-04-18 19:42:24
136
原创 H5拖拽接口
在h5中，如果想拖拽元素，就必须为元素添加draggable=“true”. 图片和超链接默认就可以拖拽 <p id="pe" draggable="true">试着把我拖过去</p>/学习拖拽，主要就是学习拖拽事件//*应用于被拖拽元素的事件ondrag 应用于拖拽元素，整个拖拽过程都会调用–持续ondragstart 应用于拖拽元素，...
2019-04-18 19:37:31
183
原创 FileReader接口使用
FileReader:读取文件内容* 1.readAsText():读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8* 2.readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储* 3.readAsDat...
2019-04-18 19:31:08
290
原创 H5网络监听接口和全屏接口
1.网络监听接口/1.ononline:网络连通的时候触发这个事件//2.onoffline:网络断开时触发/<script> /*1.ononline:网络连通的时候触发这个事件*/ window.addEventListener("online",function(){ alert("网络连通了"); }); /*2.onof...
2019-04-18 19:21:47
567
原创 H5自定义属性
规范：1.data-开头2.data-后必须至少有一个字符，多个单词使用-连接建议：1.名称应该都使用小写–不要包含任何的大写字符2.名称中不要有任何的特殊符号3.名称不要副作用纯数字案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l...
2019-04-18 19:14:52
115
原创 H5获取DOM元素的方法及新增类样式操作
1.获取DOM元素document.querySelector(".green");document.querySelectorAll(“li”)[0];案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title<...
2019-04-18 19:12:28
1368
原创 H5媒体标签，属性及案例
多媒体1.音频播放：audio标签的使用:a) 属性：autoplay 如果出现该属性，则音频在就绪后马上播放。controls 如果出现该属性，则向用户显示控件，比如播放按钮。loop 如果出现该属性，则每当音频结束时重新开始播放。preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。src 要播放的音频的 URL。...
2019-04-18 19:06:35
1884
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人