web前端
文章平均质量分 59
攻城狮YanGo
一个在前端路上行走的猿
展开
-
前端静态web服务器live-server使用
live-server npm地址:https://www.npmjs.com/package/live-serverlive-server是一款npm工具,可以实现在本地开发中搭建一个临时静态服务器。虽然现在很多编辑器都有一键启动服务器功能,但是多学一个总归是好的。1. 安装live-server在安装live-server前需要先安装好node和npm,这个自行安装。npm install -g live-server如果npm安装太慢的话就用cpm install -g live-se原创 2021-03-11 10:18:57 · 846 阅读 · 0 评论 -
vue中引入scss报错的问题
以前一直在用less,没用过scss,这次写一个项目打算用scss来写的然后发现了一些坑正常我们都是在项目中直接安装scss的npm install style-loader sass-loader node-sass --save-dev以前安装了less是需要手动去配置的,然后就在在webpack.base.conf.js的rules中添加了{ test:...原创 2020-01-06 23:57:10 · 4498 阅读 · 0 评论 -
JavaScript对数组操作的api基本都在这里了
一、concat()concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,仅会返回被连接数组的一个副本。var arr1 = [1,2,3];var arr2 = [4,5];var arr3 = arr1.concat(arr2);console.log(arr1); //[1, 2, 3]console.log(arr3); //[1, 2, 3, 4, 5]...原创 2020-05-28 11:31:03 · 232 阅读 · 0 评论 -
vuex刷新页面导致数据丢失的解决方案
这是转载大佬的方案,决定非常使实用原文地址:https://blog.csdn.net/guzhao593/article/details/81435342关于vuex刷新为什么会数据丢失的原因就不多说了,有用过vuex的应该都会了解,下面是解决方案思路:在刷新前把state的数据(通过localStorage或者sessionStorage)本地存储起来 刷新之后再再把存储起来...转载 2019-10-18 23:28:56 · 850 阅读 · 2 评论 -
vue-router跳转页面的三种跳转方式
在vue-router中,有三种跳转方式 router.push() router.replace() router.go(n) router.push()跳转指定url路径,并向history栈中添加一个记录,点击后退会返回到上一个页面router.push({ path, params})/**说明 path:跳转路径* params:参数...原创 2019-10-18 12:13:25 · 2819 阅读 · 0 评论 -
h5app开发移动端屏幕禁止滑动
//实现滚动条无法滚动var mo=function(e){e.preventDefault();};/***禁止滑动***/function stop(){ document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false);//禁止页面...转载 2018-11-13 20:44:35 · 6874 阅读 · 3 评论 -
JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法
$(function(){ //遍历获取的input元素对象数组,绑定click事件 var len = $("input[type='file']").length; for(var i = 0; i < len; i++){ $("input[type='file']").eq(i).click(function(){ $...转载 2018-11-13 20:48:21 · 224 阅读 · 0 评论 -
向一个对象数组里面添加新的属性 + 将一个对象数组数据拿出来变成另一个对象
原文地址:https://blog.csdn.net/qq_24147051/article/details/80541112转载 2018-12-04 20:53:09 · 1540 阅读 · 0 评论 -
头部菜单栏(选项卡)demo
又来写demo了,一个点击头部菜单栏的选项卡demo,对于初学者来说还是可以参考的。在目前的web(或者webapp)开发中,很少会用这种来写多页面选项卡的,毕竟如果页面内容复杂的话,会出现加载慢卡顿等问题。但是对于单页面逻辑没那么复杂的话还是可以的。好了,只是参考参考用,下面贴代码 <!DOCTYPE html><html lang="en"><h...原创 2018-11-28 15:51:40 · 1759 阅读 · 0 评论 -
vue.js学习之 跨域请求代理与axios传参
博文地址:https://www.cnblogs.com/momozjm/p/7993236.html感谢分享转载 2019-02-22 17:17:59 · 246 阅读 · 0 评论 -
css 如何让图片居中图片适应
前段时间做移动端开发遇到的问题,以前是没注意到css有个object-fit属性,一直对图片适应不知道何从下手。移动端基本上都是需要做图片适应处理的,比如轮播图,商品封面图等等;用户发布的图片都不是尺寸规格的图。那么有什么办法处理呢?刚好css3有了object-fit属性相关文档可以到这里看https://developer.mozilla.org/zh-CN/docs/Web/CSS...原创 2019-03-26 23:43:36 · 1777 阅读 · 0 评论 -
vue项目webpack打包app.js文件太大导致首次加载非常缓慢的解决方案
对于初学者接触vue项目的时候,一些小项目可能没注意到这一点。对于中大型的项目,打包出来的app.js都有好几M了,导致首次加载的时候非常缓慢,我因为公司需求而急于接收的vue的项目就遇到这个问题,搜索了很多童鞋的方案,大家都比较推荐gzip静态资源压缩,这个需要结合服务器端的配置。首先打开/config/index.js文件但是先别急于动手安装,因为 npm install --sa...原创 2019-06-05 16:46:46 · 14890 阅读 · 0 评论 -
vue实现完整的购物车功能(包括单选全选,删除商品和结算商品功能)
首先来看看效果图预览地址:http://xy.xxiaoyuan.top/demo/shopCart/#/项目开始之前需要选安装好node跟vue和vue-cli如果还没安装的可以看这里(mac环境下的)https://blog.csdn.net/weixin_39644462/article/details/863025791. 首先创建一个vue项目(命令行如下)...原创 2019-06-03 15:42:10 · 25034 阅读 · 7 评论 -
js localStorage本地存储json对象并追加数据
记录一下localStorage的更过相关知识可以去:http://www.w3school.com.cn/html5/html_5_webstorage.asp这里主要是讲 localStorage存储对象的时候追加数据并不会覆盖原有的数据,下面写了个小demo <!DOCTYPE html><html lang="en"><head> &l...原创 2018-11-08 10:09:30 · 7761 阅读 · 1 评论 -
解决JS浮点数(小数)计算加减乘除的BUG
加法函数,用来得到精确的加法结果/** ** 加法函数,用来得到精确的加法结果 ** 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。 ** 调用:accAdd(arg1,arg2) ** 返回值:arg1加上arg2的精确结果 **/function accAdd(arg1, arg2) { var r1,...转载 2018-11-05 16:58:28 · 565 阅读 · 0 评论 -
获取短信验证码倒计时,非常简单
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name='viewport' content='width=device-width,minimum-scale=1.0 maximum-scale=1.0 user-scalable=no' /&原创 2018-05-19 10:50:12 · 14275 阅读 · 3 评论 -
简单的图片上传并预览功能input[file]
为了好看点,样式写的有点多,读取文件之前参考别人的,现在自己写也当给自己记录一下学习进度,欢迎大家一起交流。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width原创 2018-07-07 16:25:49 · 4807 阅读 · 0 评论 -
h5写的指南针(DeviceOrientation ),调用手机罗盘,可以转动
相信这个demo有很多人写过的,简单的不说了。本例的demo非常简短,还配了个漂亮了图片(图是在某图库网下载的,只用于开发技术学习,禁用于商业);没什么好介绍的,可以直接复制代码使用,下面贴个效果图下面贴代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <tit...原创 2018-07-20 10:15:11 · 9779 阅读 · 9 评论 -
简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏
没事写个简单的demo,做一下学习记录,也欢迎大家一起交流讨论。不多说,上代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name='viewport' content='width=device-width,minimum-scale=1.原创 2018-07-15 15:23:49 · 3650 阅读 · 0 评论 -
用vue写了个瀑布流布局,看着还可以
源博文发布于2018-10-11 (由于收到建议,在vue中v-for的优先级高于v-if的优先级,这意味着v-if将分别重复运行于每个v-for循环中所以,不推荐v-if和v-for同时使用)2019-6-1【最新更改的代码】,并未通过v-if来判断拆分左右两部分布局,而是通过css来达到瀑布流效果,下面为最新代码,可以直接复制使用。<!DOCTYPE html>&...原创 2018-10-11 15:38:14 · 9950 阅读 · 14 评论 -
js 实现导航栏滑动透明渐变样式
学习记录,欢迎各位参考,有更好的方案也可以一起讨论!下面直接贴代码,可以直接复制到自己的编辑器运行 <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width原创 2018-10-09 17:59:05 · 5665 阅读 · 0 评论 -
jquery实现点击某元素之外触发事件
jq如何实现这个功能呢?其实也不难,大概思路就是,在document上面绑定一个事件,当用户触发document的事件时,判断一下目标元素是什么,然后再执行相应的操作就行了。CODE:<script> $(function(){ $(document).bind("click",function(e){ //id为menu的...转载 2018-10-22 19:32:29 · 2497 阅读 · 0 评论 -
javascript 向对象添加新的属性
前些天写个项目,封装的一个方法,已经写好的对象中,需要在“半路”上添加新的对象属性。然后网上查了资料看到了eval()方法,看到其他网友写的,然后就用了可以,知道今天发现有个坑。eg: 我要往Obj对象里添加一个num属性var Obj = {};var num = 123;eval("Obj.num="+num);乍一看,没错,可以运行啊,不报错啊。但是如果添加一个属...原创 2018-11-02 14:51:16 · 5199 阅读 · 0 评论 -
js数组排序输出
项目要求,需要在前端做筛选排序,数据都是用ajax向服务器请求返回json数据参考:https://blog.csdn.net/bobobocai/article/details/78028497用到js 的sort()方法 定义和用法sort() 方法用于对数组的元素进行排序。参数 描述 sortby 可选。规定排序顺序。必须是函数。 返回值对...原创 2018-11-02 19:52:27 · 2182 阅读 · 0 评论 -
h5开发app,移动端 click 事件响应缓慢的解决方案
原文:https://blog.csdn.net/u012581020/article/details/52691644?utm_source=blogxgwz4造成点击缓慢的原因从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作。使用js框架fastclick, ...转载 2018-11-07 15:15:55 · 1506 阅读 · 0 评论 -
用html5<label>写一个简单的按钮功能
声明:博主本人第一次在CSDN上传自己的代码,有什么不对的地方,多多指教本文主要是上传用label标签些一个按钮,按钮设计图是网上看到的,比较漂亮,所以自己用ps做了一个png图。废话少说,直接上图上代码 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <ti...原创 2018-02-06 18:10:25 · 7921 阅读 · 0 评论