Y.Cheng的博客

前端涉及道时间的时候，从后台拿数据的时候，不说格式的话，他们（不是所有后台的人都这样）永远给的是时间戳，只有前端自己转译了；下面的代码，可以转译成日期并且可以满足大部分人想要的时间格式 /** * 时间戳转日期 * 1：格式y-M-d h:m:s * 2：格式y-M-d * 3：格式y.M.d * 4：格式y.M.d h:m:s * 5：格式M-d h:m * 6：如果为今年格式...

offsetWidth offsetHeight offsetLeft offsetTopclientWidth clientHeight clientLeft clientTopscrollWidth scrollHeight scrollLeft scrollTop是时候谈谈它们之间的区别了，是不是已经混乱了？好吧，一步一步来搞清楚这些东西是啥。终于下决心来补上这个坑，俗话说的话：纸上...

我们电脑桌面，文件夹或者浏览器等等一些地方，鼠标左键功能都一样，鼠标右键各有各的功能，都对应各自功能需求而定制的菜单；所以我们也可以定制自己的个性右键菜单，让菜单更美观，更有个性。这里就写出浏览器如何自定义菜单（电脑桌面的呢，抱歉超出了我能力范围了）定制菜单如下：样式的话，因人而异，你们随意发挥了* { margin: 0; padding: 0; }...

这里将成为我所有正则问题“挖坑”“填坑”的大本营下面是正则表达式的常用方法，方便你们对应 正则方法 test() 检索字符串中指定的值。返回 true 或 false。这个是我们平时最常用的方法。 exec() 检索字符串中指定的值。匹配成功返回一个数组，匹配失败返回null。 compile() compile() 方法用于...

JavaScript函数防抖（debounce）与函数节流（throttle），这两个词听起来高端大气上档次，但是其实在平时做项目的时候，我们都可能不经意用到这中处理方式。我用两种方式解释吧：专业点讲函数防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。函数节流：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发...

关注公众号是所有客户都需要的一个功能，所以如何实现网页中不扫二维码，直接通过点击按钮的形式去关注公众号呢？我们要通过获取一个uinID拼接地址实现跳转关注公众号，那么下面有2种获取他的办法。第一种1.登录微信公众平台，登录进入公众号后，点击查看源代码2.代码顶部就可以看到公众号的基础信息3.复制uin_base64这个ID（每个公众号都是唯一的），我们就是利用这个区直接关注公众号4...

<script>function Circle(radius) { this.r = radius; this.des = "圆形"; this.showInfo = function () { alert("这是一个" + this.des); } } function Circle_area(r) {

众所周知，现在PC电脑和手机的分辨率是越来越多，适配也就成了需要前端这个职业一个原因，具体有那些主流的可以看下面这这篇文章：PC-移动适配CSS单位说到适配，我们就想到CSS的单位：px,em,rem,vw,vh,vmin,vmax以及不常用到的ex,ch等px : 我们最基础的单位（像素）em : 相对于当前父节点字体的大小 ---- 1em = 父节点字体大小rem: 相...

最近在做的一个关于照片上传打印成相册的小程序，功能主要在用户处理图片，放大缩小，拖拽，不同模板不同表现直至最后打印，过程中碰到很多坑。接下来我主要叙述的路线如下：用户操作 --------------上传图片用户操作 --------------选中图片初始化 -----------------模板 / 用户选择模板 (例如相框，背景模板)图片处理 --------------初...

小程序从基础库版本 2.2.1 以上就开始支持npm安装第三方包了，看了文档之后，我就吐槽（妈的写这么笼统，坑不死人）。文档:一般我们看了文档后，就会跟着文档走流程，果然就被文档带跑了。首先，如果你按文档走下去：1、执行命令安装npm install2、工具 -> 构建npm恭喜你，将会看到没有找到 node_modules 目录。问题原因：一直开发小程序，没怎么用过npm...

这个需求要不是UI和我讲有其他小程序实现了，我都还以为小程序还不能做到自定义导航。还好是在设计阶段给出的需求，不然。。。先看看效果吧微信小程序自定义导航栏开始接介绍用法：1：配置app.json扫码都别管，先查看文档window配置然后在app.json设置navigationStyle为custom（自定义导航栏）注意!: 如果这里设置为自定义导航，那么所有页面都会变成自定...

Vue中使用微信SDK，配置分享

最近算是吧微信的主要的难点，全是接触了一边了，所以准备写一个系列；微信授权微信SDK的使用，例如分享小程序授权小程序微信支付小程序模板消息不要问我为什么后面是小程序微信支付，小程序模板消息，因为普通微信公众号项目的更本不需要前端去操作太多，直接调取后台接口就可以完成。Vue微信授权这里我们用的是Vue全家桶开发先上一张微信授权流程图片吧： 你可以尝试着跟着这个流程...

PC端按屏幕宽度大小排序（主流的用橙色标明）分辨率 比例 | 设备尺寸1024*500 （8.9寸）1024*768 （比例4：3 | 10.4寸、12.1寸、14.1寸、15寸; ）1280*800（16：10 |15.4寸）1280*1024(比例：5：4 | 14.1寸、15.0寸)1280*854(比例：15：10 | 15.2）1366*768 (比例：16：9 | ...

swiper组件实现出间距轮播先不急着看实现过程，先看看效果图，如果是你想要的效果那请看下面的过程，不是的话也不浪费大家的时间（就是这么体贴唉）。效果图一效果图二如果是你想要的效果，那就继续往下看，不是那就出门右（别）拐（走）吧。一开始想着如果和swiper.js一样，那就好了，看了下文档就放弃了。网上找了一下还是没找到具体实现方法，就开始自己倒腾，就想到css处理了。第一种效果...

时间上的处理有段时间没弄小程序了，现在又来堆点低级问题处理，需求如下，预定类型小程序的一个页面，之前很少会计算time，应为都是后台返回，但是这次有点特殊，后台不好弄，我就全权接下呗，不怕需求难，就怕需求多啊。 - 状态的简单管理，可选，不可选，选中 - 上面是更具当天得出未来七天日期 - 下面是固定时间段，选中后增加半小时，取消后恢复给看客老爷上图一：选择状态的处理...

问题：img的src属性填写的图片地址，可以正常渲染，但是一旦利用绑定:src属性的时候，图片就加载失败了 需求：鼠标移入切换图片 上一位前端小哥哥，没做这个交互，我接手后加上去，很简答的交互，我替换图片的时候准备三元判断，src需要属性绑定，于是发现同样的地址，我放上去图片就是加载不出来，图片加载不出来，那肯定是地址问题了（插一句：上一位大佬文件结构可能不规范），一般都是static存放...

如果我们的项目利用的是前后端分离的话，前端后台是同时开发的，但是后台接口往往是落后于页面开发的，所以我前端就需要用到模拟的数据来替代后台的接口。现在有很多的mock数据工具，这里我们讲的是json-server，相对于简单,容易上手。开始前提你们肯定应该安装了node了，然后在全局安装json-servernpm install json-server -glinux/ma...

Vue-cli是快速构建单页应用的脚手架，单页所以只有一个index.html入口，只有一个app实例。 但是我们做的项目中，每个页面的标题描述是不同的，又要改变title，所以这里就需要用到导航守卫了Vuecli搭建之类的这里就不详述了…导航守卫：正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由...

浏览器差异由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。使用Trident内核的浏览器：IE、Maxthon、TT； 使用Gecko内核的浏览器：Netcape6及以上版本、FireFox； 使用Presto内核的浏览器：Opera7及...

Emmet—写HTML/CSS快到飞起在前端开发的过程中，最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等，头疼。这里推荐一个Emmet语法规则，让你写的时候爽到飞起，能大大提高代码书写，只需要敲一行代码就能生成你想要的完整HTML结构，下面会介绍如何使用。Emmet是一款插件，只要能安装他的编辑器都能使用，大部分编辑器都可以使用该语法规则,我们平时开发的Sublim...

第二部分内容，这里也列出思路，方便承接第一部分。思路1：给li绑定鼠标移入移出事件 2：获取鼠标移入的位置（有用）,例:(x,y) 3：获取图片距离浏览器的位置（有用），top，left，height+top,left+width看到这个你们应该就理解了 4：将鼠标坐标与图片距离浏览器的位置相减，例如 x-top,x-(height+top)…等等后面详细讲 5：通过差值获...

这个页面鼠标移入移出的效果是昨天写完的，在网上也参考了一些例子，甚至看到了用了数学的点与点之间的距离做的（佩服.gif），数学小白的我还是放弃那种做法，今天来总结下这里思路和过程。首先，会介绍到事件委托： 简单点说就是浏览器绑定事件通过冒泡或捕获机制来向上，向下传播事件。将一个元素的事件，委托给另外一个元素来执行这个事件。效果图 这里你可以看成是一个ul 多个li理解，我是直接...

如何将写好的代码部署到服务器最初的时候，干的事很杂很杂，所以连域名解析，代码部署，服务器配置域名到需要直接来操作，我是个前端（苦笑.png），和我一样的肯定大有人在。这里先介绍下吧：我们用的都是马爸爸（阿里云）的 服务器 和 域名：云服务器ECS - 实例： 1 核 2GB系列 II通用型 n1 - I/O 优化实例： I/O 优化实例 - 系统盘： /dev/xvd...

很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。一、校验数字的表达式1 数字：^[0-9]*$2 n位的数字：^\d{n}$3 至少n位的数字：^\d{n,}$4 m-n位的数字：^\d{m,n}$5 零和非零开头的数字...

下图部分打码（职业操守），点击产业时会有一个下拉并且底部会有一个黄色线条，选择对应的选项，跳转到对应产业的分类页面说明这里导航栏是一个组件，中间内容也是一个组件，里面包含了1,2,3三个板块，是通过v-if判断显示，所以需要通过父传值到子组件中来判断是选择的是哪一个产业。而且这时候如果你刷新了的话，值会恢复到默认值，底部分黄线就会跑到第一个首页的下面，下面也是一样黄线会跑到1号下面 ...

vue脚手架 npm run dev 启动浏览器之前vue脚手架npm run dev 就会自动启动浏览器，但是现在的脚手架会出现如下图 看图：你的应用程序在这里运行：http://localhost:8080 需要手动 Alt+点击解决办法：找到config文件夹下面index.js文件,里面有个dev方法，修改autoOpenBrowser状态为true。看...

直接插入主体 额不 主题我的vue脚手架目录结构如下 有个config文件夹，在index.js中有两个方法一个开发dev,一个生产build。 　 - dev： 是我们的开发环境，资源使用绝对路径，所以可以正常看到背景图片 - build： 是我们的生产环境，资源使用相对路径，所以会报错一：Vue打包js,css等的路径问题我们打包自然要设置build中的代码了。下...

vue里的生命周期是什么？vue实例从创建到销毁的过程称之为vue的生命周期vue的生命周期各阶段都做了什么？beforeCreate: 实例创建前：这个阶段实例的data、methods是读不到的created: 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。mount挂载阶段还没开始，$e...

小程序之wx.downloadFile、wx.openDocument组合使用（二）应为中间还要接手其他的项目，所以时间间隔有点尴尬，接下来接着上一次，继续填坑。 这次需求开始是一个特刊板块，用大背景+滑动切换选择，选择滑动切换的小图，背景背景全景就显示相应特刊图片。直接上图看吧： 都已经做好了！，然后产品问能不能 直接使用pdf在线预览（苦笑。。。），当时是懵的，因为没用过，而且小程...

小程序弹幕需求：小程序实现弹幕功能，然后评论的内容需要审核（需要时间），所以不是及时的出现在弹幕（对我有利）。小程序实现弹幕并不难，主要这次我们的需求并不是用户点击发送就马上出现在视频上，而是审核后才能出现。 先看看小程序的video组件和APIVIdeo组件 API 这里我们要用到danmu-list 下面为他的数据格式，包含了内容（text）,颜色（colo...

直接上稿： 图中的【笑脸.icon】功能就是类似手机输入法的表情功能，下方升起一个包含很多表情的区域，供选择。我说手机输入法有表情，为什么还需要表情功能呢？(苦笑.gif)，UI大佬：不行，这就是表情功能，你写不出来就算了！ me：行，我来搞定（不服）。 自己扛的需求，跪着也要写出来啊~ 网上一顿浪，大概了解了思路1：从网上下载好表情包文件 ———点击前往下载高清emoji表情包 ...

在html中这两个事件属性，很容易让我混淆，小程序中这两个属性也很重要，因此又必要好好深入理解下，让自己分清这两个Dom的属性。这里是MDN给的解释target:一个触发事件的对象的引用， 当事件处理程序在事件的冒泡或捕获阶段被调用时。currentTarget:在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于 target 属性。它指的是当事件遍历DOM时，标识事件的...

写这个是因为，最近小程序的一个需求需要从小程序跳转到客户的官网，或者其他外部报名链接。 如果是以前的话，可能就无法实现，但是小程序的版本更新速度还是可观的，现在既可以跳转外部链接，还可以跳转APP；话不多数，直接上文档：这里需要在小程序后台配置业务域名（不是服务器域名），并且还是https协议开头，不是的话无法添加成功，需要下载一个校验文件放置外部网站的更目录下,可通过ftp传值更目录（让后台去弄

小程序之wx:for（一）初次开发小程序，能猜测到会遇到很多坑，所以在此记录，工作中开发小程序遇到的问题，以及如何解决问题的方法。也方便遇到类似问题的小伙伴思路。话不多说，直接上图，上需求需要达到这个效果，一开始遍历出来的结果是这样： 这里wx:for列表渲染就不说了，没有什么问题，正对于标题的问题后来就开始思考如何达到这个效果，想在后台数据中添加状态，感觉太麻烦（放弃）...