大前端全栈之路
详细介绍 html + css + js + jquery
加组件化
vue + react + node 等前端技术
并且后期会不段的加强项目的优化
爱生活,爱编程
在以后的日子里,我会不断的写博客,争取拿下大前端
展开
-
移动适配
rem实际开发适配方案1①假设设计稿是750px②假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)③每一份作为html字体大小,这里就是50px④那么在320px设备的时候,字体大小为320/15就是 21.33px⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的⑥比如我们以750为标准设计稿⑦一个100100像素的页面元素在 750屏幕下, 就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1⑧320屏原创 2021-02-20 08:24:36 · 1327 阅读 · 0 评论 -
vue动画2 ,自己写个全局的辅助函数
这是我们自己写的辅助方法(生成组件的多实例)我们使用看看说白了,就是生成一个动画实例,然后开启动画,当动画结束后,将实例删除!原创 2020-06-25 09:43:03 · 148 阅读 · 0 评论 -
vue 小球动画
对于我们来说,vue transition 使用起来是很简单的,自己可以去官网看就会了我们重点关注js 钩子我们重点关注 js 钩子动画CartAnim.vue<template> <div class="ball-wrap"> <transition @before-enter="beforeEnter" @enter="enter" @afterEnter="afterEnter"> <div class="ball"原创 2020-06-25 09:20:27 · 786 阅读 · 0 评论 -
我们从后台抓取数据后,就要进行处理,这篇写一个处理的简单代码
<script type="text/javascript"> var obj = { code: 1, slider: [ { id: 21, img: "/img/01.jpg" }, { id: 22, im...原创 2020-06-20 15:25:29 · 436 阅读 · 0 评论 -
vuecli3 router全限管理
我们的设想很简单,就是有人拿着令牌,我们就让他进军营,不拿令牌,我们就不让进!整体和原来差不多,我们就是添加一个路由守卫,也就是箭头部分,这个非常好玩,类似于node 的中间键,类似Java的拦截器总之随便你叫,就是个拦截的模块上面逻辑很简单,就是遇到该检查权限的就检查,有令牌就放行,没有令牌就直接跳转到 login模块!很久没写 文章了,希望大家都多支持!...原创 2020-06-12 09:33:42 · 192 阅读 · 2 评论 -
ajax get 和post
var xhr = new XMLHttpRequest(); // xhr.open("get","http://localhost:3000/students",true); // xhr.send(); data = { "name":"action is power" ...原创 2020-03-25 10:28:11 · 134 阅读 · 2 评论 -
json-server 学习笔记
这个非常好,能够帮助我们快速的搭建起一个可以crud 的服务器!废话少说,1 ,安装npm i json-server -g2, 在项目的根目录下新建一个db.json 的数据文件3,运行:json-server --watch db.json开启后就可以很愉快的测试了,crud这个测试我感觉还是用postman 测试,比较方便所以我去下载下postm...原创 2020-03-25 09:55:48 · 181 阅读 · 0 评论 -
让梦想照进现实,轮播图继续
上一章,我们解决了点击指示器,然后就自动执行动画,这个很简单,这节我们添加了,自动轮播功能和解决移动有点楞的问题,就是多加张图片的障眼法解决的!我们在最后加一张和第一张,一模一样的图片,当移动到最后一张的时候,我们突然拉倒第一张位置,这样客户是就感觉是自动轮播无线轮播了! 行,轮播图我们就搞定了!<!DOCTYPE html><html...原创 2019-01-26 20:58:25 · 245 阅读 · 1 评论 -
让梦想照进现实,运动框架的使用,轮播图
<!DOCTYPE html><html><head> <title>lunbo</title><!-- 布局的计算方式,你要慢慢计算,因为这个很好玩,要学会画图! --> <style type="text/css"> *{ padding:原创 2019-01-26 20:12:43 · 127 阅读 · 0 评论 -
完美运动框架-抄别人的
实际上,还是石川大神写的牛叉,我抄了的!/** * getStyle 获取样式 * startMove 运动主程序 */ function getStyle(obj, attr){ if(obj.currentStyle) { return obj.currentStyle[att...原创 2019-01-25 21:15:34 · 176 阅读 · 0 评论 -
让梦想照进现实,运动框架再次递进
我就想,一个div 可以多个属性,同时变化的操作! 我的基本逻辑就是,遍历所有的属性对象,挨着牌 的判断是否到达边界,若到达边界,则修正下边界若不到达边界,则执行运动操作若全部执行完毕, 则 清空定时器, 然后调用最后的回调方法!这里面用到了标记变量的操作!isAllDone 标记! ...原创 2019-01-25 21:04:17 · 391 阅读 · 0 评论 -
运动框架继续复习- 让梦想照进现实
学程序真的很无奈,因为 一个程序员,学出来,我估计最少得半年,很无语!不扯了,我们继续改进我们的运动框架 现在我们就可以加入回调功能了,就是当一个动画执行完毕的时候,接着执行另外一个动画这样的话我们就可以让div ,先竖着执行动画,然后横着执行动画! 现在我们的运动框架很牛了,可以 链式挨着调用动画!但是远远不够,我们加入让多个属性同时变动的逻辑,咋写呢...原创 2019-01-25 20:12:20 · 449 阅读 · 0 评论 -
让梦想照进现实,js 基础收尾工作-运动框架基本写法演化3
进一步演化就是可以给多个div 都让它移动的方法,那么这个时候,每个div 应该有自己的定时器变量也就是将全局变量转成对象的属性,让他们互相不影响<!DOCTYPE html><html><head> <title>action</title> <meta charset="utf-8"> &原创 2019-01-25 11:06:23 · 339 阅读 · 0 评论 -
让梦想照进现实,js 基础收尾工作-运动框架基本写法演化
<!DOCTYPE html><html><head> <title>action</title> <meta charset="utf-8"> <style type="text/css"> #box{ width: 100px; hei原创 2019-01-25 10:46:17 · 333 阅读 · 0 评论 -
让梦想照进现实,js 基础收尾工作-运动框架基本写法
一个任务到了最后阶段,往往人会很松懈,结果导致不能很好的完成特定的任务,所以有时候我在想要达到目标不是做了什么,而是不做什么,比如,看电视,打游戏,做些莫名其妙的事情,不懂得珍惜时间真的不行,个人认为,一个越优秀的人时间也越宝贵好了,不扯了,今天我们来复习运动框架,这个以前我写过,可是我发现没彻底掌握,这次,重新开始, 相信为学日益,一遍一遍效果!基本功能就是点击move 按钮...原创 2019-01-25 10:06:55 · 152 阅读 · 0 评论 -
让梦想照进现实 - jsbom基础复习
下面就是自动轮播,这个写过,所以我们直接把它截取过来就行了!原创 2019-01-23 14:10:11 · 125 阅读 · 0 评论 -
让梦想照进现实-dom事件补充
<script type="text/javascript"> //使div可以根据不同的方向键向不同的方向移动 /* * 按左键,div向左移 * 按右键,div向右移 * 。。。 */ window.onload = function(){ //为document绑定一个按...原创 2019-01-22 20:14:45 · 156 阅读 · 0 评论 -
开心截图,拖拽大作战
加这个div, up 事件就必须绑定给document ,否则会出现问题!版本2 : 版本3 :是正按下ctrl + a 再拖动的时候,会出现, 抖影子这个解决办法,也是有兼容问题,我就不写了,直接截图过来!/* * 提取一个专门用来设置拖拽的函数 * 参数:开启拖拽的元素 */ function drag(obj){ ...原创 2019-01-22 13:45:41 · 133 阅读 · 1 评论 -
开心截图让梦想照进现实
再我们出发之前,我们先补充下一些知识点,然后我们就做一个拖拽的完整版,同样做好之后,我们就可以执行用了,不需要二次的去封装了!1,事件的委派我们先看下一个基本的东西我们要为每个Li都添加点击事件,这个时候我们会写如下代码:那么这个时候,加入我们向ul 中添加个li结果当你点击 的时候, 新添加的Li 没有点击事件的处理函数,也就是没有反应,这个时候,我们还要给它添加...原创 2019-01-22 13:10:59 · 134 阅读 · 1 评论 -
梦想照进现实 - div跟着鼠标滚动
以上是div移动基本思路,要记住div 是absolut定位元素下面是我加强版的拖拽,先按下,然后按住左键不懂,拖,然后到达目的地释放!别看下面代码简单,最后你把所有的小代码, 一整合就变成大级别代码了!任何事情都是有门槛,若别人告诉你非常简单,非常简单, 一夜暴富,都是坑你的哈哈! 下面讲事件冒泡,这个非常简单,就是孩子的事件,会自动冒泡给祖先元素重点就是阻止...原创 2019-01-21 22:59:36 · 220 阅读 · 0 评论 -
让梦想照进现实-js dom 事件操作
我们每一个学习技术的人,其实都有技术追求, 并且技术呢, 不是一下子就学会的,所以呢,我其实蛮佩服高手,因为他们都是通过不段的敲代码,敲出来的,所以每一个人都很优秀, 在此祝大家学习愉快,开心生活我发现每个行业都有一些基本的词汇, 当你掌握了基本词汇之后,你就会发现,你能很开心的理解一些事情,否则你就无法去描述该行业的一些事情,这就是词汇的力量! 行吧,不扯这么多了,我们开始开心截图!...原创 2019-01-21 22:31:42 · 112 阅读 · 0 评论 -
让梦想照进现实, js dom 开心截图
前面写日记,我终于发现了一个问题,就是博客写的晦涩难道,从今天开始我打算慢慢练成写成可以轻松阅读的博客来,慢慢练习吧,我觉得只要用心,会越来越熟练的!渐进式开发,渐进式写日记(不断的加以修正和扩充)---目前感觉这种思维是最符合规律的思维!我采用边写边写博客的方式,慢慢的引导思维的流动! 我们先有必要看下,基本的代码逻辑!上面的代码虽然少,但是牵扯到了事件的监听,和事件的处理 ...原创 2019-01-20 09:15:23 · 260 阅读 · 0 评论 -
开心截图,让梦想照进现实, js复习dom
小米手机的小爱机器人,可以点歌,可以备忘路,可以用作响铃功能,很不错,大家可以玩下!小爱同学-------从这节开始我们就进入了dom 的复习, 说实话我也不熟悉,不过,我会截图截取的详细些! 上面的都非常简单,在此插入一个问题,伪数组转成真正数组的操作通过slice 方法可以返回一个真正的数组, 为啥伪数组可以调用真正数组的slice方法 还刚好可以调用...原创 2019-01-19 17:31:24 · 148 阅读 · 0 评论 -
开心截图 -js复习, 开心轮播图
轮播图,功能其实蛮简单,你学android 会遇到, (android 当中还有指示器啥的(就那个小圆点))// 自动轮播还要防止内存泄露,这里先不扯了,我们先搞一下,我们小小网页的轮播! 1,布局! 这个布局很简单,就是一个div,包含上中下三块!下面就是css也没有多少css 代码很简单,好了,布局我们搞定了,下面就是js 我们所有的js ...原创 2019-01-19 11:38:35 · 160 阅读 · 0 评论 -
正则表达式
原创 2019-01-17 14:21:06 · 99 阅读 · 1 评论 -
让梦想照进现实- 开心截图js复习-- 类对象
、Date对象: /* * Date对象 * - 在JS中使用Date对象来表示一个时间 */ //创建一个Date对象 //如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间...原创 2019-01-16 19:49:23 · 202 阅读 · 0 评论 -
开心截图js 复习,让梦想照进现实哈
call 和apply 后面还会遇到,所以不必太自已, 我记得,我学习 石川老师的前段课程时,也讲过, 可见知识要用到的话,会到处都在讲!用心总是能学会的!结果如下:所以说arguments 是一个类数组对象,我记得, 将 类数组对象,转成数组对象有个方法来着,我去百度找找!slice.call(); 方法,呵呵,我咋那聪明呢slice 会生成一个新数组,非...原创 2019-01-16 19:32:01 · 106 阅读 · 0 评论 -
开心截图,js 复习,让梦想照进显示
大家看我博客时,图太大,大家就放大了看,一图胜过前言万语,至少,从细心的压缩来看,是这个样子逻辑思维能力,学计算机,多练习就会了,跟打篮球,都差不多,我几个月,没碰篮球,拿到球,手一扔就进去了,就是因为以前练习过,就这么简单!这个数组排序算法,以前学c 的时候, 什么冒泡,快排, 希尔排序, 啥的,记得有五种,现在忘光了,呵呵,行吧,为了复习下,我自己写几个看看,回忆下以前的学习成...原创 2019-01-16 17:01:40 · 105 阅读 · 3 评论 -
开心截图 ,js 复习gogogo
其实我只能说,为学日益, 你学习计算机,肯定是越学懂得越多, 掌握的越熟练,别的真的没有了就跟我们去读道德经,打太极一样,只会越来越熟练,为学日益, 呵呵呵,自己说了,这么多, 古人就四个字,真的是无法比较人嘛,也就二三十年历史经验, 古人很厉害!不扯了,我们继续!这个 slice 只是截取操作,不对原先数组进行任何处理!下面的splice 就直接对原先数组进行处理了,这就两者...原创 2019-01-16 16:25:23 · 130 阅读 · 1 评论 -
开心截图:js继续复习
数据结构 ,堆栈,图, 链表,就不需要多说, 没事看看,c 语言,数据结构,很简单! 既然是回调函数,就满足几个条件,1 我们自己定义的,2, 我们不调用,交给别人调用(或者系统调用) 3, 我们不知道啥时候调用,也许是在某一个时机(某一个时机,异步请求,返回结果后ajax有回调函数),也许是在生命周期方法中调用(vue 中生命周期方法,android activity ...原创 2019-01-16 14:57:37 · 111 阅读 · 0 评论 -
开心截图-js复习3
立即执行函数哈, 那些库的基本代码都是将一个函数(或者类)挂在到window上,这样在任何地方都可以使用对应的 函数了, /* * 创建一个对象 */ var obj = new Object(); //向对象中添加属性 obj.n...原创 2019-01-15 17:42:57 · 115 阅读 · 0 评论 -
javascript 图片复习
我发现还是截图让人愉快! 黑色的文字让人无趣!原创 2019-01-15 16:19:43 · 170 阅读 · 0 评论 -
javascript 复习
\/* * 数据类型指的就是字面量的类型 * 在JS中一共有六种数据类型 * String 字符串 * Number 数值 * Boolean 布尔值 * Null 空值 * Undefined 未定义 * Object 对象 * * 其中String Number Boolean Nu...原创 2019-01-13 22:06:03 · 1039 阅读 · 0 评论