2018年08月_极地雪狼li

原创 angularjs手机webapp 利用input拍照，图库选择、缩略图显示上传图片（一）

运行后的截图：html代码<ul class="list_img"> <li ng-repeat="imageSrc in imgshows track by $index"> <img ng-src="{{imageSrc}}" alt=""> ...

2018-08-30 15:17:50 821

原创 Angularjs 实现多图片上传预览

先看效果图图片上传的预览，我们最主要解决的是拿到input的on-change事件，再是读取图片，读取图片我们需要用到FileReader。我们先写一个读取图片的服务，这是网上的一位大神写的，直接用了/** * 图片上传获取返回的url */function fileReader ($q, $log){ var onLoad = function(reader, de...

2018-08-29 15:25:23 1231 2

原创 angular限制字符超过一定的字数隐藏字数显示省略号

自定义一个过滤器js代码function CarouselContentFilter ( ) { return function (str) { if(str){ var carContent = ''; if(str.length >= 50){ str.length = 5...

2018-08-27 11:12:18 5389

原创 CSS控制文字，超出部分显示省略号--分单上和多行显示

<pstyle="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow:hidden;text-...

2018-08-27 11:00:50 24978

原创 Vue.js中文API阅读笔记以及踩坑总结

api地址：Vue.js中文APIVue参考MVVM模式，使用vm (ViewModel 的简称)来表示Vue实例，这也是官方推荐的使用vm表示vue实例 vue是一个虚拟DOM的，以数据驱动为核心的前端框架。数据驱动也可以称为响应式系统，当属性的值发生变化时，视图都会“及时响应”，并更新相应的新值。实例生命周期钩子函数每个 Vue 实例在被创建之前，都要经过...

2018-08-26 23:25:53 1747

转载 vue组件： todolist功能开发，todolist组件拆分，todoLidt删除

通过todolist案例学习vue中组件的概念和使用‘1、 todolist功能开发使用v-model、v-on（@）、v-for指令实现todolist功能实例：<div id="root"> <input type="text" v-model:value="inputValue"> <button @click=".

2018-08-26 20:17:53 581

原创 Vue+ElementUI从零开始搭建自己的网站（三、组件间的通信）

前面讨论了环境的搭建和导航页面以及路由的配置，今天我们讨论下如何开发一个拥有表单和表格功能的页面。先上开发完的效果图：可以看出页面非常的简单，其中上半部分是表单搜索和查询，下半部分是用于展示数据的表格。如果按照传统的开发思路，其实非常简单，只要用两个div，第一个div放置表单，第二个div放置表格即可。但是，我们今天要介绍的，是这个页面的另一种写法，也是vue作为一个优秀的前端框架的核...

2018-08-24 11:23:24 12697 12

原创 Vue+ElementUI从零开始搭建自己的网站（二、导航组件）

创建导航页组件我们在src目录下新建一个文件夹，名为components，今后我们的组件都会放在这个文件夹中。在components目录下新建一个Navi目录，在Navi目录中新建一个名为Navi.vue的组件。至此我们的目录应该是如下图所示：然后我们修改main.js文件，修改后的文件如下import Vue from 'vue'import ElementUI from ...

2018-08-24 10:14:04 27821 2

原创 Vue+ElementUI从零开始搭建自己的网站（一、环境搭建）

VueJS可以说是近些年来最火的前端框架之一，越来越多的网站开始使用vue作为前端框架，vuejs轻量、简单，对于前端友好，学习路线平坦，这使得前端开发变得更加简易，而基于vuejs的前端组件库也越来越多。其中ElementUI，就是饿了么团队开发的一款基于vue的前端组件库。构建网站的必备环境：NodeJS（npm） Webstorm （前端IDE） Nginx（后期用来转发请求到后台服...

2018-08-23 18:07:34 119462 6

转载微信开放平台开发(2) 微信登录

在这篇微信公众平台开发教程中，我们将介绍如何使用微信开放平台接口实现微信扫码登录的功能。准备工作网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前，在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始...

2018-08-23 16:38:53 1297

转载聊聊http和https协议

1.http和httpshttps的SSL加密是在传输层实现的。(1)http和https的基本概念http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HT...

2018-08-23 10:13:08 1743

原创 js常用方法总结

//一、检测浏览器是否支持svgfunction isSupportSVG () { var SVG_NS = 'http://www.w3.org/2000/svg'; return !!document.createElementNS && !!document.createElementNS(SVG_NS, 'svg').createSVGRect;}...

2018-08-22 17:55:36 303

原创 js阻止默认行为和阻止冒泡

//阻止默认行为// JavaScriptdocument.getElementById('btn').addEventListener('click', function ( event ) { event = event || window.event; if ( event.preventDefault ) { // W3C event....

2018-08-22 17:32:37 1652

原创 js获取鼠标的坐标

1、JavaScript实现X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" /> function mousePosition ( ev ) { if ( ev.pageX || ev.pageY ) { return { x : ev.pa...

2018-08-22 17:19:56 3536

转载 Vue使用Axios实现http请求以及解决跨域问题

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Axios的中文文档以及github地址如下：中文：https://www.kancloud.cn/yunye/axios/234845github:https://github.com/axios/axiosvue路由文档：https://router.vuejs.org/zh/一、安...

2018-08-22 16:22:16 1710

原创 js拖拽---磁性吸附

直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽-磁性吸附</title> <style type="text/css"> *{margin:0;padding: 0;}...

2018-08-18 19:04:11 1551

原创 js基础知识总结（一）

js的组成 ECMAScript（ES） : 负责翻译，为js的核心，解释器。DOM(Document Object Model 文档对象模型)：赋予js操作HTML的能力，document。BOM(Browser Object Modal 浏览器对象模型)：赋予js操作浏览器的能力，window，不兼容不建议使用。变量类型...

2018-08-18 18:57:47 20484 3

转载 js笔记一:js中 forEach，for in，for of循环的用法

for in是ES5标准，遍历key. for of是ES6标准，遍历value.js中循环语句有forEach，for in，for of 三种了一般的遍历数组的方法:var array = [1,2,3,4,5,6,7];for (var i = 0; i < array.length; i) { console.log(i,array[i]);} 结果如下:...

2018-08-18 12:30:36 355

转载 nodejs搭建静态服务器用Nodejs搭建服务器访问html、css、js等

第一步，俗话说的好，工欲善其事，必先利其器。既然要用node+express配置服务器，如果电脑上没有的话自然要先安装这两个大宝贝啦。1.安装node。到Node官网下载安装即可，直接下一步下一步就完成了。2.npm初始化项目。打开终端，输入npm init -y即可。注意：如果不输入-y要自己写一些配置，写了-y会默认直接生成一个package.json文件。3.安装Express。...

2018-08-17 10:36:47 934

转载移动端适配简易步骤

手机端全部适配简易步骤，不确保没有bug。1、HTML 的 head 部分中加入如下代码：<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">其中 width：viewport...

2018-08-16 18:40:18 193

原创 js倒计时时钟

<!doctype html><html><head> <meta charset="utf-8"> <title>倒计时js代码</title> <style> * { margin: 0; padding: 0; ...

2018-08-16 18:34:02 438

转载手机端左右全屏滑动（加精）【判断PC还是移动端】

上下滑动：http://blog.csdn.net/libin_1/article/details/50527583下载http://download.csdn.net/detail/cometwo/9467993<!DOCTYPE html><html lang="en"> <head> <title&gt...

2018-08-16 18:28:08 1142

原创 H5调用相机，裁剪，压缩照片

最近项目中遇到拍照，预览上传的问题，苹果手机不兼容，拍照旋转90度，在网上查找出好多方法，都无效，最后用input调用相机，然后用canvas画布裁剪照片，压缩保存，代码如下。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta n...

2018-08-16 18:12:45 1228

原创 web js实现照片拍照保存插件

<!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scala...

2018-08-16 18:05:40 2145

原创使用nodejs搭建服务器显示HTML页面

首先安装express在命令行输入：npm install express -g安装完成后可以查看安装情况：npm ls -g然后创建server.js文件var express = require("express");var app = express();app.use(express.static("public")).listen(8080);这里我...

2018-08-16 16:13:34 5436

转载 Swiper4.x的全部配置选项、方法、函数，具体使用

一、Swiper4.x的全部配置选项、方法、函数1.swiper一般选项1.1initialSlide设定初始化时slide的索引。设置为1后，Swiper初始化时默认显示第2个轮播图1.2direction设置Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。horizontal：横向切换，vertical：竖向切换。1.3speed切换速度...

2018-08-16 15:39:32 5296

原创 JS字符串剔除重复字符

JS字符串剔除重复字符，JS字符串剔除重复字符的注意事项有哪些，下面就是实战案例，一起来看一下。()和\number 配合使用表示重复正则第number个括号内匹配到的内容，如：(\d)\1表示重复第一个匹配块(\d)即等价于如果(\d)匹配到a，则表达式为aa相应的可以：(some)\1* 或(some)\1+或(some)\1? 表示重复第一个匹配快得到的内容任意次或者至少一次...

2018-08-15 23:11:15 3220

转载 js时间相互转换：时间戳转为时间字符串

时间戳转为时间字符串function formatDate(date, format) { if (!format) format = "yyyy-MM-dd HH:mm:ss"; date = new Date(parseInt(date)); var dict = { "yyyy": date.getFullYear(), ...

2018-08-15 22:53:25 2567

转载应该如何搭建webpack+react开发环境

这次给大家带来应该如何搭建webpack+react开发环境，搭建webpack+react开发环境的注意事项有哪些，下面就是实战案例，一起来看一下。环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3...

2018-08-15 22:22:36 159

原创 pc端和移动端集成第三方快捷登录 --- 微博为例

通过新浪微博的开放平台去注册一个应用。之后你会得到一个App Key和一个App Secret。拥有它们，你才可以申请权限。2、在高级信息中编辑授权回调页，这里与后面代码里的回调地址要一致3、微博登录标识的地址如下：https://api.weibo.com/oauth2/authorize?client_id=YOUR_CLIENT_ID&response_t...

2018-08-15 10:18:12 4379

原创【JS】字符串常用操作

转义字符串//JavaScript的字符串就是用' '或" "括起来的字符表示。//如果 ' 本身也是一个字符，那就可以用" "括起来，比如"I'm OK"包含的字符是I，'，m，空格，O，K这6个字符。//如果字符串内部既包含 ' 又包含 " 怎么办？可以用转义字符 \ 来标识，比如： 'I\'m \"OK\"!'; 表示的字符串内容是：I'm "OK"!//转义字符 \ ...

2018-08-14 22:47:22 188

原创 animate.css动画库使用方法介绍

Swiper(Swipermaster)是目前应用较广泛的移动端网页触摸内容滑动js插件，下面是一些动画相关的总结。animate.css动画库简介Animate.css是由Dan Eden的Daniel Eden使用CSS3的animation制作的动画效果的CSS集合。它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/...

2018-08-14 20:34:02 1657

原创 swiper滑动及动画特效

Swiper基本使用方法：一、加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。二、HTML内容。（我是基于angular1.x）<div class="swiper-container jb_carousel" id="jb_carousel"> <div class="swiper-wrapper" > ...

2018-08-14 18:09:09 4123

原创 vue.js动态文字滚动公告代码 --- 跑马灯

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue.js动态文字滚动公告代码 </title> <script src="https://cdn.bootcss.com/vue/2.5.17-beta...

2018-08-12 15:26:53 23117

原创字符串转换成UTF-8

function toUtf8(str) { var out, i, len, c; out = ""; len = str.length; for(i = 0; i < len; i++) { c = str.charCodeAt(i); if ((c >= 0x0001)...

2018-08-11 21:28:09 3905

原创 angularJS-滚动到底部加载数据实现分页 --- 通过指令实现

<!DOCTYPE html><html ng-app="myPro"><head> <meta charset="UTF-8"> <title>angularJS-滚动到底部触发事件</title> <script src="https://cdn.bootcss.com/angular....

2018-08-11 21:13:57 2322

原创在Vue-cli项目中动态生成二维码

1、引入qrcode--------npm install qrcode2、在main.js中引入import QRCode from 'qrcode' //定义生成二维码组件3、在需要使用到生成二维码的组件中引入import QRCode from 'qrcode' //引入生成二维码组件4、在HTML中定义生成的位置，注意添加样式<templa...

2018-08-11 21:13:35 3330

原创基于angularjs1.x的自定义滚动条插件

在用angular1.x作为项目的前台开发框架时，无法避免的会遇到需要在项目里使用第三方插件的情况（比如用来绘制表格或统计图），有时候插件的功能并不能满足我们的需要（比如绘制表格和绘图插件不包含滚动条，而表格或图形的数据比较多，我们希望用滚动条的方式来展示），需要我们自己来扩展，下面就用一个自定义滚动条插件来抛砖引玉。首先说明一下应用场景：页面有一个固定区域（高度和宽度固定，除窗口大小发生...

2018-08-11 11:20:16 471

原创 angular1.x ui-route传参的三种写法

.state('classrooms',{ url: '/classrooms/:id'}).state('classrooms',{ url: '/classrooms/{id}'}).state('activities',{ url: '/activities', params: { id: { value: 42} }})...

2018-08-04 11:17:38 434

原创表单元素input type类型为text在火狐浏览器下默认显示红色边框的处理办法

在样式表里设置样式input[required]:invalid,input:focus:invalid,textarea[required]:invalid,textarea:focus:invalid { box-shadow: none;}想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！...

2018-08-02 19:37:34 2197

空空如也

空空如也