可爱不能当饭吃

一、WebScoket 的定义WebScoket 是一种在单个 TCP 连接上进行全双工通信的协议。与 HTTP 不同，它以 ws:// 或 wss:// 开头（分别表示 WebScoket 和安全 WebScoket 连接）。一旦通信连接建立和连接打开后，消息交换将以双向模式进行，不必在浏览器（客户端）发送 request 之后服务器才能发送信息到浏览器，这时候服务器有主动权，可以随时发消息给浏览器（客户端），客户端和服务器之间的连接也会持续存在，直到其中任何一方（客户端或服务器）宕掉或主动关闭连接，

最近在项目中遇到一个要用户授权位置且可以用户自己选择位置的功能，看起来好像很难，其实并不难，我在网上看了一些优秀博主的博客，只要跟着步骤一步步来就能实现，下面是我在实现该功能后做的一次总结，希望能帮到更多的小伙伴~一、实现位置授权功能实现的效果图：实现步骤：1. 登录小程序官网获取AppID(用自己的小程序账号登录):[开发 ->开发设置 -> 复制AppID]2. 注册并登录腾讯地图api获取key:[控制台->我的应用->创建应用-&gt..

有时候我们可能要实现如下这种效果：光用 el-table 实现不了这种层级效果，所以博主就在 el-tree 的基础上进行了一点点改造template <div class="tree-box"> <div class="tree-nav"> <div class="item">权限名称</div> <div class="item">权限描述</div> &

项目场景：                    鼠标经过实现图片放大效果效果描述： 用到的知识点：鼠标经过图片放大：transform：意思是转换，指的是改变所在元素的外观，例如位移、旋转、缩放等，但是没有动画效果，所以可以搭配transition 使用.transition：

文章目录前言一、精灵图1.什么是精灵图？2.使用核心二、圆角边框1.属性及用法2.常用写法：三、vertical-align属性1.使用场景2.语法及属性值总结前言大家在逛淘宝京东等网站的时候，一定见到过下面这个图片吧，虽然看起来不是很复杂，但涉及的都是重要的知识点，下面我们通过这个案例来讲解所用到的CSS属性以及核心代码。一、精灵图1.什么是精灵图？css精灵图即CSS Sprites，是一种网页图片应用处理方式。主要是指将网页中需要的零星的小图片集成到一个大的图片中。css精灵图有减少图

前言 这次的页面与以往的不同，因为这次的页面是由 html+css+JavaScript 三者组合而成的，从一开始学习的时候，其实就初步了解了Javascript的作用，当时就觉得它能使页面“动”起来，非常的有趣，现在接触下来，确实如此。有了Javascript就能做许多页面的交互效果，迅速提升用户体验感！就拿我刚做完的一个项目——小米官网，带你们看看JS所带来的高级感~一、首页、登录页面整体布局1. 首页布局此首页我先将其大体分为 head 和 nav 两大板块，其次...

前言 呀呀呀呀~今天我又来总结小米官网了，不是为上次的博客做补充，而是分享用jQuery做小米官网交互效果。不得不说，用jQuery比用JS能省去好多好多代码呢，正好印证了jQuery的设计宗旨：“write Less , Do More”. 整体的布局就不说了，和小米官网的第一篇总结一样的布局，因为博主就是复制粘贴的html和css，但对JS换了一种方法重写了一遍，所以！我就直接分享jQuery部分了~一、经过下载app出现二维码分析：第一步还是要先把要做动画的...

Ajax 通俗理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是 Ajax进入正题——新闻列表制作 ????1.实现效果：通过请求存放数据的 url 地址来将里面的内容显示到页面上（如下图所示）2. 用到的文件： jquery.js 和 template-web.js3. 实现步骤：① 先引入需要的文件② 通过css将基本的布局实现 （效果如下）③ 编写JS代码 css部分：.news-item { ...

前言相信大家都玩过贪吃蛇这个游戏，那你们想不想自己也做一做呢？可能会有人说很难把，不，其实不难，因为博主也是JS的入门小白，但是博主今天把贪吃蛇做出来了，做这个项目的时候，有一个小门槛给我卡住了，就是用哪种方式实现蛇的移动，如果这个你们都想出来了，那这个项目对你们来说 so easy！ 先来讲讲我的做法。前提准备： 1.蛇：属性有宽、高、方向、节数、方法：显示、移动 2. 食物：属性宽、高、位置 3. 显示蛇：根据状态向 container（相当于地图）里添加元素 ...

这个案例是我一开始接触前端就好奇的，现在终于知道是怎么做出来的了！迫不及待想分享给大家！实现步骤：1. 获取用户输入的搜索关键词：为了获取到用户每次按下键盘输入的内容，需要监听输入 框的 keyup 事件2. 封装 getSuggestList 函数：将获取搜索建议列表的代码，封装到 getSuggestList 函数中3. 渲染建议列表的UI结构： ① 定义搜索建议列表 ② 定义渲染模板结构的函数4. 搜索关键词为空时隐藏搜索建议...

小编今天又get到一个新技能，就是上传图片并显示进度条，话不多说，直接进入正题！冲冲冲！！????实现效果：当点击上传文件按钮后，如果未选择文件，会跳出请选择要上传的文件提示框，反之，会有一个上传图片的进度条显示，当上传完成后，图片也会对应的显示在页面中.实现步骤：① 定义UI 结构② 验证是否选择了文件③ 向 FormData 中追加文件④ 使用 xhr 发起上传文件的请求⑤ 监听 onreadystatechange请求⑥ 显示文件上传进度...

首先虽然这第一步不需要什么技术，但是也是非常重要的，那就是找一个好看的背景！你想啊，如果你做的闹钟外观看起来不怎么样或者说是你不喜欢的样式，那你会去用吗？（反正如果是我，我可能做完就放在那不会再打开了）所以，先不要想要去怎么构思代码，找背景才是关键！（我是找了好久，勉强找了一个能看的，简约且又像闹钟）给你们瞅瞅（emmm...不要吐槽！不要吐槽！）图片找好了那就要开始布局了，想想你的倒计时要放在哪里，以及时长的选择还有一些功能键的位置，因为我选的图片正好是居中放置的，所以其他的功能键也居中放..

这篇博客，是博主这几天刚做的一个项目遇到的一个难点，学会了这个，你就能轻松实现页面元素的移动啦，再配合一些条件，就可以做出一个任务完成进度的页面了！先来看看效果：实现功能：拖动元素从一个板块移动到另一个板块的某个位置，博主根据自己的需求做的这个是点击的元素 只能移动到它所在模块的下一个模块，如果移动到别的模块就会回到原来位置，而且当你拖动的 元素位置没有超过某个距离也会自动弹回到原来位置案例分析：关键一步就在于！当你鼠标按下的时候，不仅要获取到当前的元...