先来个基础的 需求 根据下面需求实现如示意图所示的邮箱输入提示功能，注意，根据要求只需实现下面功能当用户没有任何输入时，提示框消失当用户输入字符后，显示提示框，并且把用户输入的内容自动拼上邮箱后缀进行显示暂时不用考虑示意图中的红色和蓝色背景色的逻辑注意用户输入中前后空格需要去除小优化编码 需求 如果我们输入的是 abc@1，这个时候出现的提示框内容是 abc@1@163.comabc@1@gmail.comabc@1@126.com……很明显，上面...
好久没跟新博客了 今天没啥事来记录一下我的成果 哈哈哈 今天产品小姐姐过来跟我说改一下产品活动页的样式 我看了一眼发现有个轮播样式两边小中间大 这个我以前是没有写过的 而且在小程序中要实现 觉得应该不是很简单 想着记录一下吧 其实没我想的那么难实现 小程序有个组件轮播组件swiper 这个就可以直接使用 而且他提供了两个属性很实用这个可以帮助实现出现两边部分图片信息的功能 我主要的想法就是给个标识 当滑动到某...
react的组件模式可以观看Michael Chan的演讲视频，平时大家常听到的react模式也是HOC, HOC的使用场景很多，譬如react-redux的connect，这里不赘述HOC相关，感兴趣可以自行了解。 首先是这样一个场景，我的业务需要实现倒计时，倒计时你懂得，倒计时经常应用在预告一个活动的开始，像秒杀，像开售抢购等，或者活动的截止。我们来梳理一下这个倒计时的功能： 定时更新时间，以秒为度;可以更新倒计时的截止时间，比如从10月1日更新为1...
通过购物车的一个案列，把vuex学习了一篇。vuex概念浅谈Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单的来说，就是数据共用，对数据集中起来进行统一的管理。 如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好...
好久没有记录工作中遇到的问题，其中的原因之一应该是没有什么代表性的或者说是没有网上搜不到答案的，毕竟在大多数前端中我还是很渺小。今天写这个博客就是因为工作中遇到了问题而且网上也没有找到合适的答案，自己写了大部分代码加上借鉴了一些别人的思想，下面就步入正题： —更新：2018-6-20 加上今天是不是周日的判断 —更新：2018-7-31 给String添加方法来实现调用，感谢Rainbow_miao的提醒。github地址：https://github.com...
背景 项目中有用到node做中间层，期间有个为PDF文件添加水印的需求，网上搜了不少帖子，发现有以下几点存在的问题。1、单页PDF的话，可以用PNG图片加到PDF上，但是实际使用情况就没那么理想，必须满足多页PDF每页都加上水印的效果方可。2、中间想过，把PDF转成图片，图片加上水印后再转回PDF，但是感觉中间步骤太麻烦，而且会面临清晰度下降的可能。3、Python、Java有相关方案，可以实现，有想过用node去执行Python脚本去为PDF加水...
本文介绍了koa2实现登录注册功能的示例代码，分享给大家，具体如下: 这个主要结合前几天的内容，做个实际案例的效果 版本：项目结构：前几天，我们把注册和登录的页面demo实现了，今天我们主要实现这么几个内容 注册新用户判断该邮箱是否注册过登录判断是否注册过登录时的密码的正确本文代码地址：https://github.com/xiaqijian/koa2-lessons/tree/master/lesson6 明天，我们将利用session实现登录状态判断 今天的这篇是在之前的代...
本文介绍了electron制作仿制qq聊天界面的示例代码，分享给大家，具体如下： 效果图:样式使用scss和flex布局 这也是制作IM系统的最后一个界面了!在制作之前参考了qq和千牛 需要注意的点 qq将滚动条美化了 而且在无操作的情况下是不会显示的 滚动条美化 ::-webkit-scrollbar { /*滚动条整体样式*/width: 5px; /*高宽分别对应横竖滚动条的尺寸*/height: 1px; }::-webkit-scrollbar-thumb { /*滚动条里面小方块*/border-radius: 10px;-...
本文介绍了使用electron制作满屏心特效的示例代码，分享给大家，具体如下：图片被压缩了 看起来很难看主进程代码 import {BrowserWindow, app, ipcMain} from electroncreateWindow();ipcMain.on(quitApp, () => {app.quit(); });function createWindow() {const loginURL = process.env.NODE_ENV === development ? `http://localhost:9080` : `file://${__dirname}/index.html`;const win = new BrowserWindow({alwaysOnTop: tru...
鼠标悬浮同时触发多个echart 效果如下html代码 <div class="contain"><div class="sel"><div class="sel1"><div class="top"><span>选择时间间隔</span><div class="show"><span>one second</span><i class="glyphicon glyphicon-chevron-right"></i></div></div><div class="block"><div leap="second">one second</div><div leap="minute">one minute</div><div leap="hour">one hour</div><div leap="day">one day</div><div le...
前言 做移动端时，适配 是必须的。使用rem单位，可在不同屏幕上完美显示相同的布局。px2rem 插件方便的将px单位转为了rem。 px2rem 地址：https://www.npmjs.com/package/px2rem 这应该是vue项目在适配移动端时候，最简单的方法之一下面是基本步骤（使用cnpm）1.下载并引入lib-flexible cnpm install --save lib-flexible在main.js中 ：import 'lib-flexible/flexible'2.引入px2rem-loader cnpm install --save px2rem-loader3.将p...
前言今年五月份参加Oracle开发者大会,在会议上看到智能AI在运维方面的应用场景;讲师现场展现了一款能够结合上下文对话的智能AI,通过聊天方式完成运维工作。会议后对该款智能AI机器人念念不忘,由于人工智能AI学习成本较高,寻思着是否能够写一套低配版运维交互机器人; 思考 初期期望该机器人能够： 通过手机能够处理简单的故障不智能但至少配置能够灵活变更有了具体的目标, 再考虑具体实现方案, 主要思考几个点： 应用载体我期望这个...
前言 我们在做移动端时，在跨平台、浏览器、移动设备兼容的时候,要根据设备、浏览器做特定调整，想起用navigator.userAgent来对浏览器类型进行判断，查了点资料，在这里总结下还有一个就是移动端的缩放问题，在meta标签中进行设置，对部分浏览器进行强制性的限制1.navigator的一些常用属性navigator为window对象的一个属性，指向了一个包含浏览器相关信息的对象navigator.appVersion 浏览器的版本号 navigator.language 浏览器使用...
一、什么是雪碧图？CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 二：为什么要用雪碧图结合我们公司的需求来说，因为有很多组件，每个组件下有大概50张图片，每张图片是一个请求，也就是发了300多个请求，这样是很可怕的，所以为了优化性能，减少http请求，决定采用雪碧图的形式。 雪碧图是将你想要的很多张图...
前颜（yan）雪碧图（CSS sprite ），就是把很多小图标合并为一张图片。 在Web开发中，使用雪碧图是优化Web性能的一种方法。 比如你可能遇到过这样的一种场景：在你的页面中，使用到了很多的小图标，然后你的每个小图标都是通过 <img src=logo.png>来引用的。 通过这种方式虽然比较方便，但是存在的一个缺点就是性能问题，即浏览器在解析每个小图标时，都要发起一次http或（https）请求，而这个小图标本身却很小，可能只有十几k甚至...