前端学习
猜不到我是谁
这个作者很懒,什么都没留下…
展开
-
使用bootstrap实现freeCodeCamp上Build a Personal Portfolio Webpage
使用bootstrap实现freeCodeCamp上Build a Personal Portfolio Webpagebootstrap中标签页插件HTMLJSbootstrap中滚动监听插件需要相对定位(relative positioning)通过 data 属性调用csshtmljs标签页与滚动监听插件一起使用不生效htmlcssjs实现效果bootstrap中标签页插件HTML&l...原创 2019-03-25 21:04:37 · 601 阅读 · 0 评论 -
微信小程序的路由跳转传值,及导航栏、轮播图实现
导航栏效果图功能点击跳转以及滑动跳转实现使用小程序swiper组件代码全部代码<view class="mineRegister-container"> <!--顶部导航栏--> <view class="swiper-tab"> <view class="tab-item {{currentTab==0 ? 'act...原创 2019-05-21 16:44:03 · 1187 阅读 · 0 评论 -
vue 数据分页
数据列表分页处理在数据分类中,每页仅能显示8种具体的分类。当超出8种是自动出现第二页,同时,所有的页具有轮播效果。如图:具体代码如下:html文件<div class="icons"> <swiper> <swiper-slide v-for="(page,index) of pages" :key="index"> ...转载 2019-05-13 16:27:37 · 1465 阅读 · 0 评论 -
API获取直播博主信息
介绍实现类似freeCodeCamp上的Use the Twitchtv JSON API练习,项目中使用斗鱼的api接口代替了Twitchtv接口,由于没有找到合适的接口数据,项目中使用online人数超过1000000状态代替online,低于的代替offline状态,后期代码优化的时候会用合适的api接口或者mock生成模拟数据,样式较丑勿怪。所有博主显示online博主offl...原创 2019-05-13 16:54:06 · 1526 阅读 · 0 评论 -
FileReader读取文件
前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件。input:file在介绍FileReader之前,先简单介绍input的file类型。<input type="file" id="inputBox">input的file类型会渲染为一个按钮和一段文字。点击按钮可打开文件选择窗口,文字表示对文件的描述(大部分情况下为文件名)...转载 2019-05-27 10:27:53 · 8574 阅读 · 1 评论 -
angular从零搭建一个基础的无人点餐项目
Angular 环境搭建1、安装前准备工作:1.1、安装 nodejs安装 angular 的计算机上面必须安装最新的 nodejs–注意安装 nodejs 稳定版本1.2、安装 cnpmnpm 可能安装失败建议先用 npm 安装一下 cnpm 用淘宝镜像安装https://npm.taobao.org/npm install -g cnpm --registry=https://r...原创 2019-05-17 17:45:40 · 509 阅读 · 0 评论 -
前端JS利用canvas的drawImage()对图片进行压缩
对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验。这种体验包括两方面:1、由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险。2、最重要的体验改进点:省略了图片的再加工成本。很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的。然后现在的数码设备拍摄功能都非常出众,...转载 2019-05-27 11:33:38 · 7976 阅读 · 0 评论 -
移动端H5实现图片上传
效果图基础知识FormData通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同。这是一种常见的移动端上传方式,FormData也是H5新增...转载 2019-05-27 14:28:45 · 9825 阅读 · 0 评论 -
Vuex—— state,mapState,...mapState对象展开符详解
1.statestate是什么?定义:state(vuex) ≈ data (vue)vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新.虽然state和data有很多相似之处,但state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于st...转载 2019-05-30 11:33:58 · 1956 阅读 · 0 评论 -
vuex中的this.$store.commit...
Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长,并且不利于组件的复用,提高了耦合度。Vue 的状态管理工具 Vuex 完美的解决了这个问题。看了下vuex的官网,觉得不是很好理解,有...转载 2019-05-30 11:38:52 · 5936 阅读 · 0 评论 -
vue框架下的手机验证码组件
/src/store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)在main.js中引入// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in...原创 2019-05-30 15:15:03 · 1901 阅读 · 0 评论 -
微信JSSDK说明文档
微信JSSDK说明文档 转 微信JSSDK说明文档 2015年12月02日 09:41:34 panpanhm91 阅读数:10073 ...转载 2019-05-24 11:15:00 · 6426 阅读 · 0 评论 -
vue流程step组件
效果图<template> <div id="steps"> <div class="steps-item" v-for="(k,i) in stepArr" :key="k.id"> <div class="label">{{k.label}}</div> <div class="cont...原创 2019-05-31 16:11:44 · 8758 阅读 · 0 评论 -
FCC--Roman Numeral Converter(将给定的数字转换成罗马数字)
关于罗马数字1.罗马数字选用7个罗马字母(大写)作数字,代表的十进制数字如下:一些数字用罗马数字表示为:2.罗马数字的计数规则:(1) 相同数字连写,则值相加,如III = 3;(2) 小的数在大的数右边,也是累加,如VI = 6;(3) 小的数在大的数左边,结果为大数减小数,如IV = 4;(4) 在数的上方划一条横线,表示扩大1000倍。一个简单粗暴的例子:但是,我们会...转载 2019-06-06 10:56:24 · 540 阅读 · 0 评论 -
Where art thou
题目要求写一个 function,它遍历一个对象数组(第一个参数)并返回一个包含相匹配的属性-值对(第二个参数)的所有对象的数组。如果返回的数组中包含 source 对象的属性-值对,那么此对象的每一个属性-值对都必须存在于 collection 的对象中。例如,如果第一个参数是 [{ first: “Romeo”, last: “Montague” }, { first: “Mercutio...转载 2019-06-06 16:34:01 · 128 阅读 · 0 评论 -
vue全局变量和Vue.prototype
一、使用Vue.prototype实现全局变量对于一个vue脚手架项目来说,在main.js里使用Vue.prototype声明的变量,实际上是为Vue对象添加了一个原型属性,而不是一个全局变量。但是如果这个原型属性的值是引用类型的,我们就可以借此实现全局变量当你在main.js里声明了Vue.prototype.a = 1后,因为你的每一个vue组件都是一个Vue对象的实例,所以即使你没有在...转载 2019-05-29 16:14:39 · 6067 阅读 · 0 评论 -
vue返回记住滚动条位置
assets/js/common.jsexport const Storage = { set: function (key, data) { return window.localStorage.setItem(key, JSON.stringify(data)) }, get: function (key) { return JSON.pars...原创 2019-05-29 17:59:21 · 936 阅读 · 0 评论 -
前端面试总结一
1.页面的重构和回流重构:改变每个元素的外观时所触发的浏览器的行为,如颜色、背景等样式发生改变而进行的重新构造新外观的行为。重构不会引发页面的重新布局,不一定伴随着回流。重构时需要注意:页面的健壮性:在页面排版时需要考虑数据极多或者极少的情况。页面的扩展性:要考虑未来添加子模块或兄弟模块的状态,为将来留好css、html扩展的出入口。在将来添加模块的时候,尽可能少的去动原来的html结构...原创 2019-08-25 16:56:25 · 939 阅读 · 0 评论 -
px、物理像素、rem、rpx的关系
px和物理像素显示的原理就是把要显示的数据写入显存区域,然后显示设备读取这些数据,驱动硬件就可以显示了。显示的数据是以像素为单位的,一个像素只能显示一种颜色,但是根据显示颜色的总数不同,每个像素占的位数也不同。如果我想显示黑白,那一位就可以存储了,但如果我想显示16种颜色,就得4位来存储一个颜色,这样的一个存储单位就叫做物理像素。我们写样式时一个像素记作1px,但是css的px和物理像素是一一...转载 2019-05-21 11:42:39 · 1303 阅读 · 0 评论 -
微信小程序之自定义轮播图实例
业务需求:5个图片轮番播放,可以左右滑动,点击指示点可以切换图片重点说明:由于微信小程序,整个项目编译后的大小不能超过1Mindex.wxml:这里使用小程序提供的组件autoplay:自动播放interval:自动切换时间duration:滑动动画的时长current:当前所在的页面bindchange:current 改变时会触发 change 事件由于组件提供的指示点...转载 2019-05-21 09:43:28 · 1840 阅读 · 0 评论 -
freeCodeCamp 凯撒密码 Caesars Cipher
freeCodeCamp 凯撒密码 Caesars Cipher下面我们来介绍风靡全球的凯撒密码Caesar cipher,又叫移位密码。移位密码也就是密码中的字母会按照指定的数量来做移位。一个常见的案例就是ROT13密码,字母会移位13个位置。由’A’ ↔ ‘N’, ‘B’ ↔ ‘O’,以此类推。写一个ROT13函数,实现输入加密字符串,输出解密字符串。所有的字母都是大写,不要转化...原创 2019-04-04 10:58:14 · 210 阅读 · 0 评论 -
freeCodeCamp Profile Lookup 遇到的问题
freeCodeCamp Profile Lookup 遇到的问题文章目录题目:我们有一个对象数组,里面存储着通讯录。函数 lookUp 有两个预定义参数:firstName值和prop属性 。函数将会检查通讯录中是否存在一个与传入的 firstName 相同的联系人。如果存在,那么还需要检查对应的联系人中是否存在 prop属性。如果它们都存在,函数返回prop属性对应的值。如果f...原创 2019-03-30 17:23:35 · 214 阅读 · 0 评论 -
实现用Node.js创建一个访问html文件的服务器
实现用Node.js创建一个访问html文件的服务器参考廖雪峰教程出现404错误HTTP404问题解决参考廖雪峰教程出现404错误贴出来廖雪峰网址https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345015296018cac40c198b543fead5c54986...原创 2019-04-06 19:56:44 · 1052 阅读 · 0 评论 -
箭头函数的使用
箭头函数的使用基本用法为什么要有箭头函数和普通函数的区别不绑定this不绑定arguments什么时候不能用箭头函数基本用法ES6 允许使用“箭头”(=>)定义函数。var f = v => v;上面的箭头函数等同于:var f = function(v) { return v;};如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。var f ...原创 2019-04-11 10:10:42 · 1643 阅读 · 0 评论 -
var let const区别
var let const区别https://baijiahao.baidu.com/s?id=1621787284851612777&wfr=spider&for=pchttps://www.cnblogs.com/zhaoxiaoying/p/9031890.html原创 2019-04-11 10:27:54 · 127 阅读 · 0 评论 -
简单的弹幕插件
基于jQuery实现的简单弹幕功能文章目录HTMLcssjsHTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...原创 2019-03-28 15:55:24 · 621 阅读 · 0 评论 -
常见输入框的验证及点击清空输入框
效果图input框内输入内容后显示删除图标,并实现点击图标清空input内容代码<template> <view class="info-main"> <view class="info-item"> <view class="item-title">车牌种类</view> ...原创 2019-04-25 20:05:04 · 4217 阅读 · 0 评论 -
NPM install -save 和 -save-dev
原文地址:https://www.cnblogs.com/limitcode/p/7906447.html NPM install -save 和 -save-dev 傻傻分不清 本文原文地址:https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html回顾 npm install 命令最...转载 2019-05-05 15:10:53 · 197 阅读 · 0 评论 -
freeCodeCamp生成Random Quote Machine
Random Quote Machine效果图实现左侧两个分享button效果未做,后期填坑。采用vue脚手架搭建,使用了mint-ui的button组件,使用mock生成模拟quotes。项目结构axios中api.js为封装的函数,mock中的mock.js生成模拟数据,pages中的index.vue为首页在main.js中引入mint-ui和mockjs实现效果图...原创 2019-05-06 11:59:31 · 288 阅读 · 0 评论 -
随机生成笑话大全
介绍本来想实现freeCodeCamp的Build a Wikipedia Viewer效果,翻墙的挂了,穷孩子没资格搞开发,做了一个类似的笑话大全,调用阿凡达数据接口效果图点击random按钮随机获取一条笑话信息,输入框输入关键字,点击搜索按钮获取相应笑话内容点击random点击搜索样式有点丑,莫嫌弃数据接口官网地址: https://www.avatardata.cn/D...原创 2019-05-09 11:21:29 · 4923 阅读 · 0 评论 -
简单天气预报
实现效果图项目使用vue脚手架搭建,利用axios获取数据,调用天气api接口。最后城市搜索功能未做,免费的接口好难找哇,哭唧唧api官网: https://www.tianqiapi.com/接口文档接口文档地址: https://www.tianqiapi.com/?action=v1返回结果请参照: https://www.tianqiapi.com/api/?version=...原创 2019-05-07 15:08:05 · 312 阅读 · 0 评论 -
JSONP跨域和CORS跨域
什么是跨域?跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制!同源策略同源策略:域名、协议、端口均相同。浏览器执行JavaScript脚本时,会检查这个脚本属于那个页面,如果不是同源页面,就不会被执行。JSONP跨域只支持GET请求,不支持POST等其它请求,也不支持复杂请求,只支持简单请求。CORS跨域支持所有的请求,包含GET、POST...转载 2019-05-07 16:59:33 · 175 阅读 · 0 评论 -
vue中使用iconfont
以阿里的IconFont图标库来一步步引入1、添加所需的图标入库2、图标库里的图标库添加到新项目,起名test(按自己需求改),然后点击确定3、在我们添加的项目test里,点击编辑项目3、在编辑项目里设置自己字体名称,然后点击保存如果不设置唯一,很容易跟其他字体库名称冲突,所以这里建议设置自己熟知的名称(便于区别),我们这里加个了后缀-ali4、在我们的test项目里点击下载到...原创 2019-05-10 11:11:18 · 1176 阅读 · 1 评论 -
斗鱼TV API
首先是不需要登录的API获取当前全部直播请求地址:http://capi.douyucdn.cn/api/v1/live?limit=20&offset=0 参数:limit: 一次获取的个数offset:起始位置,比如要获取前20个之后的 offset=20, 下同返回数据{ "error": 0, "data": [ { ...转载 2019-05-10 15:15:58 · 5935 阅读 · 2 评论 -
微信音频接口调用demo
学习微信音频接口调用,参考一下<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="wid...转载 2019-05-24 14:44:33 · 1132 阅读 · 0 评论 -
微信小程序----贪吃蛇
效果图:代码:<!--pages/snake/snake.wxml--><view id="snake" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"> <view class="score"> <view class="sco...原创 2019-09-15 16:24:38 · 3070 阅读 · 1 评论