自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(22)
  • 收藏
  • 关注

原创 vue px单位转vw单位 记录

本文记录一下px自动转换vw适配的方法:npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --savecnpm i cssnano-preset-advanced --save-dev配置postcss.config.js文件module.exports = { "plugins": { "po

2020-05-19 11:40:23 646 1

原创 前端面试题库——什么是防抖和节流?有什么区别?如何实现?

什么是防抖与节流?防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水,阀门一打开,水哗哗的往下流,秉着勤俭节约的优良传统美德,我们要把水龙头关小点,最好是如我们心意按照一定规...

2020-02-28 10:22:05 3439 1

原创 前端面试题库——['1', '2', '3'].map(parseInt)

第一眼看到这道题目的时候,下意识的反应是[1,2,3],但是真正的答案是[1,NaN,NaN]。通常情况下,map方法中的callback函数只需要接受一个参数,就是正在被遍历的数组元素本身。这并不意味着map只给callback传了一个参数(会传递三个参数——currentValue:当前元素的值;index:当前元素的索引值;arr :当前元素属于的数组对象)。通常使用parseInt时,...

2020-02-27 16:36:03 222

原创 vue-seamless-scroll实现列表无缝滚动

一个简单的无缝滚动,最近折磨了我好久,记录一下。先上一下最终实现效果:最开始html标签用的table、thead、tbody然后结合animate和settimeout实现的,但是实现之后每次滚动都抖一下,也找不到原因;后来寻思是不是table的原因,于是换成div试了一下,原来的问题解决了但是出现了新问题:滚动不流畅,就像网速不好似的。。。于是,我又换成了现在的vue-seamless-...

2020-02-19 10:31:29 3942 2

原创 文章分享——Vue的slot-scope的场景的个人理解

分享一篇文章——Vue的slot-scope的场景的个人理解,对于我个人理解作用域插槽很有帮助Vue的slot-scope的场景的个人理解

2019-12-03 16:56:09 190

原创 vue实现列表无缝滚动

vue实现列表无缝滚动HTML部分代码css部分代码js部分代码HTML部分代码<template> <div id="box" class="wrapper"> <div class="contain" id="con1" ref="con1" :class="{anim:animate==true}"> <List ...

2019-10-21 14:17:43 2713

原创 vue小练习之todolist

效果图:代码:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;小目标列表&lt;/title&gt; &lt;link href="https://cdn.bootcss.co

2019-02-19 17:27:33 235

原创 响应式游戏网站之首页轮播图制作

下面上首页轮播图部分代码,先看效果图:下面上代码: &amp;lt;div class=&quot;hero-section&quot;&amp;gt; &amp;lt;div class=&quot;hero-slider&quot;&amp;gt; &amp;lt;!--Hero Item start--&amp;gt; &amp;lt;d

2019-01-21 09:05:23 607

原创 响应式游戏网站之首页导航制作

看到一个风格很喜欢的游戏网站,准备试着用bootstrap做一下,正好最近在学习bootstrap。今天记录一下首页导航部分:图上是效果图,下面附代码:html:&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equi

2019-01-19 10:34:23 354

原创 freecodecamp小练习——Caesars Cipher凯撒密码

凯撒密码(让上帝的归上帝,凯撒的归凯撒)下面我们来介绍风靡全球的凯撒密码Caesar cipher,又叫移位密码。移位密码也就是密码中的字母会按照指定的数量来做移位。一个常见的案例就是ROT13密码,字母会移位13个位置。由’A’ ↔ ‘N’, ‘B’ ↔ ‘O’,以此类推。写一个ROT13函数,实现输入加密字符串,输出解密字符串。所有的字母都是大写,不要转化任何非字母形式的字符(例如...

2019-01-02 14:14:27 217

原创 freecodecamp小练习——Falsy Bouncer过滤数组假值

记录一下今天接触的一个关于Boolean的小知识点。代码:function bouncer(arr) { // 请把你的代码写在这里 return arr.filter(element=&gt;Boolean(element));}bouncer([7, "ate", "", false, 9]);...

2018-12-28 17:01:29 192

原创 freecodecamp小练习——Reverse a String翻转字符串

很小的练习:先把字符串转化成数组,再借助数组的reverse方法翻转数组顺序,最后把数组转化成字符串。代码:function reverseString(str) { var strf=str.split(''); return strf.reverse().join('');}reverseString("hello");很简单的小练习,记录一下。...

2018-12-27 10:08:06 138

原创 freecodecamp任务一——Build a Tribute Page

最近有在按照freecodecamp的教学课程进行学习。其实很茫然不知道从哪里开始着手,只能再找一个教程按进度学习。今天按照进度进入第一个比较完整的小项目练习,来此记录一下。今天的任务是设计一个(https://codepen.io/FreeCodeCamp/full/NNvBQW/) 页面,使用的是bootstrap框架。之前有了解过bootstrap,但是没有投入实践,今天也算是熟悉一下该框架...

2018-12-24 17:20:07 982

原创 vue之自定义指令

这篇文章以聚焦输入框为例简单总结一下vue中自定义指令的内容。当页面加载时,该元素将自动获得焦点 ,也就是当你打开页面时还没有点击任何内容,该输入框就已经处于聚焦状态。下面用指令实现这个功能: // 注册一个全局自定义指令 `v-focus` Vue.directive('focus',{ // 当被绑定的元素插入到 DOM 中时…… inserted:fun...

2018-12-12 11:33:53 130

原创 vue练习之品牌列表案例

今天做了一个品牌列表案例,一个动图展示今天的学习成果:这次页面用了bootstrap框架上代码:&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &am

2018-12-11 17:44:55 948 2

原创 vue小练习之购物车实现

今天从网上找了一个购物车的小例子,照着敲了一下,收获不少。下面的用一个小动图展示一下成果:接下来上代码:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;link href="css/shoppingcart.css" rel="stylesheet"

2018-12-07 17:57:00 520

原创 Flex 布局教程:语法篇

上午学习了一下flex布局的基础语法,以下内容主要参考了flex布局教程:语法篇-阮一峰的网络日志【感谢】一、Flex 布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; }行内元素也可以使用 Flex 布局。 ...

2018-12-06 13:56:27 174

原创 vue小练习之添加、删除信息行

做了一个添加、删除信息行的小练习,比较简单,上代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=

2018-12-05 16:27:44 253

原创 vue.js条件渲染中v-if 对比v-show

这篇记录一下vue的条件渲染:v-if:&lt;h1 v-if="ok"&gt;Yes&lt;/h1&gt;也可以用 v-else 添加一个“else 块”:&lt;h1 v-if="ok"&gt;Yes&lt;/h1&gt;&lt;h1 v-else&gt;No&lt;/h1&gt;在 元素上使用 v-if 条件渲染分组因为 v-if 是一个指令,所以

2018-12-05 13:32:57 429

原创 vue中计算属性与方法的不同之缓存

今天没太多进展,只是看了一点vue.js官网的一些东西。说实话,看的很吃力。今天总结一下vue中计算属性computed和方法methods在缓存上的区别。以上两幅图中,实现的功能是相同的:将message的值反转。图一是像绑定普通属性一样在模板中绑定计算属性,reversedMessage依赖于message,当 message 发生改变时,所有依赖 reversedMessage 的绑定也...

2018-12-03 18:10:49 422

原创 vue小练习——选项卡切换

上午做了个选项卡的小练习,很简单,可以熟悉语法吧。上代码:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="

2018-11-30 11:20:06 301

原创 vue小项目练习——输入标题并将输入的标题添加到标题列表

第一次写博客,先自我介绍一下吧,我是18届中国石油大学(华东)计算机科学与技术专业的本科毕业生[有没有学长或者学姐,吱吱吱],现从事前端工作。希望通过这个博客记录自己的学习之路,加油!今天没有开发任务,自学了一下vue,做了个小练习。之前只是简单看了一下vue的模板语法,今天的小实例让我学习不少。上代码。&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head...

2018-11-29 17:30:56 553

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除