前端
关注
分享
扫一扫
文章平均质量分 52
樊一翻
这个作者很懒，什么都没留下…
展开
-
react 项目引入 video
仅供参考：src部分直接使用 从模板位置到视频位置的路径，即可。<video muted src='../src/assets/images/341326914.mp4' height="458" autoPlay loop style={{ padding: '20px' }} ></video>如果直接像上面用不行的话，请先仔细检查路径是否正确。再三检查过后，webpack中再检查装载机配置。loaders: [{ test: /\.html$/,原创 2021-06-30 16:59:57 · 1113 阅读 · 0 评论 -
移动端项目开启debug调试
方案一：eruda文档用法：1、直接引入<script src="https://cdn.jsdelivr.net/npm/eruda"></script><script>eruda.init();</script>2、也可以用npmnpm install eruda --save方案二：vconsole文档(1) 如果未使用 AMD/CMD 规范，可直接在 HTML 中引入 vConsole 模块。为了便于后续扩展，建议在 中引入：转载 2021-06-29 10:13:48 · 418 阅读 · 0 评论 -
全国省市县json数据
全国省市县json数据[{ "code": "11", "name": "北京市", "children": [{ "code": "1101", "name": "市辖区", "children": [{ "code": "110101", "name": "东城区" }, { "code": "110102", "name": "西城区" }, { "code": "110105",原创 2021-03-30 15:33:14 · 4232 阅读 · 0 评论 -
http状态码
HTTP状态码分类分类描述1**信息，服务器收到请求，需要请求者继续执行操作2**成功，操作被成功接收并处理3**重定向，需要进一步的操作以完成请求4**客户端错误，请求包含语法错误或无法完成请求5**服务器错误，服务器在处理请求的过程中发生了错误状态码列表状态码状态码英文名称中文描述100Continue继续。客户端应继续其请求101Switching Protocols切换协议。服务器根据客户端的请求切换转载 2021-03-18 10:35:53 · 116 阅读 · 0 评论 -
html、html5标签
30个H5新标签+90个html原有标签，共有120个标签。其中10个w3c官方不建议使用。30个H5新标签+90个html原有标签，共有120个标签。其中10个w3c官方不建议使用。转载 2021-03-18 10:12:11 · 181 阅读 · 0 评论 -
简单的前端笔试题1.0
1.下面哪一个不是 HTML5 中的标签A.articleB. sectionC. footD. main 点击查看详细内容 - 测试 测试测试 for i in a: print(i) 2.下列描述错误的是A.HTTP 状态码 302 表示暂时性转移B. domContentLoaded 事件早于 onload 事件C. IE6/7/8 不支持事件捕获D. LocalStorage 存储的数据，在刷新页面后会消失3.要去掉文本超链接的下划线，原创 2021-03-18 09:28:34 · 385 阅读 · 0 评论 -
网页配色方案
一、借鉴阮一峰网络日志（1）网页的主题色深颜色使用c、f、6、9这四个字符，组合生成 RGB 色值，比如紫罗兰色是9966ff，靛蓝是6666ff，红色是ff6666。淡颜色使用a、b、c、d、e、f这六个字符，组合生成 RGB 色值。（2）文字的颜色文字最好不要使用全黑，而是使用深蓝色，可以从下面几种颜色挑。1a2a3a最深，2a3a4a次之，7a8a9a最浅。（3）背景色、阴影色、边框色背景色、阴影色、边框色都属于衬托，建议使用灰色，可以从aaaaa、bbbbbb、cccccc、d原创 2021-03-03 10:20:06 · 3394 阅读 · 0 评论 -
vue-cli3、swiper、swiper.animate配合使用
vue-cli3、swiper、swiper.animate配合使用1.swiper安装使用1.1下载swiper1.2引入、使用swiper1.2.1全局引入1.2.2组件中引入2.使用swiper.animate实现轮播切换后执行动画3.vue-awesome-swiper安装使用4.vue-awesome-swiper中使用animate1.swiper安装使用1.1下载swipercnpm install swiper --save-dev1.2引入、使用swiper引入可以在main.j原创 2021-03-02 10:28:49 · 1223 阅读 · 2 评论 -
vue项目图片资源展示问题
vue项目图片资源展示问题1、图片资源在src目录下2、图片资源在src同级目录下1、图片资源在src目录下当图片资源在src目录下面时，页面图片的路劲要使用变量的话需要使用require，如<img :src="require('../../static/test.png')"><img :src="require('@/static/test.png')">注意require中不能用变量，因为require是webpack的方法，项目在打包走require时项目还没有原创 2020-12-07 18:20:30 · 434 阅读 · 0 评论 -
面试题，用jq封装分页插件
题目要求：题解：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width',' initial-scale=1.0"> <title>面试题</title> <script src="http://libs.bai原创 2020-11-10 10:40:08 · 205 阅读 · 0 评论 -
sessionStorage实现网站一段时间无操作自动退出登录
sessionStorage实现网站一段时间无操作自动退出登录在全站引入本js，在sessionStorage中设定一个当前时间，监控网站每有操作就更新这个时间，并设定一个几分钟（本例为1分钟）的延时器判断是否登录状态，如为登录状态则退出 ，代码如下：(function (checkLogin,loginOut) {//checkLogin判断是否登陆状态的方法，loginOut退出登陆的方法...原创 2020-03-23 16:51:58 · 912 阅读 · 0 评论 -
js判断客户端类型
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){alert（‘非ie9以下浏览器’）;};原创 2018-11-23 16:50:44 · 561 阅读 · 0 评论 -
移动端布局问题
两种按宽度等比缩放方案1.rem布局详细见连接写页面时，使用rem做单位，1rem=100px代码：<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">;(function(win, doc) { //rem计算 function change() ...原创 2019-02-19 10:12:05 · 210 阅读 · 0 评论 -
一篇文章帮助你理解get、post
一篇文章帮助你理解get、post先说最实用的应用场景：简单地说：一般用get获取数据，用post提交、修改数据。稍具体一点就是：若符合下列任一情况，则用POST方法：请求的结果有持续性的副作用，例如，数据库内添加新的数据行。若使用GET方法，则表单上收集的数据可能让URL过长。要传送的数据不是采用7位的ASCII编码。若符合下列任一情况，则用GET方法：请求是为了查找资源...转载 2019-02-21 11:52:06 · 283 阅读 · 0 评论 -
移动端优化-w3c
1.click300ms延迟2.快速回弹滚动快速回弹滚动在手机浏览器上的发展历史：早期的时候，移动端的浏览器都不支持非 body 元素的滚动条，所以一般都借助 iScroll;Android 3.0 / iOS 解决了非 body 元素的滚动问题，但滚动条不可见，同时 iOS 上只能通过2个手指进行滚动；Android 4.0 解决了滚动条不可见及增加了快速回弹滚动效果，不过随后这个特性...转载 2019-03-26 16:15:58 · 440 阅读 · 0 评论 -
记录一次cnpm报错
cnpm下载 electron-forge时报错执行 cnpm i electron-forge -g时报错如下：改用npm下载，继续报错：查网后，get this：npm cache clean -f//清npm缓存npm install -g n//n模块是专门用来管理nodejs的版本n stable//升级到nodejs最新稳定的版本尝试后，发现运行cnpm成功！...原创 2019-03-28 11:09:57 · 291 阅读 · 0 评论 -
Echarts起始篇
Echarts起始篇1、引入插件echarts.min.js2、实例化echarts.init(dom[, theme, opts])参数：dom （必需参数）实例容器，一般是一个具有高宽的div元素。注：如果div是隐藏的，ECharts可能会获取不到div的高宽导致初始化失败，这时候可以明确指定div的style.width和style.height，或者在div显示后手动...原创 2019-04-12 10:21:10 · 449 阅读 · 0 评论 -
css文字内容两端对齐
.txt{ text-align:justify;}/*单行文字两端对齐*/.txt:after{ content:' '; display:inline-block; width:100%; height:0;}转载 2019-04-26 10:13:49 · 442 阅读 · 0 评论 -
bug-echarts在ie10中图表未显示
问题：echarts在ie10以下图表未显示，但是移上去后tooltip可以显示、js会报错。我检查了半天都没发现问题所在，后来发现有以下两个办法可能能够解决。1、给dom设置固定宽高，原因可能是初始化时echarts取不到dom的宽高导致初始化失败。2、在option中把设定位置的百分比值替换成固定值。...原创 2019-04-24 09:48:34 · 674 阅读 · 0 评论 -
echarts多表关联
查看文档发现给出的方法是group或者直接connect，但是这种方法似乎不能满足现实项目中不同情况的需求。但是我发现可以用on绑定mouseover和mouseout事件，在事件里通过给关联的表设置dispatchAction -> type: 'highlight'和type: 'downplay',来实现多表关联。但是请注意要使关联表里特定的数据高亮，似乎只可以在dispatchA...原创 2019-04-24 09:59:45 · 593 阅读 · 0 评论 -
js全屏解决方案
<script type="text/javascript"> document.onkeydown=function(e){ e = e|| window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==122){ ...原创 2019-05-22 15:43:36 · 432 阅读 · 0 评论 -
轮播图插件总览
1.swiper ,轮播图界的扛把子2.superslider，支持tab切换等多种实用效果3.touchslider，支持拖动的jq轮播插件（扩展性不强）原创 2019-06-17 10:46:55 · 348 阅读 · 0 评论 -
理解http
理解httpHTTP协议（HyperText Transfer Protocol，超文本传输协议）是因特网上应用最为广泛的一种网络传输协议，所有的WWW文件都必须遵守这个标准。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。设计目的是保证客户机与服务器之间的通信。工作方式是客户机与服务器之间的请求-应答协议。web 浏览器可能是客户端，而计算...转载 2019-02-21 14:19:22 · 307 阅读 · 0 评论 -
多行文本垂直居中
多行文本垂直居中方式一：display:table;此方法不兼容ie6，7。父盒子设置：display:table;子盒子设置：display:table-cell;vertical-align:middle;方式二：此方法可兼容ie6，7，但父盒子高度固定。父盒子设置固定宽高、line-height:父盒子高；子盒子设置display:inline-block;vertical-...原创 2019-01-09 11:11:08 · 973 阅读 · 0 评论 -
前端插件集合
前端插件库1.jquery插件检索，地址:http://www.jq22.com/原创 2018-11-26 15:53:34 · 427 阅读 · 0 评论 -
实用css集合
实用css集合样式清空 @charset "utf-8"; /* CSS Document */ body, div { font-family:"Microsoft YaHei", "微软雅黑"; color: #666; margin: 0 auto; padding: 0; text-align: center;..原创 2018-11-26 12:00:53 · 182 阅读 · 0 评论 -
js优化
js优化1.减少全局对象的访问，减少dom访问2.减少循环次数，尽量一次循环多次操作3.条件分支，按可能性从高到低的顺序写，三目运算符>switch>if4.定时器使用setInterval(只初始化一个定时器)而非setTimeout5.尽量用布尔值做标记6.ajax优化、、、减少请求数，可以通过合并JavaScript和CSS文件，或者使用MXHR。、、、缩小页面的...转载 2018-11-26 10:15:03 · 306 阅读 · 0 评论 -
一篇文章告诉你什么是节流和防抖
简析节流和防抖节流（throttle）和防抖（debounce）是JS中的两个概念，听上去挺高大上的，很多同学也望而却步了，加上这俩概念还很类似，所以也就更加懵了。接下来我们以实际的例子作为突破口，讲解一下这俩究竟有何用途以及区别。节流一个文章页面，左侧是文章各级标题的导航，当滚动的时候需要高亮显示对应的标题菜单，这个时候我们就需要监听页面的滚动事件，我们会顺手写下这样的代码window....原创 2018-11-23 16:04:06 · 222 阅读 · 0 评论 -
动画效果
1.页面滚动到元素位置，元素执行进场动画，可用wow.js，兼容ie10+教程：http://www.dowebok.com/131.html2.自定义动画效果，jq的animate方法，或者Velocity.js插件教程：http://www.mrfront.com/docs/velocity.js/index.html...原创 2018-11-22 16:32:27 · 106 阅读 · 0 评论 -
移动端loading效果实现
css:.my-toast { position: fixed; z-index: 5000; width: 7.6em; min-height: 7.6em; top: 180px; left: 50%; margin-left: -3.8em; background: hsla(0, 0%, 7%, .7); text-align: center; border-radi...原创 2018-11-16 10:24:15 · 1793 阅读 · 0 评论 -
vue组件传值
一、父组件向子组件传递数据在 Vue 中，可以使用props向子组件传递数据。二、子组件向父组件传递数据子组件主要通过事件传递数据给父组件三、子组件向子组件传递数据Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。四、通过路由带参数传值① A组件通过query把id传给B组件this.$rout...转载 2018-11-13 18:20:33 · 156 阅读 · 0 评论 -
vue导航栏的控制
代码： <router-link to="/shouye"><li :class="{leftLi:true,active:$route.path=='/shouye'}">首页</li></router-link> <router-link to="/shouye/bangdan"><li原创 2018-11-13 15:50:40 · 776 阅读 · 0 评论 -
vue二级路由的设计
直接上代码1.router/index.jsimport Vue from 'vue'import Router from 'vue-router'import index from '@/components/index'import header from '@/components/header'import shouye from '@/components/shouye'i...原创 2018-11-13 15:43:43 · 1962 阅读 · 0 评论 -
canvas(多色小球) 网页交互背景效果小demo
canvas oop小demo先直接上代码，日后解释&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;&am原创 2018-12-03 10:00:02 · 367 阅读 · 0 评论 -
canvas离子粒效果
小demo，不解释，有时间再优化&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;原创 2018-12-03 11:31:17 · 368 阅读 · 0 评论 -
js变量类型判断
js变量类型判断1、function类型function isFunction(obj) { if (Object.prototype.toString.call(obj) === '[object Function]') { return true; } return false; }...原创 2019-01-17 10:20:41 · 156 阅读 · 0 评论 -
禁止网页复制
禁止网页复制推荐方法：//禁止网页另存为$('body').append('&lt;noscript&gt;&lt;iframe src="*.html"&gt;&lt;/iframe&gt;&lt;/noscript&gt;');//禁止选择内容function fun(){ return false;}document.on原创 2019-01-02 10:14:55 · 671 阅读 · 0 评论 -
简单多级菜单导航实现jq小插件
简单多级菜单导航实现js简单多级菜单导航插件，觉得不实用的话可以联系我修改哦js代码如下：; (function ($, window, document, undefined) { $.fn.setMenu = function (options) { var defaults = { event: &quot;click&quot;, //触发响应事件 ...原创 2019-01-04 10:13:45 · 825 阅读 · 0 评论 -
es6新特性
1.变量的解构赋值//以前，为变量赋值，只能直接指定值。let a = 1;let b = 2;let c = 3;//ES6 允许写成下面这样。let [a, b, c] = [1, 2, 3];用途： //（1）交换变量的值 let x = 1; let y = 2;[x, y] = [y, x]; //（2）从函数返回多个值 // 返回一个数组functi原创 2018-12-29 11:44:36 · 139 阅读 · 0 评论 -
巧用正则获取url地址的search字符串
巧用正则获取url地址的search字符串function getQueryString(name) { var reg = new RegExp("(^|&amp;)" + name + "=([^&amp;]*)(&amp;|$)", "i"); var r = window.location.search.substr(1).ma原创 2018-12-29 11:42:09 · 892 阅读 · 0 评论