前端小功能
关注
分享
扫一扫
小皮咖
希望成为一位技术大咖！
展开
-
利用JQ实现简单的拖曳效果
提出问题 如何实现将一个盒子里的元素拉到另外一个盒子里？实现思路 此操作包含的事件有 mousedown mousemove mouseup ,对这三个事件进行监听并进行相应的操作。 操作设计的节点有：原节点，临时节点，新节点 节点的移动涉及事件e的坐标 操作元素使用JQUERY 代码实现相应的注释在文中已有体现，请认真观看，你可以理解的。先定义一个对象 drag原创 2017-10-18 15:37:47 · 1539 阅读 · 0 评论 -
使用 socket.io.js 实现 websocket 实时通讯
背景 最近公司在做一个快递柜项目，需要与快递柜设备端进行实时通讯，因此接触了 websocket.websocket 作用 简单的说： 传统 http 通讯一次交互数据后就断开连接了，服务端没法主动向客户端推送信息。 而长连接的 websocket 解决了这一问题下面会有一个简单的例子介绍 socket.io.js 的使用github 代码地址将...原创 2018-03-28 14:19:32 · 43894 阅读 · 4 评论 -
cookie/sessionStorage/localStorage 的区别及用法
区别本地 cookie 可以跨浏览器使用，可以设置有效期，可以跨标签使用。sessionStorage 只用来单页面存储数据localStorage 用来永久保存数据相同点都是用来存储数据！用法cookie //JS操作cookies方法! //写cookies function setCookie(name,value) { var Days = 30; var原创 2017-12-06 19:18:09 · 1284 阅读 · 0 评论 -
浏览器上传图片的方法
1. 设置 headerheaders: {'Content-Type': 'multipart/form-data'}2. 获取 file 文件let files = e.target.files[0] || e.DataTransfer.files[0]if (files.length === 0) { return} else { let param = new wind原创 2017-11-25 10:29:18 · 2634 阅读 · 0 评论 -
阻止a标签默认行为的方法
以下简单总结以下a标签阻止默认行为的几种简单方法，希望可以对有需要的朋友有些帮助，(1) <a href="javascript:void(0);" onclick= "myjs( )"> Click Me </a>onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。<a href="javascript:;" > Click转载 2017-11-23 09:38:48 · 464 阅读 · 0 评论 -
本地验证码的实现
本地验证码该如何实现？本文带你进入不通过服务器本地实现验证码的方式原创 2017-07-20 14:44:45 · 1130 阅读 · 0 评论 -
Promise 实现红绿灯实例
要求使用promise 实现红绿灯颜色的跳转绿灯执行三秒后黄灯执行四秒后红灯执行五秒html 实现如下：<ul id="traffic" class=""> <li id="green"></li> <li id="yellow"></li> <li id="red"></li></ul>定义一个空类，之后再js中操作对应的类名即可实现相关的效果。CSS实现如下：ul {原创 2017-09-26 14:35:03 · 3951 阅读 · 0 评论 -
解决实时搜索发送ajax请求过多的问题
本文的操作dom基于JQ。提出问题实时搜索框的目的是：当用户输入内容时，及时发送给后端ajax请求。 但存在的一个问题是——如果用户输入后发现输错了删除重新输入，那么这段时间内就会出现多余的Ajax请求，过多的后台请求无疑造成了服务器的压力。如何解决？思考？当用户在输入的时候，发现误操作和解决误操作的时间一般是500ms以内（这是我个人觉得），我们能不能设置一个时间间隔500ms，如果在这段时间内原创 2017-09-26 15:19:29 · 3538 阅读 · 0 评论 -
一个域名自适应用户屏幕展现不同内容
目前有两种方法：一种是利用媒体查询@media,查询用户的屏幕大小，根据用户屏幕大小实现一套代码兼容pc与移动端 主要运用的CSS框架有bootstrap。其优点是：一套代码实现PC与移动端，维护成本较低 其缺点是：用户会下载多余无用的代码，当用户网速较差时，页面加载过慢影响用户体验另一种方法是通过userAgent 查询，根据用户设备跳转不同的网页，代码如下：<html> <meta原创 2017-09-28 00:21:14 · 459 阅读 · 0 评论 -
canvas 实现刮刮乐
提出问题 在一个电商网站上如何实现刮刮乐的效果？实现思路 用HTML5 的 canvas 标签画图在解决问题前，我们先来了解一下 canvas 标签canvas 是 html5 出现的新标签，像所有的 dom 对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js 能够调用它来进行绘图。context是一个封装了很多绘图功能的对象，获取这个对象的方法是 :var canvas原创 2017-10-15 12:18:51 · 4717 阅读 · 1 评论 -
quill——简单的富文本编辑器
先介绍一下一般网页如何实现 quill 富文本编辑器引入 quill.js 文件<script src="https://cdn.quilljs.com/1.3.3/quill.js"></script>引入主题 css 文件 <link href="https://cdn.quilljs.com/1.3.3/quill.snow.css" rel="stylesheet">本文操作基于 J原创 2017-10-16 14:33:58 · 10548 阅读 · 3 评论 -
瀑布流布局的实现
提出问题 如何实现图片的瀑布流布局？实现思路 两种方法，一种是 CSS 实现，能实现页面响应式瀑布流，使用 column-width 和 column-gap 属性。另一种是 JS 实现，通过获取窗口宽度计算首行填充图片个数，定义行高度数组。然后将 DOM 操作修改第二行第一个元素的绝对定位，使其位于上一行高度最小的元素之下，并求和这两个元素的高度，更新高度数组。解决问题详细代码请点击这原创 2017-10-30 09:36:47 · 1508 阅读 · 2 评论 -
懒加载
问题 一个电商网站上有大量的图片，加载很慢，如何使用懒加载优化用户体验？懒加载的原理： 先让所有的图片都显示同一张图片，在通过判断窗口大小以及滚动距离，判断该DOM元素是否在我们已视区域，如果在已视区域，则用js修改img标签的src为data中储存的真正的src,然后再添加一些图片出现的特效即可！html 代码<div class="lazyload"> <div> <ul>原创 2017-10-12 17:19:13 · 1519 阅读 · 1 评论 -
详解 JSONP
JSONP 被用于跨域获取数据。在讲解它之前，先讲讲它与 JSON 之间的区别什么是JSON？JSON 是一种基于文本的数据交换方式，或者叫做数据描述格式。其优点是：1、基于纯文本，跨平台传递极其简单；2、Javascript 原生支持，后台语言几乎全部支持；3、轻量级数据格式，占用字符数量极少，特别适合互联网传递；4、可读性较强，虽然比不上 XML 那么一目了然，但在...原创 2018-07-31 15:01:12 · 437 阅读 · 0 评论