- 博客(34)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 控制台日志打印console的封装，加入美化、行显示与打印开关，支持node.js环境
这是“console”对象的进一步美化和封装，包括console.log、console.info、console.warn、console.error。可以加入自定义的console打印前缀、对内容进行美化（web端规则参考，node环境参考），可随时关闭console打印，支持node环境。
2023-09-18 18:17:39
659
原创 Flutter pub get错误
Pub failed to rename directory because access was denied.This may be caused by a virus scanner or having a filein the directory open in another application.Running "flutter pub get" in flutter_tools...pub get failed (1; in the directory open in another
2022-06-01 15:54:31
2181
原创 js循环的label语句浅析
文章目录前言一、使用场景二、使用方法三、示例参考文档前言今天突然想到了多年前初学前端时的一个例子，今天查了下文档，发现是循环种特有的label语句。自从当时学完之后就没用过，今天查询文档加上自己验证，发现在有些场景还是比较有用的。下面就将下label语句的作用和适用场景一、使用场景一个 label 提供了一个让你在程序中其他位置引用它的标识符。例如，你可以用 label 标识一个循环， 然后使用 break 或者 continue 来指出程序是否该停止循环还是继续循环。label语句只
2021-02-26 17:56:25
635
1
原创 js计算倒计时天、时、分、秒
文章目录前言代码使用前言分享一个自己写的秒数转天、时、分、秒的方法，希望对大家有用。代码function secondFormat(s) { // 防止传入非正常数值 if (typeof s !== 'number') { s = Number(s) || 0 } let m = 60 // 1分钟的毫秒数 let h = m * 60 // 1小时的毫秒数 let d = h * 24 // 1天的毫秒数 if (s <
2020-10-31 15:51:55
878
原创 Flutter 开关按钮封装
文章目录Flutter 开关按钮封装实现思路实现代码Flutter 开关按钮封装实现思路利用自定义按钮组件FlatButton，设置开关状态对应的颜色。实现代码////// Author: chengzan/// Date: 2020-6-4/// Describe: 圆形按钮，适用开关按钮///class PowerSwitch extends StatefulWidget { var value; var on; var off; Color mainThemeCo
2020-10-31 14:33:15
779
原创 Flutter CupertinoPicker组件的二次封装
Flutter CupertinoPicker组件的二次封装前言SinglePickerWidget功能实现思路代码使用实例前言今年大部分时间都放在了Flutter开发上，开发中自己也封装了些组件，最近有时间可以整理一下。分享给大家同时也再次整理当时的思路。SinglePickerWidgetSinglePickerWidget是我封装的组件之一，主要是为了实现UI设计的picker效果，效果图如下，需要单位和值分开：正常的Flutter CupertinoPicker组件是没办法实现的：所
2020-10-30 10:00:00
2715
原创 css阴影的2种实现
在前端开发中，比较常用的有一种样式是阴影，我自己用的有2种写法来实现。第一种是box-shadow，应该是大家比较熟悉的了，这里不再详述。我主要想分享的是drop-shadow来实现。下面讲一下使用场景，比如有2种效果需要你来实现，如下图：图一图二图一是我在做移动端web页面时遇到的需求，是底部的添加按钮需要和底部导航一样有阴影。如果使用box-shaow的话，实现效果可能是这样的：在添加按钮也加上box-shadow，效果是这样的：都跟需要效果有出入。但是使用drop-shadow就可
2020-05-25 19:12:50
2268
原创 js简单实现一个json格式化功能
js简单实现一个json格式化功能背景html核心代码背景在最近的一个项目中，有个需求是实现json编辑和提交。在我的实现中，使用了在textarea编辑，然后在无序列表中显示json格式化的内容。textarea内编辑json内容会使用“tab”键加入缩进、“shift+tab”减少缩进和格式化json内容的功能，下面主要的内容就是关于这个三个功能。在线示例html<!-- 编辑...
2020-05-05 09:51:28
3652
原创 实现一个步骤提示插件
stepsTips步骤提示概述在线示例源码概述在后台管理的实际项目中，发现没有使用说明文档的话，用户在有些操作上不清楚怎么操作流程才是正确的（也可能是页面不够简明扼要），所以在假期突然想起来做一个步骤提示的插件来在以后项目中应用，参考了部分 jquery.joyride 参数获取的实现，查看源码。在线示例在线示例由于是在iframe下，所以滚动的位置并不正确，这个暂时没有处理。在线示例...
2020-02-01 14:05:50
407
原创 web components示例分析
总结一下web components的使用：在线示例引入单独文件引入（这样可以复用）：<link rel="import" href="./components/userCard.html">直接写入同一个html文件内：<template id="userCardTemplate"> <style> ... <...
2019-08-13 10:06:27
484
原创 时间转换成距离现在有多久
下面的方法用来把时间转换成距离现在有多久，如几分钟前、几小时前。需要传入过去的时间，调用示例：timeFromNow(‘2019/6/13 8:15:00’)timeFromNow(‘2019-6-13 8:15:00’)timeFromNow(‘2019-06-13 8:15:00’)timeFromNow(‘2019,6,13 8:15:00’)timeFromNow(15603...
2019-06-13 08:49:30
999
原创 HTML5拖放换位
HTML5拖放换位在线示例：示例页面结构<ul class="drop-div"> <li href="/black"> <div>1</div> <p>1</p> </li> <li href="/green"> <d...
2019-06-10 16:34:13
689
原创 HTML5拖放的封装
在项目中遇到了拖放的需求，之前虽然了解过，但是时间久了就忘记的差不多了。前些天进行简单实现和封装了一下，自己测试没有发现大问题，有个小问题就是拖放到的位置是以松开鼠标时指针的位置来判断插入位置，所以可能效果不甚完美，后面会继续优化。自己封装的js放在了GitHub，欢迎提issues：链接。具体的效果可以点击查看：示例HTML结构示例<div class="abs"> ...
2019-06-03 11:18:19
160
原创 web workers
通过使用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是UI线程）不会因此被阻塞/放慢。index.html<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8">...
2019-05-24 17:37:47
164
原创 JS Notifications消息通知
Notifications API 的通知接口用于向用户配置和显示桌面通知。let notification = new Notification(title, options)MDN链接参数：title一定会被显示的通知标题options 可选一个被允许用来设置通知的对象。它包含以下属性：dir : 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or r...
2019-05-24 16:57:26
1517
原创 JSON数组key的转换
JSON数组转换key应用背景js方法应用背景在前两天，项目中使用tree时遇到要把后端传到前端的转换为自己需要的key。取到的是JSON数组，但是key不是我想要的key，需要通过js来转换成自己需要的key的形式。收到的格式类似这样：var data = [{ "groupId": "01", "name": "第一组"}, { "groupId": "02", "name":...
2019-05-13 10:14:10
1683
原创 html+js调用手机摄像头扫描二维码（生产勿用！）
&amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;title&amp;amp;amp;amp
2019-01-21 17:28:50
37701
40
原创 手势放大、缩小和移动图片
我写博客一般都是把在项目中遇到的一些问题记录下来，可以在以后遇到类似问题或者有新的思路时来回顾。前两天就遇到一个需求：在手机端，把html页面的图片内容放大和缩小、移动位置。花了我一天时间才做好，本来是自己先画逻辑草图和整理思路，做着做着发现有个别细节不对，所以走了一些弯路。现在把代码直接贴出来，功能和效果比较简陋，后面会继续完善，如果有疑问或建议可以留言，3Q。功能：双击图片放大，单点触摸...
2018-11-23 11:18:52
4245
23
原创 阿里云轻量应用服务器Node自动启动和MongoDB自动启动
阿里云轻量应用服务器Node自动启动和MongoDB自动启动前言MongoDB自动启动Node自动启动MongoDB远程连接前言十一休息的时候趁着给女朋友做库存系统的机会，研究了一下阿里云的轻量服务器，因为我本事是做前端开发，所以就考虑了服务端用的Node.js，数据库用的MongoDB。从购买服务器到部署项目的过程就不讲了，网上有很多例子。我主要说下我在做自启动和MongoDB远程访问时遇...
2018-10-22 16:55:50
1733
原创 js获取点击到的内容
js获取点击到的内容提供给APP小组的H5页面链接，现在要求点击图片传给原生一个地址，他们展示图片。 这个方法之前没用过，在此记录一下，方便以后查找。document.body.onclick=function(e){ var event = window.event || e; var obj=document.elementFromPoint(ev...
2018-08-29 17:39:22
1687
原创 webpack多入口页面打包
多入口页面webpack打包前几天研究了一下webpack的多入口页面打包，先整理在了github。 由于这段时间比较忙，稍后会详细讲解一下，具体内容请看我的github...
2018-08-27 16:20:18
2237
原创 JS识别二维码、JS生成二维码
最近的项目中使用到了识别二维码和生成二维码，都是用JS生成的，应用在了移动端，在网上搜罗了许多进行验证，下面是我在项目中应用的：识别二维码1.JS文件和测试页面压缩包：https://download.csdn.net/download/github_37125043/10510383 2.HTML内容&amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt
2018-06-30 16:28:37
18024
4
原创 position定位之后的内容滚动到底部加载更多
今天稍微清闲点，想起了前几天项目中遇到的问题，在页面position定位的内容里实现滚动加载更多，之前写了滚动加载更多是没有定位，通过window.onscroll()方法触发，现在的这个需求有些不一样，这里记录一下方便以后参考，下面直接放上代码：<!DOCTYPE html><html><head> <meta charset="ut...
2018-06-23 18:02:27
658
原创 JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天、某周的区间范围
本文原创，转载请注明出处目录 (Table of Contents)总触发方法（今天是第几周、本月有几周）获取今天是本月第几周获取某年某月的有多少周、多少天、第一周是几号获取今天是今年的第几周、第几天总结好久没有记录工作中遇到的问题，其中的原因之一应该是没有什么代表性的或者说是没有网上搜不到答案的，毕竟在大多数前端中我还是很渺小。今天写这个博客就...
2018-05-08 09:22:05
8957
2
原创 H5页面直播hls视频
PC、手机web页面直播hls视频概述一转眼就到了11月，很多工作中遇到的坑都在一一解决，仔细想了想值得分享的应该是web页面直播hls格式的视频了，当时我们的项目是需要在手机嵌入的页面来播放摄像头的视频，视频格式是hls直播流，HTML5的video标签并不能直接播放hls直播流，需要借助插件来实现。 关于插件的话网上也搜了一大堆用来测试，发现免费还好用的应该算是video.js了，video.
2017-11-18 16:45:11
16869
1
原创 微信公众号支付前端部分流程
上周公司安排了微信公众号支付开发任务，经过快一周的不断填坑，终于把支付搞定，现在把遇到的问题和开发步骤记录一下，方便遇到同样问题的老铁们节省一些时间，少入些坑，先说几天本文不包含的内容，因为这些并不难配置，网上也有很多讲解：1.我做的是微信公众号支付，在微信内H5调起支付2.公众号支付申请也不讲3.公众号的授权路径这些在官网都有，不再讲https://pay.weixin.qq.com/wik
2017-07-10 22:37:52
7390
3
原创 按钮点击波浪效果
看到手机app的点击波浪效果感觉挺不错的，自己用js+css写了下这种效果：CSSHTMLJS全部代码CSS：/*按钮样式*/#btn{ width: 200px; height: 35px; line-height: 35px; background-color: #00BB9E; color: white; outline: none;
2017-05-31 14:28:56
2795
原创 上拉到底部加载更多
#之前写的有图片懒加载，写的比较粗糙-_-，望见谅。这篇写的是上拉到底部加载更多内容，原理跟那个图片懒加载有类似，下面直接开始代码：全部代码如果页面没有滚动时显示出‘加载更多’，就自动加载更多；滚动到底部显示出‘加载更多’时，自动加载一次，然后再次滚动到底部显示出‘加载更多’之后停止加载，且‘加载更多‘变为‘没有更多’：<!DOCTYPE html><html><head> <meta
2017-05-25 15:25:08
2358
原创 多张图片上传预览及上传到服务器
这周搞混合开发的时候给app提供帮助反馈页面，里面有图片上传功能。之前做过图片上传预览,但是上传到服务器用的插件，对于把图片上传到服务器的方法并不清楚。查了一些资料大部分也都是关于图片预览的，还好有上传到服务器的例子，根据例子做了一些修改方便用在移动端，当然PC端也是可以用的。可以获取到图片的名称、大小和类型。没有写成插件方便在不同的情况下使用，下面就直接把全部代码贴出来： 转载请注明出处全部
2017-05-25 10:30:05
2066
原创 使用JS进行图片懒加载
前几天修改了之前APP的一些功能，发现图片的加载太慢了，而且一个页面显示太多图片的话其他js什么的也都延迟了加载，造成事件方法未加载、操作无效果,用户体验差。原因除了图片显示的有点多之外还有我们的服务器限制的有下载速度，所以考虑到了图片的懒加载。下面我只是简单实现了一下效果，抛砖引玉，想一次加载一个屏幕那么多图片的话也不难，需要的可以另外加入判断即可，这里就不再赘述：CSS代码HTML代码JS代
2017-05-15 16:35:02
11895
原创 css文字描边效果
突然想到这个东西，然后写下来留个纪念，方法也很简单。CSS代码HTML代码效果如下： CSS代码主要利用的是文本阴影效果：text-shadow。 text-shadow兼容性：Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 <style> .content { font-size:50px; /*
2017-05-15 15:41:19
1586
原创 下拉多选checkbox
下拉多选checkbox本文原创，转载请注明出处目录下拉多选checkbox目录CSS代码HTML代码JS代码今天根据要求让实现下拉列表加入多选按钮，之前写过百度搜索效果，但是感觉不太适用。然后大概想了一下就动手开始试着去写，实现效果如下图：（注：选中下拉多选框之后点击输入框及下拉以外的地方隐藏下拉。依赖JQuery，为了写的方便些。）CSS代码定义一些样式：<style> u
2017-05-12 18:58:38
8014
原创 教你如何利用css来裁剪图片
突然想到了之前整理的图片裁剪插件，想了下实现的三种原理，下面就写一下简单的例子：背景定位代码块clip切割代码块position定位代码块由于只是简单说了下实现原理，网上也有很多插件，但是UI的设计不一，所以对于全面的实现效果并没有体现。背景定位 利用背景定位来实现裁剪效果代码块css：div{ width: 300px; height: 300px;
2016-12-22 17:01:57
4369
原创 花你5分钟，轻松掌握如何实现超出内容显示省略号
超出显示省略号这几天不忙，整理了一下这个，方法现在用的有三种超出显示省略号单行多行支持非IE多行支持所有主流浏览器单行缺点：不适用于多行之后的省略 优点：美观，可用于单行省略 注：必须为块级元素，不然表格中会影响到其他列 例如：.p1{ text-overflow: ellipsis; white-space: nowrap; width: 500px;
2016-12-21 13:58:53
487
Vue2.0压缩版
2018-10-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人