![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发
Weby-Weby
前端码农,也写写cocoscreator游戏,研究下新技术什么的,回复消息可能较慢,敬请谅解。
展开
-
谷歌浏览器关闭后未清除cookie
新版谷歌浏览器在打开了以下两种设置的任何一种时,关闭浏览器都不会清除cookie:把这两项关掉之后,关闭浏览器,cookie就会正常清除。原创 2021-07-07 13:59:33 · 3365 阅读 · 1 评论 -
element表单动态控制是否必填
问题:有四种发票类型,当类型为纸质专票时,可以不输入校验码,其他三种情况都必须输入校验码。解决方式:动态控制表单的rules代码:... <!-- 纸质专票无需输入校验码--> <el-form-item label="校验码后六位" prop="checkCode" :rules="invoiceInfo.invoiceType == 2 ? [{r原创 2021-03-23 09:52:08 · 5067 阅读 · 1 评论 -
moment获取本月、上个月、近三个月时间段
代码如下:// 本月this.startEndTime = [moment().startOf('month').format('YYYY-MM-DD'), moment().endOf('month').format('YYYY-MM-DD')];// 上个月this.startEndTime = [moment(new Date()).subtract(1,'months').startOf('month').format('YYYY-MM-DD'),moment(new Date()).s原创 2021-02-24 10:30:57 · 10418 阅读 · 0 评论 -
async 和 await 小demo
阮一峰老师的博客:http://www.ruanyifeng.com/blog/2015/05/async.html菜鸟教程:https://www.runoob.com/w3cnote/es6-async.html我们需要把第一个promise返回的结果,用在第二个promise里面:常规写法: /** * 常规写法 */ function getData1(num) { return new Promise(r=>{原创 2020-12-03 16:03:52 · 131 阅读 · 0 评论 -
JQuery实现 input点击就选中其内容
需求:正常情况下,用户点击输入框,光标会出现在内容的最后面:要实现的效果就是,用户点击输入框,自动给他选中所有内容:jq实现代码:$(':text').focus(function(){ $(this).one('mouseup', function(event){ event.preventDefault(); }).select();});就这样页面上所有的input都有这个效果了。...原创 2020-11-04 14:12:14 · 2666 阅读 · 0 评论 -
获取剪切板中的图片信息进行预览或上传
需求:用户用截图工具截的图,或者右键点击复制图片之后,可以直接在页面上粘贴,进行预览并上传。代码:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi原创 2020-08-17 09:20:21 · 957 阅读 · 0 评论 -
js生成26个字母
应用场景:答题、问卷等需要展示选项的情况下,直接用数组角标取字母。代码如下: var wordArr = []; for (var i = 65; i < 90; i++) { wordArr.push(String.fromCharCode(i)) }效果:...原创 2020-04-09 21:23:07 · 2134 阅读 · 2 评论 -
部分机型下number表单的坑
问题发生:最近有个h5嵌在app内部的项目,里面涉及到表单填写,上线后,有位iPhone X 的客户反映东西都填了,但是按钮还是灰的。我看了下,他有些number表单,居然填进了中文?!因为老王我写校验都是用的angular自带的,所以如果number表单内是无效内容,自然等于空,也就自然点不了提交。解决办法: <input id="totalIncome" type=...原创 2020-02-26 16:58:38 · 147 阅读 · 0 评论 -
vue中的computed 和 methods
不同点:1,computed是属性调用,而methods是函数调用2,computed带有缓存功能,而methods不是我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。可以说使用 computed 性能会更好,...原创 2019-11-29 13:14:01 · 1788 阅读 · 0 评论 -
ES6中的Set()和Array.from()
首先,观察一个数组去重的方法:function dedupe(array) { return Array.from(new Set(array));}在控制台执行:然后我们来分析这个方法。首先是new Set(array):官方介绍:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/G...原创 2019-11-11 10:28:02 · 888 阅读 · 0 评论 -
研究一下Array.prototype.slice.call(arguments)
Array.prototype.slice.call()将函数的实际参数转换成数组的方法例子一: function test() { // 截取参数的一部分,第二个参数空则不截取,直接返回参数 数组 var arg = Array.prototype.slice.call(arguments, 1); return arg; ...原创 2019-10-22 10:31:33 · 127 阅读 · 0 评论 -
动态添加svg动画animate
代码如下:html:<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <circle cx="50" cy="50" r="15" fill="black" stroke="black" stroke-width="1"> </circle>&l...原创 2019-10-21 10:07:21 · 2905 阅读 · 1 评论 -
使用$cookies存储客户登录信息
使用$cookies可以设置存储时间;引入:https://code.angularjs.org/1.6.9/angular.min.jshttps://code.angularjs.org/1.6.9/angular-cookies.min.jsvar app = angular.module("myApp", ['ngCookies']);代码: $scope....原创 2018-11-01 16:25:26 · 1341 阅读 · 0 评论 -
Box2d碰撞检测
项目地址:https://dev.tencent.com/u/simplyhabit/p/H5GameDemo/git/tree/master/Box2dlufylegend-1.10.1.min.js:地址:https://dev.tencent.com/u/simplyhabit/p/H5GameDemo/git/blob/master/js/lufylegend-1.10.1...原创 2019-01-30 09:26:28 · 829 阅读 · 0 评论 -
js prototype原型理解 Demo (1)
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>prototype</title></head><body><原创 2019-02-15 13:38:48 · 210 阅读 · 0 评论 -
微信小程序使用正则表达式替换HTML标签
小程序中直接使用正则会报错,需要用它自身提供的方法:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/06datatype.html代码:其中 f 即传入的富文本内容,font为替换之后的内容 let reg = getRegExp("<[^>]+>", "g")...原创 2019-01-07 16:00:30 · 6313 阅读 · 1 评论 -
小程序中的富文本处理
目前网站上的文章资讯等都会以富文本形式存储,而小程序本身是不具有转换富文本内容功能的,所以这里我们需要用到一个插件:WxParsegithub及官方文档:https://github.com/icindy/wxParse使用方式:wxml:<import src="../../wxParse/wxParse.wxml" /><template is="w...原创 2019-01-07 14:34:14 · 1851 阅读 · 0 评论 -
使用tree指令生成文件目录树
直接在命令行输入:tree /f > tree.txt即可生成当前目录树,例如:详细命令:-a 显示所有文件和目录。-A 使用ASNI绘图字符显示树状图而非以ASCII字符组合。-C 在文件和目录清单加上色彩,便于区分各种类型。-d 显示目录名称而非内容。-D 列出文件或目录的更改时间。-f 在每个文件或目录之前,显示完整的相对路径名称。-F 在执行文件...转载 2019-01-02 14:53:18 · 6629 阅读 · 0 评论 -
Angular富文本页面展示
过滤器:app.filter('showAsHtml',function ($sce) { return function (input) { return $sce.trustAsHtml(input); }})使用$sce的理由:angularjs中绑定的数据有html标签时,如<h1>,会被angularjs认为是不安全的而自动过滤...原创 2018-12-28 09:37:28 · 2198 阅读 · 0 评论 -
使用eruda真机环境下 查看打印控制台
在移动端真机调试页面的时候,没有打印控制台展示报错信息,使用alert调试起来比较麻烦,最近发现可以使用eruda真机环境下 查看打印控制台。方式如下:直接引入:<script src="//cdn.jsdelivr.net/npm/eruda"></script><script>eruda.init();</script>效...原创 2018-12-06 11:02:08 · 516 阅读 · 0 评论 -
--save 和 --save-dev 之间的区别
相同点:1,都会将依赖下载到当前项目的 node_modules 目录里;2,都会记录在packge.json里记录;不同点: --save-dev只是开发和打包时会用到的,但实际上线并不需要;(例如webpack)会在 devDependencies 里记录;npm install 的时候,也是下载这个里面记录的依赖文件;--save除了开发需要,实际上线...原创 2018-11-25 20:11:07 · 1566 阅读 · 0 评论 -
express + layui + angular +mysql 构建 后台管理系统
jade中文文档:http://www.nooong.com/docs/jade_chinese.htmlayui中文文档:https://www.layui.com/doc/element/layout.htmlangular1.x :http://www.runoob.com/angularjs/angularjs-tutorial.html一,jade +angular公用模...原创 2019-02-28 16:39:21 · 656 阅读 · 1 评论 -
js prototype原型理解 Demo (2)
代码:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, in原创 2019-02-26 14:17:48 · 137 阅读 · 0 评论 -
ES6基础之 iterator 迭代器
对于可迭代的数据解构,ES6在内部部署了一个[Symbol.iterator]属性,它是一个函数,执行后会返回iterator对象(也叫迭代器对象),而生存iterator对象[Symbol.iterator]属性叫iterator接口,有这个接口的数据结构即被视为可迭代的数组中的Symbol.iterator方法(iterator接口)默认部署在数组原型上:iterator迭代器是一...原创 2019-03-12 14:16:26 · 321 阅读 · 0 评论 -
Module '"C:/work/Angularjs/fa-demo/node_modules/rxjs/Rx"' has no exported member 'of'.
使用官方提供的导入 Observable 和 of 符号的方式,报错import { Observable, of } from 'rxjs';解决方式:分开导入import { Observable } from 'rxjs/Observable';import { of } from 'rxjs/observable/of';...原创 2018-05-07 17:26:08 · 380 阅读 · 0 评论 -
js表单中常用的正则表达式
//用户名正则,字母开头 + 数字/字母/下划线 $scope.unameRegx = "^[A-Za-z][A-Za-z1-9_-]{5,19}$"; //密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符 $scope.pwordRegx = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])...原创 2019-06-12 09:10:26 · 202 阅读 · 0 评论 -
使用react-router-dom管理React路由
下载:npm install react-router-dom --save--save和--sace-dev的区别看本人的另一篇博文:https://blog.csdn.net/qq_23521659/article/details/84501797问:为什么不用安装react-router?答:react-router-dom依赖react-router,所以我们使用np...原创 2019-06-17 11:04:31 · 764 阅读 · 0 评论 -
小程序 image跟view标签上下间隙问题分析处理
如图所示:image跟view标签上下产生了不该存在间隙。DOM结构如下:首先看看是不是margin在作祟:审查元素image标签:view标签:事实证明跟margin无关;但是我们发现,image的display是 inline-block;而inline元素默认是跟父级元素的baseline对齐,而baseline又和父级底边有一点间距,这个间隙是...原创 2019-04-29 12:08:19 · 2663 阅读 · 0 评论 -
js获取图片原始尺寸
js获取图片原始尺寸:代码:function getImageInfo(url, callback) { var img = new Image(); img.src = url; if (img.complete) { // 如果图片被缓存,则直接返回缓存数据 callback(img.width...原创 2019-04-22 16:12:19 · 6384 阅读 · 0 评论 -
微信小程序组件化开发
官方介绍:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html本次Demo目录结构:page下两个文件夹,一个components,用于存放组件;一个home,为我们的主要页面;components里面两个组件,一个banner,一个news,都是都过右键...原创 2019-04-12 16:28:40 · 561 阅读 · 0 评论 -
split、splice、slice 的区别
首先分别看看这三个:split:把一个字符串分割成字符串数组http://www.w3school.com.cn/js/jsref_split.asp例如: console.log('1-2-3'.split('-')); // 没有第二个参数 // ['1','2','3'] console.log('1-2-3'.split('-',2...原创 2019-04-11 14:28:03 · 423 阅读 · 0 评论 -
antimoderate 渐进式图片加载的 JavaScript 库
github:https://github.com/whackashoe/antimoderate因为遇到了一个页面加载很多超大图的开发场景,直接加载用户体验很差,加载的时候是这样的:用了antimoderate是这样的:当然,这张纯色图是我随便p的,也可以换成其他base64位的图片,例如当前图片的缩略图,因为我们后台没有处理,所以都统一用一张了。代码:...原创 2019-03-26 09:21:41 · 548 阅读 · 1 评论 -
一个例子了解 Array map() 和 parseInt()
代码:console.log(["1","2","3"].map(parseInt));测试结果:当然,这里换成Number(),或者换个方法用parseInt解析都能得到我们想要的效果:分析一波:Array map()参数一览:http://www.runoob.com/jsref/jsref-map.html我们测试一下:function中...原创 2019-03-18 09:56:08 · 387 阅读 · 0 评论 -
Angular自定义指令监听页面渲染
需求:ng-repeat遍历完成后,执行函数代码如下js(自定义指令):// 自定义监听页面渲染指令app.directive('repeatFinish',function () { return{ link:function (scope,element,attr) { // scope.index为当前遍历的位置 ...原创 2018-11-01 15:59:42 · 859 阅读 · 0 评论 -
使用decodeURIComponent解码字符
用url传参时,有中文,发现乱码了:console.log($scope.parseURL())这个字符类似于encodeURIComponent() 函数编码的 URI ;于是尝试使用decodeURIComponent解码: console.log(decodeURIComponent($scope.parseURL()));解码成功:...原创 2018-10-30 12:58:59 · 6495 阅读 · 0 评论 -
使用accept控制file上传文件类型
代码:<input type="file" id="listImg" name="listImg" accept="image/*" upload-file-a>实现的效果:其他写法: <input type="file" name="pic" id="pic" accept="image/gi原创 2018-10-24 15:58:39 · 3831 阅读 · 0 评论 -
两种常用遍历方式
一,jQuery each() 方法示例:$("button").click(function(){ $("li").each(function(){ alert($(this).text()) });});each() 方法规定为每个匹配元素规定运行的函数。提示:返回 false 可用于及早停止循环。开发环境:遍历多选框,获取选中的所有框的值: $("input:check...原创 2018-07-09 10:04:58 · 278 阅读 · 0 评论 -
Angularjs/javascript 常用日期处理
这样可以获取明天的日期// 设置显示当前日期 var today=new Date(); today.setDate(today.getDate()+1) $scope.entryEndTime=$filter('date')(today, 'yyyy-MM-dd');获取long型时间用来作比较:var today=new Date();cons...原创 2018-06-01 16:03:56 · 854 阅读 · 0 评论 -
js获取项目路径
使用js获取项目路径,以供全局使用。//js获取项目根路径,如: http://localhost:8083/uimcardprjfunction getRootPath(){ //获取当前网址,如: http://localhost:8083/uimcardprj/share/meun.jsp var curWwwPath=window.document.location.hr...原创 2018-06-08 09:14:41 · 3015 阅读 · 0 评论 -
angular中将long型时间转换成其他类型
一. ng表达式<!-- 表达式中使用 -->{{ dt1 | date:'yyyy-MM-dd HH:mm:ss' }}二. 控制器中使用//必须注入 $filter 模块app.controller("demoCtrl", ["$scope", "$filter", function($scope, $filter){ $scope.dt1 = new Date();...转载 2018-05-23 18:34:00 · 1465 阅读 · 0 评论