彩笔_小qing-CSDN博客

转载移动端HTML5导航栏吸顶：IOS（sticky）和Android两种实现方式

混合App，前端H5页面，实现导航栏滑动到的时候贴顶。注意：首先写的时候，监听scroll事件，滑动到指定位置时改为定位 position:fixed;，实际运用过程中，IOS无法实时监听scroll事件，在滚动停止之后才触发的 $(window).on("scroll", function () { var _this = $(this), s...

2018-08-13 11:08:06 6581 1

原创 Vue 调用本地的 json 文件

Vue 用 axios 调用本地的 json 文件，json 必须存放在 “ static ” 文件夹下，static 目录是 vue-cli 向外暴露的静态文件夹，所有静态数据都应该放到static目录中。如下图所示：在调用时，如下，其实地址就是 http://localhost:800x/static/tabs.json：this.$fetch('static/tabs.jso...

2018-05-02 14:31:00 10634 3

原创 vue Axios 跨域和params为null的解决方案（后台为Java）

Axios: 1. 跨域： GET请求不赘述，如下设置后台允许跨域便可使用 POST请求时，被转换为 OPTIONS，并且出现403 forbidden 2. 传参为null一、跨域问题的解决1. 后台设置response.setHeader( "Access-Control-Allow-Headers","Origin, X-Requested-With, Co...

2018-04-28 10:54:32 5775

原创前端开发：艺术字体ttf资源文件

不管你是从事平面设计还是网页美工都少不了这33款书法字体打包哦。直接将要安装的字体复制到C:\WINDOWS\Fonts即可。另外前端网页设计中，如果在页面中直接使用需要字母路径，用首字母的方式改成了字母路径，来张合影：然后来几张个别特写：由于文件大小限制，只上传了 font_en 字母路径版的字体资源文件，学习存档用下载路径：http://www.pc6.com/softview/S

2017-10-19 14:43:18 3771

原创【bootstrap】 bootstrap-modal：点击遮罩层不关闭modal

想要点击modal的遮罩层时，不关闭modal。一，用 js 调用打开modal需要在js调用modal打开事件时，添加参数如下： $("#myModal").modal({backdrop:'static',keyboard:false});二，data-toggle 打开modal需要在触发模态框的组件上添加data-backdrop="static"

2017-10-19 14:18:45 8647

原创【Vue】Vue-Router2 实现路由功能

注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。在前面文章 vue-cli基础上，开始介绍。安装vue-cli时已经将vue-router安装，若还没有安装，可通过npm npm install vue-router一、使用路由在main.js中，需要明确安装路由功能： import Vue from

2017-10-16 14:35:47 727

原创【Vue】 vue2.0父子组件传递函数

学习笔记：在vue2.0中，父组件调用子组件时，想要将父组件中的函数体也做传递1. 通过props ：需要从子组件传参数到父组件时适用// 父组件.vue<template> <div> <ok-input :params='number' :callback='callbackNum'></ok-input> </div></template><script type="te

2017-10-16 11:28:51 12587

原创 Still unable to dial persistent://xxx:80 after 3 attempts

国庆节回来后，电脑总是动不动就有一些网站打不开，显示error：Still unable to dial persistent://xxx:80 after 3 attempts。解决方案如下：① 打开IE浏览器的 Internet 选项 ② 点开 “高级 -> 还原高级设置 -> 重置 -> 应用 -> 确定”再去刷新刚才打不开的页面，还打不开就需要重启一下。

2017-10-12 13:57:41 5074

原创 IntelliJ Idea 连接 SVN - commit or update 代码

下载 SVN 相应版本，安装之后，可以在文件夹进行下载，更新，上传操作第一步：从SVN Checkout 项目，结果如“我的项目”目录第二步： checkout后填写你的SVN项目所在地址第三步项目下载后就是修改和改后提交。当然，修改和改后提交也可以直接在 intelliJ IDEA内操作。在这之前要先在settings将SVN配置上然后可以在 intelliJ IDEA update 和

2017-10-09 15:29:04 3529

原创 intelliJ IDEA 文件修改之后的蓝色

先说我一个前端为啥用上了 intelliJ idea，现阶段项目都是java，所以在没有前端之前，所有大拿都用的eclipse，但是对前端不友好，用起来相当费劲。intelliJ idea 前后通吃，自动完成全厉害，目前为止我还有一个问题，不知道能不能一个窗口同时开几个项目（像eclipse那样）。其他各方面感觉炒鸡好用，个人见解。 intelliJ IDEA链接svn之后，当文件发生修改之后，

2017-09-30 10:05:40 28831 2

原创【bootstrap】 file-input，无法多选。(总是替换前一张图片)

<input id="myFile" type="file" name="myFile" multiple class="fileloading">我找了半天fileinput.js里的参数，发现都不对，原来是 input 少了个 multiple

2017-09-11 11:15:43 5373

转载 Web性能优化规则

https://segmentfault.com/a/1190000010927816

2017-08-31 21:33:05 381 2

转载 https://segmentfault.com/a/1190000010943143 在页面内部应用外部的html片段，是一个很常见的用法，那么有哪些方法可以实现呢？根据情况使用不同的方法。iframe如果是一个完整的外部页面（有完整的html，head,body），可以考虑用iframe。<iframe src="test.html"></iframe>ajax如果仅仅是一个代码片段，也

2017-08-31 21:30:57 3552 1

原创【Bootstrap】 fileinput：文件or图片上传

这个是在CSDN一名前辈的微博上学习到的。网址在此：http://blog.csdn.net/Java_chaozi/article/details/53311483。我就补充几个参数的含义，然后自己加深下理解。<link rel="stylesheet" href="style/css/approve.css"><div class="form-group fileContainer">

2017-08-29 08:57:49 5551

原创【Vue】window下，vue-cli 脚手架安装

按步骤来的，然后我截了个整图，可以跟着一步步来，每一步啥意思，有前辈的微博可以借鉴前辈的微博地址: http://www.cnblogs.com/jn1223/p/6656956.html vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘宝的镜像，所

2017-08-14 11:00:59 6239

原创 JS：判断一个对象是否为空

function isEmpty(obj) { // 判断对象是否为空对象 for (var name in obj) { return false; } // 不为空 return true; // 为空};

2017-07-28 23:03:30 1613

原创识别浏览器的方法

注意顺序： /* 得到浏览器的类型 */ function getExploreName() { var userAgent = navigator.userAgent; if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) { return 'Opera'; } els

2017-07-28 22:52:33 2893

原创 CSS：改变用户选中文字的颜色和背景颜色

这是大多数浏览器默认的文字选中样式：如果你是想让它符合整个网站的风格，就可以选择自定义选中的背景颜色和字体颜色。用户选中文字时的自定义颜色：p::selection { background:#ccc; color:#ff645d;}p::-moz-selection { background:#ccc; color:#ff645d;}p::-webkit

2017-07-26 15:23:33 17332

原创 SVG动态生成的子元素，同时绑定"click"和"dblclick".

1、首先在鼠标点击 svg 时，调用画矩形方法 drawRect(x,y,w,h)var svgDom = document.getElementById('svg'); /* 取到svg元素 */var x,y;$(svgDom).on('click',function (event) { // 绘制开始 // 获取起点坐标值 x = even

2017-07-13 15:09:53 6741

原创根据身份证号计算：出生年月日和性别

在表单注册时，为优化用户体验，在选择身份证件类型为身份证时，我们可以通过程序计算出客户的出生年月和性别时，就不需要用户填写了，节约注册时间，更好的留住客户。function certnoGetInfo(certno) { var reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/; //验证身份证号的正则 if(reg.test(certno)){ // 如

2017-07-13 00:11:31 5496

原创封装方法：只能输入数字

前些日子，在看是用JavaScript片段时，有写到限制输入（只能输入数字），今天要用，就做了简单的封装，方便调用。<input type="text" id="certno" name="certno">var onlyNumber = { onm : function(param) { if (!param) return;

2017-07-13 00:02:23 474

原创注册表单的验证方法封装

学了工厂方法后，想着尝试下怎么用，前几天做了个网页的注册表单页，今天就尝试了下，初出茅驴，觉得现在的通用性并没有达到最好的效果，望路过的大神指导。var VerifyFactory = function (type,str) {}VerifyFactory.prototype = { email: function (str) { // 邮箱 return (functio

2017-07-12 23:55:41 1001

原创获取验证码：倒计时封装

同一套网页中有多个地方用到了获取验证码的功能，上一个项目中也有这种用法，但是当时对封装之类的实在是搞不明白，想了好多办法依然没能很好的复用。最近看了《JavaScript设计模式》，有一点点灵感，封装的也不知道是不是那么回事，反正实现了复用，以此纪念我的倒计时function CountDown(opt) { // opt是传来的参数对象 var target = opt.target

2017-07-10 17:19:34 553 1

原创 Javascript设计模式 -- 灵活的javascript

推荐大家一本不错的书《JavaScript设计模式》。今天开始看，我希望我能坚持看。一：灵活的语言-javascript1.用对象收编变量var CheckObject = { checkName:function(){ //验证姓名 }, checkPassword:function(){ //验证密码 }}CheckObjec

2017-06-29 15:33:54 239

原创页面滚动进度条 ( 兼容IE7及以上 )

这是IE的预览效果，打开的是IE7的文档模式直接粘代码，采用优雅降级的方式实现兼容。 demo 中用到的图片直接去百度下载就成，下大图效果好实现。1、*使用 jquery 的高版本实现 <!DOCTYPE html><html><head><meta charset="UTF-8"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatib

2017-06-26 18:12:21 1265

原创 PC端，浏览器兼容、IE兼容（圆角、阴影、透明）

以下所有兼容性问题都是借鉴的 Danna_Danna 的一篇文章，因为文章时间比较长了，所以根据我自己的测试和查找，将会有一些小改变，自己写一遍，以后用起来好找，有一个整理的过程更安心。测试demo已上传：http://download.csdn.net/detail/qq_31164127/98746691、隐藏滚动条<body scroll='no'></body> /* 只支持ie7/杂项

2017-06-19 14:50:50 1187

原创 CSS伪元素--:after-:before的炫酷用法

将链接存于此，比收藏在文件夹里靠谱，《 The Shapes of CSS 》，简直厉害了！1、计数器效果<ul> <li>white，我要去帮助姐姐测试，你去吗？</li> <li>测啥呀，好玩不?</li> <li>当然好玩了，就是要给我们说的每一句话进行排序。</li> <li>咦？什么意思，带我去吧！</li> <li>好的，那我们开始咯！</li>

2017-06-16 09:03:21 1618

原创 bootstrap-modal：弹出modal时input的checked的状态无法改变 | | input获取焦点不生效

1.每次弹出modal时，用 js 修改的 checked 状态不能实时更新<div class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header">

2017-06-14 17:42:09 2091 2

原创 canvas基础上：chartjs

1、首先在页面中引入 chart.js <script src="Chart.js"></script>2、页面设置<div id="container" style="width: 500px"> <canvas id="myChart" ></canvas></div>我认为这里外层的 #container 必须要有，因为当没有的时候，canvas 的高度和宽度根本就限制不住啊，

2017-06-08 18:01:21 1892

原创 canvas画图：用鼠标---画曲线，直线，矩形，圆

<canvas id="canvas" width="800" height="500"></canvas><script src="js/jquery-3.2.1.min.js"></script>var canvas = document.getElementById('canvas'); // 得到画布var ctx = canvas.getContext('2d'); // 得到画布的上

2017-06-08 17:28:10 16726 5

原创移动端开发，IOS、iPhone，表单input元素获取焦点时页面被放大的解决办法。

真心觉得移动端开发坑好多，不过解决问题也有不少乐趣，也能总结很多经验方法，都是之前遇到的，想记录下来方便翻阅。在iOS测试的时候，每次input获取焦点都会使页面放大，真是要多丑有多丑，经多方求助终于得到这个美丽的方法解决一下，之前总是在head中写超多的meta标签，但有一些都没去追寻他们是啥意思。这个问题就是吃了这个亏。<meta name="apple-mobile-web-app-capab

2017-06-08 16:55:56 8031 7

原创移动端轮播：swiper插件（触碰图片之后停止轮播）

下面是我遇到的问题，也是用此插件常用的几个参数，如果你的轮播不需要很复杂，看本文就可以解决。假如你想多了解些，看官们这里请 swiper 插件的官方地址。第一步引入 swiper.min.js<script src="../style/js/swiper.min.js"></script>第二步 html<div class="swiper-container"> <div clas

2017-06-08 16:51:50 8376 1

原创记住账号密码的input背景是黄色的，并不是很丑，但是假如你不喜欢，可以来看看

这个问题 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}

2017-06-05 10:17:04 1989

原创用JS修改页面的title

之前一直用 Java 的 S 标签为title赋值，直到今天我才知道，可以用 JS 改变 title 的值啊。$(document).attr('title','new title ha'); // 将 title 的值改为 ‘new title ha’这里的 new title ha 可以是你在本页面的特定条件下改的，也可以是从前一个页面传过来的( localStorage.setItem('属

2017-06-02 14:00:37 17817 2

原创 JS：数组降维の三种方法

var arr = [ [0,1,2,3], [4,5,6,7], [8,9,0,1], [2,3,4,5]];1.两层循环var result = [];for(var i=0;i<arr.length;i++){ for(var j=0;j<arr[i].length;j++){ result.push(arr[i][j]);

2017-06-01 16:18:17 5240

原创 JS 排序算法：冒泡，插入，快速

冒泡排序：1.比较相邻的两个元素，如果前一个比后一个大，则交换位置。 2.第一轮的时候最后一个元素应该是最大的一个。 3.按照步骤一的方法进行相邻两个元素的比较，这个时候由于最后一个元素已经是最大的了，所以最后一个元素不用比较。var a = [3,1,5,7,2,4,9,6,10,8];function bubble(a) { if(!Array.isArray(a)){return

2017-06-01 16:05:09 357

原创 JS：函数的记忆功能（闭包）

1.函数记忆：让函数记住处理过的参数和处理结果2.函数记忆的作用：为避免重复运算3.什么时候使用函数记忆？只要一个函数可能反复计算相同的数据时4.如何使用？使用闭包保存住曾经计算过的参数和处理结果5.example:得到数组中的质数（质数定义为在大于1的自然数中，除了1和它本身以外不再有其他因数的数称为质数）？var isPrime = function(num){ var

2017-06-01 14:29:18 1894

原创 Android安卓4.0以下，fastclick触发两次？

前几天写了个防穿透的模态框。 Modal模态框的防穿透问题，模态框弹出后，禁止body滑动事件但是今天上线前测试，用Android4.0以下的手机测试时，点击模态框的时候还是出现了穿透，好比 b 是模态框上的按钮，a 是下层页面的按钮。当点击 b 的时候， a 被触发了。同事说这种问题不用改了，可能觉得身边使用的人少了，没那个必要了，我还是在网上搜了下解决办法，找到了，虽然说很粗暴，但我测了下，的确

2017-05-27 11:13:34 813

原创 js面试题：let、var

今天同事问我一个问题，function fun() { var arr = []; for (var i = 0; i < 10; i++) { arr[i] = function() { return i; }; } return arr;}console.log(fun()); //输出结果你认为是什么呢？我还记得去年找工作前，

2017-05-23 22:31:05 617 1

原创 flex布局学习笔记：flexbox--持续维护中

兼容性先放在这里：引自 Using Flexbox: Mixing Old and New for the Best Browser Support 、最佳浏览器兼容父元素{ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy bu

2017-05-19 17:06:19 525