web
文章平均质量分 59
Revival_Liang
千里之行始于足下
展开
-
vue路由切换动画
第一步,使用账号注册阿里云图标账号。第二步,创建项目,如图:(1)(2)创建项目第三步:把图标加入购物车,然后添加到项目(1)把图标添加购物车(2添加至项目)最后一步:下载下来解压之后里面有demo,如果对你有帮助,在下面点个赞吧,哈哈原创 2017-02-22 09:43:46 · 3495 阅读 · 0 评论 -
vue实现购物车动画功能
1,这里用到了jq及基于jq的插件,插件非常的小,好像只有数kb,不用担心太多代码,不多说直接上代码,使用前需要初始化,在mounted或者created方法里调用 this.init() init:function(){ (function ($) { $.fly = function (element, options) { // 默认值原创 2017-07-17 22:04:12 · 3571 阅读 · 0 评论 -
vue实现自动切换tab
{{item.title}} {{item.title}} export default { name: 'parent', data () { return { data:[ {title:'第1项'},{title:'第2项'},{title:'第3项'},{title:'第4项'},{title:'第5项'},{tit原创 2017-06-29 22:03:58 · 4763 阅读 · 0 评论 -
js面试常考算法
//冒泡算法,这里用两个循环实现 function bubbleSort(arr){ var val; for(var a = 0;a<arr.length;a++){ //b=1说明:因为自身是不用比较的,那就从1开始;arr.length-a说明:是因为循环一轮之后,// 就有一个数被排序好到最后,-a呢,最后这个就不用比较了,由此类推 fo原创 2017-08-04 20:14:56 · 491 阅读 · 0 评论 -
element 修改主题方法
1,cnpm i element-theme -g 安装主题工具,从淘宝镜像下载快很多哦2,npm i element-theme-default -D 拉取代码3,初始化变量文件(用来修改主题颜色的,并不是主题文件,仅仅用户修改)命令是 et -i 就会在当前目录生成element-variables.css文件4,修改变量文件如:--color-pri原创 2017-06-01 18:08:09 · 6616 阅读 · 1 评论 -
vue使用mint-ui实现上拉刷新
加上stop方法是解决当鼠标多次触发时的不好体验,比如经过鼠标多次触摸之后,当鼠标停下来,事件还在运行,此时加上stop()即可。$(document).ready(function(){ $(".popup_div").mouseenter(function(){ $(".popup_div").stop().animate({bottom:'0px'},1000,"swi原创 2017-02-19 22:34:49 · 1200 阅读 · 0 评论 -
element 组件使用小教程集合(element1.3.6)
轮播图: .bannerbox{width: 500px;} .el-carousel__item h3 { color: #>; font-size: 18px; opacity: 0.75; line-height: 300px; margin: 0; } .el-carou原创 2017-06-10 21:57:26 · 4151 阅读 · 0 评论 -
vue-cli项目导入jquery插件(其他插件类似)
(前期准备工作,npm install jquery,你懂的)1、我们需要修改的是build/webpack.base.conf.js,修改两处的代码(1)在头部引入var webpack = require('webpack')(2)在这个文件的最后写入配置即可plugins: [ new webpack.ProvidePlugin({原创 2017-06-29 15:33:47 · 872 阅读 · 0 评论 -
vue-cli构建项目教程
String str = "abcdef"; String str1 = str.replaceAll("abc","aaaaa"); str1值为:aaaaadef原创 2016-09-08 17:29:44 · 384 阅读 · 0 评论 -
web前端开发常用网址集合
http://mint-ui.github.io/docs/#/zh-cn2/popup 移动端页面资源http://element.eleme.io/#/zh-CN/component/radio pc端页面资源原创 2017-05-25 09:45:40 · 551 阅读 · 0 评论 -
common
基于响应式的初始化html文件(设计稿为320,1rem等于20px) element html,body,div,ul,li,ol,p,a,button,span{margin: 0px;padding: 0px;position: relative;} em{font-style: normal;} ul{list-styl原创 2017-07-03 10:59:37 · 2690 阅读 · 0 评论 -
vue-cli之那些日子踩过的坑 哈哈(或许有你想要的答案)
1,打包的时候图中的位置需要加一个点,否则打包之后会报找不到资源文件的错误,比如说找不到css文件,图中为config文件夹下的index.js文件内容2,关于绑src的问题(1)如图这样写,在本地是没有问题的,但是打包之后就会报找不到资源的错误(2)正确的做法是加上require(),如图,这样打包就没问题了原创 2017-06-20 14:07:29 · 817 阅读 · 0 评论 -
自定义vue组件小集合
倒计时组件 {{str}} export default{ data(){ return { str:'', timeStamp:10 } }, created:function(){ this.downCount() }, methods:{ downCount:function(){ if(this.t原创 2017-06-11 13:52:11 · 1227 阅读 · 0 评论 -
wordPress使用记录
1、下载phpStudy并安装。2、下载wordpress,点击打开链接3,下载好之后,解压wordpress,解压好之后,把文件夹放到本地服务器WWW目录下,然后打开里里面的readme.html文件,之后按照提示步骤完成即可。原创 2017-08-14 22:54:05 · 865 阅读 · 0 评论 -
opencart
https://www.opencart.cn/download/原创 2017-08-17 06:37:03 · 514 阅读 · 0 评论 -
promise的一些使用记录
http://fontawesome.dashgame.com/#basic原创 2017-02-10 21:34:09 · 303 阅读 · 0 评论 -
html和css初始化代码
标题 html,body,div,ul,li,ol,p,a{margin: 0px;padding: 0px;position: relative;overflow: hidden;} em{font-style: normal;} ul{list-style: none;} button,input,img{border: none;outline: n原创 2017-05-14 14:26:59 · 1775 阅读 · 0 评论 -
微信分享
wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: json.data.appId, // 必填,公众号的唯一标识 timestamp: json.d原创 2017-11-20 15:35:07 · 534 阅读 · 0 评论 -
七牛云以及video.js的用法教程
1、七牛云用法:(1)注册账号之后还需要通过验证之后才能使用。(2)初次使用需要创建空间,如图:(3)上传小于500M的文件,如图:(4)上传大于500M的文件,点击上传文件按钮,会出现如图:点击打开,然后选择如图:原创 2017-09-23 10:04:29 · 3124 阅读 · 0 评论 -
css3加载中动画
28个纯css3 加载loading动画特效原创 2017-11-16 07:38:23 · 524 阅读 · 0 评论 -
微信公众号开发入门教程
1、申请注册一个公众号,个人的就可以了,然后进入测试号,如下图:(测试账号,除了支付其他的都可以用)2、获取用户信息:(1)前端代码:前端需要先获取code然后传给后端获取用户信息,之后就可以尽情的玩耍了,获取code方式如下(其中appid,点击上图测试号,里面就可以获取到appid,redirect_uri,就是你的跳转url,code参数就会传到这个链接里面)第一步:原创 2017-09-26 15:16:27 · 600 阅读 · 0 评论 -
前端websocket使用教程(聊天功能)
Java后端WebSocket的Tomcat实现 Welcome 发送消息 关闭WebSocket连接 var websocket = null; //判断当前浏览器是否支持WebSocket if ('WebSocket' in window) { webs原创 2017-12-06 16:28:02 · 5763 阅读 · 0 评论 -
web前端开发小助手
1、css:以下是横向滚动和隐藏横向滚动条,移动端浏览器基本都是webkit内核,所以兼容性不用考虑<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javas原创 2017-06-27 08:49:50 · 991 阅读 · 0 评论 -
前端input获取文件然后显示
Document var result=document.getElementById("result"); var file=document.getElementById("file"); //判断浏览器是否支持FileReader接口 if(typeof FileReader == 'undefined'){原创 2018-01-08 10:38:46 · 2738 阅读 · 0 评论 -
vue使用百度地图记录
{{streetNumber?streetNumber:''}} {{address?address:''}} @import '../../styles/commonscss.scss'; .home_map .map{width: 100vw;height:100vh; position: fixed;} .home_map .info原创 2017-09-06 21:58:50 · 1447 阅读 · 0 评论 -
小程序小结
1、小程序登录网址:https://mp.weixin.qq.com2、创建小程序项目的时候需要appId,在小程序的后台设置处进行获取,还需要在开发设置项设置安全域名原创 2017-11-13 14:58:10 · 441 阅读 · 0 评论 -
sublimeText3使用的一些基础配置
1,按住ctrl+~,输入如下回车:import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packa原创 2017-08-10 07:51:22 · 1065 阅读 · 0 评论 -
vux使用教程
. 在项目里安装vuxnpm install vux --save. 安装vux-loader (这个vux文档似乎没介绍,当初没安装结果报了一堆错误) npm install vux-loader --save-dev. 安装less-loader (这个是用以正确编译less源码,否则会出现 ' Cannot GET / ')npm install less less-l原创 2017-10-17 22:52:06 · 25728 阅读 · 6 评论 -
web前端常用网址
前端开发框架 :http://www.5ibobo.com/code/513.htmlHTML5开发教程 :http://www.hcoder.net/course/info_212.html原创 2017-01-13 15:51:11 · 840 阅读 · 0 评论 -
上传文件到php后台全过程
前端代码: Document click function send(){ var fd = new FormData(document.getElementById("fileinfo"));//userName不在表单中//fd.append("userName", "xiaoxiao");$.ajax({url: "http://local原创 2017-07-23 16:23:15 · 7094 阅读 · 0 评论 -
canvas合成文本与图片
1,原生合成Html5 Canvas 实现图片合成 |img{ border:solid 1px #ddd;} function hecheng(){draw(function(){document.getElementById('imgBox').innerHTML='合成图片成功!可以鼠标另存图片查看我是否是一张图片~~!';}) }va原创 2017-10-27 17:31:07 · 1694 阅读 · 0 评论 -
使用过的vue组件记录
1、pc端裁剪头像,使用的是vue-core-image-upload, github地址:https://github.com/Vanthink-UED/vue-core-image-upload2、开始使用 cnpm i vue-core-image-upload --save3、 代码: class="btn btn-primary" crop="loca原创 2017-09-23 16:31:48 · 1203 阅读 · 0 评论 -
省市区联动(原生js实现)
三级联动 window.onload = function() { var oDiv = document.getElementById("div"); var sheng = document.createElement("select"); var shi = document.cre原创 2017-11-09 08:52:37 · 2508 阅读 · 0 评论 -
vue中使用less方法
第一步:安装less依赖,npm install less less-loader --save第二步:修改webpack.config.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加{test: /\.less$/,loader: "style-loader!css-loader!less-loader",},现在基本上已经安装完原创 2017-11-03 11:03:44 · 1962 阅读 · 0 评论 -
axios解决OPTIONS问题,导致后台无法接收到数据
先贴一下正确的代码this.$http({ url: 'http://shiyun.looky34.cn/client/members/getMembers', method: 'POST', data:this.$qs.stringify({ name: '小明' }) }).then((res)原创 2018-01-09 20:24:54 · 19509 阅读 · 6 评论 -
web特殊符号
http://tool.chinaz.com/Tools/HtmlChar.aspx原创 2016-12-11 17:24:28 · 2097 阅读 · 0 评论 -
web实现左右切换功能
div,ul,li{ margin: 0px; padding: 0px; } .box{ border: 5px solid orange; overflow: hidden; width: 500px; height: 400px; display: inline-block; background: green;原创 2017-02-24 14:21:57 · 1202 阅读 · 0 评论 -
web前端px和rem自动转换插件
下载地址:百度云下载(当然你也可以到github下载github下载)(1)导入插件方法:进入packages目录:Sublime Text -> Preferences -> Browse Packages...* 复制下载的cssrem目录到刚才的packges目录里(2)配置方法:{ "px_to_rem": 60, //px转rem的单位比例,默认为4原创 2017-03-17 19:42:08 · 8565 阅读 · 1 评论 -
web实现跑马灯
由于代码比较少,我就写在一个文件里了 //ready(),这个方法在html元素加载完毕才会执行 $(document).ready(function(){ //穿入一个box即可 startInterval($(".box")); function startInterval(box){ var ul = box.find("原创 2017-02-26 17:28:14 · 5153 阅读 · 0 评论 -
实现监听下拉具体达到显示和隐藏效果的js的核心代码
var value = false;window.onscroll=function(){ var top = document.documentElement.scrollTop||document.body.scrollTop; if(top > 200){ if(value == false){ $(".search").animate({opacity:'1'},20原创 2017-02-23 14:05:27 · 1228 阅读 · 0 评论