前端
劲枫
有所选择,有所坚持~
展开
-
使用ES新特性过滤JS对象中不需要的属性
Object.fromEntries([['name', '张三'], ['age', 18]]): 就是把键值对列表转换为对象,这个键值对就是Object.entries()生成的。个人理解:就是二维数组,里面的每一项都是由对象的key、value组成的数组。// [['name', '张三'], ['age', 18]]:返回一个数组,成员是参数对象自身所有可遍历属性的键值对数组。接下来介绍另一种解决方案,相对来说更加的便捷且稳定。// {name: '张三', age: 18}name: '张三',原创 2022-10-13 16:42:51 · 1103 阅读 · 0 评论 -
js运算精度丢失问题处理
/** * 将科学计数法的数字转为字符串 * 说明:运算精度丢失方法中处理数字的时候,如果出现科学计数法,就会导致结果出错 * 4.496794759834739e-9 ==> 0.000000004496794759834739 * 4.496794759834739e+9 ==> 4496794759.834739 * @param num */var toNonExponential = (num)=> { if(num == null) { .原创 2021-11-02 16:19:06 · 575 阅读 · 0 评论 -
达夫设备(Duff‘s Device)
众所周知,过多的循环会带来一定的性能开销,增加总体运行时间。而减少迭代次数能够优化性能。”Duff’s Device” 作为广为人知的一种限制循环迭代次数的模式,还是有必要了解的。下面贴出了几个js版本的Duff's Device实现方式function duff(items) { var len = items.length, //缓存局部变量 iterations = Math.floor(len / 8), //商数,存放duff迭代次数 startAt = len .原创 2021-03-22 12:19:32 · 494 阅读 · 0 评论 -
小程序/H5固定单页面展示(长短屏自适应,不出现滚动条)的适配方案
场景描述:在开发小程序、H5中,可能存在需要在各种长短屏下都一个页面展示内容,不出现滚动条的场景。我们知道宽度的话按照设计稿750计算,大家基本没啥问题,H5就是750rem,小程序用750rpx,对吧,什么屏幕都能适配全屏。但是高度怎么办呢?方案介绍:此种方案中,必须有些可缩放元素存在:一张图片;其他部分如:底部按钮、底部文字、底部介绍等元素不能缩放。此时可以利用750/windowWidth计算一个比率。然后对于适配图片的处理方式是,1、计算设计稿中,不可缩放元素的高度;2.原创 2021-03-11 18:04:43 · 2233 阅读 · 0 评论 -
将UTC时区转成本地时区
function datetimecut(UTCDateString) { if (!UTCDateString) { return '-'; } function formatFunc(str) { return str > 9 ? str : '0' + str } var date2 = new Date(UTCDateString); var year = date2.getFullYear(); var mon = formatFunc(da.原创 2020-09-14 10:49:03 · 338 阅读 · 0 评论 -
JS获取路由参数
function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return decodeURI(r[2]); return null; } let ADTAG = getQuery...原创 2020-08-06 16:49:26 · 742 阅读 · 0 评论 -
js、vue事件捕获、事件冒泡说明与使用
概念理解1、事件捕获(event capturing)事件从顶层(window对象)开始触发到被点击的精确元素事件触发的过程2、事件冒泡事件从点击元素事件触发到顶层对象事件触发的顺序触发过程3、流程图说明简单的来说,捕获:一个自顶层元素向最里层元素(HTML代码为包裹的形式的)执行事件的方式;冒泡:从最里层元素向最外层元素触发事件。代码说明1、普通方式,默认冒泡,先执行里层,再执行外层2、阻止冒泡e.stopPropagation(),事件不再向上传递..原创 2020-05-27 21:00:48 · 1613 阅读 · 0 评论 -
phpstorm在原有的jade项目上出现Invalid indentation, you can use tabs or spaces but not both
由于接受他人项目需要直接在原来的模板上新建东西 。但是由于编辑器不同的原因,原有项目使用的tab,我这边之前tab是按照缩进四格做的。导致出错。首先查看下自己的编辑器是否也是如此,如下可以看到,我在“测试”那里使用的tab但是出现四格空格修复,如下全部用tab缩进...原创 2020-04-15 10:45:49 · 371 阅读 · 0 评论 -
通过contentWindow操作iframe的简单demo
页面A;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>AAAA</title></head><body><a href="javascript:testclick();"&g...原创 2020-03-17 15:21:23 · 498 阅读 · 1 评论 -
小程序中rpx和px相互转换方式
当前有个项目页面中弹框是用固定定位做的,需要利用top值让其居中。那么就需要计算top具体是多少;当然计算方式是比较简单的:top:(窗口高度-弹框高度)/ 2那么弹框高度使用rpx设置的,然而通过wx.getSystemInfoSync.windowHeight获取的窗口高度是px值。这就需要先将窗口高度转换成rpx值才行。那么需要下计算转换比率。其实在小程序中还是比较简...原创 2020-03-13 14:24:51 · 4511 阅读 · 0 评论 -
拿来即用的网页倒计时组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>倒计时组件by TCF_JingFeng</title></head><style> .listtime { wid...原创 2020-01-11 14:24:31 · 462 阅读 · 1 评论 -
零基础抓包教程--5分钟教你利用Whistle进行移动端抓包
一、环境说明1、电脑window,mac2、手机ios或andorid3、chrome浏览器二、开始搭建1、电脑、手机连到同一个局域网环境2、电脑安装whistlewindows10 通过管理员权限打开命令行 mac 打开terminal3、安装npm和node环境(这里不会的自行google或百度)4、安装whistlenpm install -g wh...原创 2019-12-20 15:14:48 · 2262 阅读 · 0 评论 -
H5横竖屏适配代码,强制横屏
1、强制横屏代码,检测用户屏幕方向,竖屏时提示用户将屏幕翻转<style> @media all and (orientation: portrait) { html, body { position: relative; overflow: hidden; width: 100%;...原创 2019-11-14 19:28:12 · 6425 阅读 · 1 评论 -
CSS3简单实现伪3D,分层级图片跟随鼠标移动而移动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .box1 { width: 100px; h...原创 2019-10-15 22:00:44 · 693 阅读 · 0 评论 -
css隐藏元素display:none,opacity:0;filter:alpha(opacity=0-100;,visibility:hidden的区别
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。我们一般有三种方式:display:none, opacity:0;filter:alpha(opacity=0-100;, visibility:hidden。但这三种方式有何区别?一、三种隐藏方式的区别1、display:none(1)、浏览器不会生成属性为displa...转载 2018-05-10 15:40:06 · 562 阅读 · 0 评论 -
基于Jquery的(可视区域,向上滚动向下滚动两种)图片懒加载
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding:原创 2018-09-26 15:32:55 · 624 阅读 · 0 评论 -
原生JS的(可视区域,向上滚动向下滚动两种)图片懒加载
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding:原创 2018-09-26 15:50:39 · 1429 阅读 · 0 评论 -
谷歌浏览器ERR_UNSAFE_PORT问题,87端口限制导致的网站访问受限事故分析
1、问题描述 采用linux+apache+mysql+php搭建网站,做为自己网站开发的测试服务器,我将不同网站从80端口开始部署,直到一个网站部署到87端口发生了事故。 由于这个网站比较简单,本来放到87端口后,采用360极速浏览器访问测试了一下,完全没有问题,于是就没有再做其他浏览器测试,直到后来有一天公司发了一台mac,试想着用Safari浏览器访问看看...原创 2018-04-25 11:13:43 · 5843 阅读 · 0 评论 -
javascript获取指定范围的随机数
/** * 获取指定范围内的随机数 * @param start 起点 * @param end 终点 * @returns {number} */function random(start, end){ var length = end-start+1; return Math.floor(Math.random() * length + start);}...原创 2018-11-21 15:20:05 · 334 阅读 · 0 评论 -
Chorme浏览器中for循环里面console.log打印二维数组,展开后数据全部一样,出现value below was evaluated just now问题
前言之前在做蚁群算法研究时,遇到数据爆炸,想打印查看js数据极限点,于是设置迭代次数为5,预期是每次迭代就打印一次信息数矩阵,5次迭代打印5组不同的二维数组,好来查看每次循环中信息素的变化情况。但是console.log出来的所有数据是一样的,点击右上角的感叹号,出现Value below was evaluated just now。与预期不符。(说明:开始猜想for循环打印的东西都一样...原创 2018-11-22 14:59:02 · 13266 阅读 · 1 评论 -
Js中克隆对象,Js中Sleep休眠
//克隆一function cloneObj(obj) { var str, newobj = obj.constructor === Array ? [] : {}; if (typeof obj !== 'object') { return; } else if (window.JSON) {//mpvue不行就用JSON str =...原创 2018-11-22 15:03:25 · 215 阅读 · 0 评论 -
vue中无缝轮播简单实现
<template> <div> <div class="slider-stage"> <ul ref='sli' class="slider"> <li> <img src="stat原创 2019-01-21 13:17:07 · 5544 阅读 · 1 评论 -
CSS3简单实现360deg旋转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .stage{原创 2019-01-27 13:37:46 · 2629 阅读 · 0 评论 -
PHPStorm配置ESlint检查代码
1、首先启动ESLint,这样编辑器就可以直接提示哪里有问题2、ALT+Ctrl+L是PHPstorm自带的快速格式化的缩进量,我们需要配置eslint格式化快捷键。如图添加快捷键ALT+L即可,以后就可以用Alt+L格式化成符合eslint规则的格式代码。...原创 2019-01-27 16:33:15 · 5320 阅读 · 0 评论 -
apply()和call()的区别及应用
一直都没太明白apply()与call()的具体使用原理,今日闲来无事,决定好好研究一番。JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法,它们的语法分别为:/* apply()方法 */function.apply(thisObj[, argArray])function.call(thisObj[, arg1[, arg2[, ...原创 2019-01-29 13:54:19 · 337 阅读 · 0 评论 -
position:fixed的top:0与bottom:0配合的妙用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div cla原创 2019-02-08 18:16:40 · 3646 阅读 · 0 评论 -
关于mpvue使用Vant组件库的Field输入框组件自动唤起手机软键盘问题分析
前言:问题场景:需要在本页面点击一个div,动态show一个遮罩层,遮罩层里面有一个输入框,输入框使用Vant的Field组件写的。过程中并没有页面跳转。(本问题场景出现在mpvue中,在vue、H5等其他场景同样可以借鉴。)解决方法:在template里面引入对应组件(本文用的Vant,可以用原生Input,或者其他组件)在data()里面设置聚焦初始为false...原创 2019-05-04 02:19:11 · 10906 阅读 · 2 评论 -
服务器通过pm2和nginx启动vue项目
1、niginx配置cd /etc/nginx/conf.dvim invoiceadmin-8081.conf2、关于vue项目通过nginx部署远程服务器访问显示Invalid Host header问题通过在webpack.dev.conf下添加disableHostCheck: true3、使用pm管理进程pm2 start npm -- run de...原创 2019-05-10 22:18:36 · 1352 阅读 · 0 评论 -
absolute 元素完全居中的两种方法
方法一:(不能微调)position:absolute;left:0; right:0; top:0;bottom:0;margin:auto;方法二:(可微调)position:absolute;top:50%; left:50%;margin-top:-10px;(元素高度的一半)margin-left:-10px;(元素宽度的一半)...原创 2019-08-09 13:24:18 · 3932 阅读 · 0 评论 -
js图片(加载已经滚动的区域的图片)懒加载的实现方法
这种方法,会加载已经滚动区域的所有图片,比如进入页面就到了底部,那么整个页面的图片都会加载。区别于JS实现可视区域懒加载 、Jquery实现可是区域懒加载<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&原创 2018-09-26 13:39:58 · 1079 阅读 · 0 评论 -
【前端面试】前端相关
1、按F5刷新和使用url再回车访问,有什么区别?使用F5刷新的情况下,浏览器会发送一致性验证,去服务端验证是否使用缓存。采用回车则表示直接应用缓存,不去服务端验证。...原创 2018-09-26 13:38:26 · 441 阅读 · 0 评论 -
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全如图:解决办法1:xAxis.axisLabel 属性axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置。(当然yAxis也是一样有这个属性的) axisLabel: { interval:0, rotate:40 } 以上就可解决x轴文字显示不全并将文字倾斜。如图...转载 2018-08-07 16:29:44 · 512 阅读 · 0 评论 -
实测可行的监听div里面的内容变化的方法
console.log($("#notebook_name").text());里面的内容按照网速不同页面加载速度,导致有的时候页面加载就用内容,有的时候却没有。因此需要监听里面的内容是否变化。用如下的方法 $("#notebook_name").bind('DOMNodeInserted', function (e) {console.log("变化了")});jupyter noteboo...原创 2018-05-08 10:01:13 · 4966 阅读 · 4 评论 -
基础版本hui和bootstrap的折叠菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="http://lib.baomitu.com/twitter-b原创 2018-05-08 16:24:58 · 1024 阅读 · 0 评论 -
Jquery.form.js与ajax方式
最开始,我们使用ajax提交表单,统一采用的是jquery的ajax函数,如下:要么绑定函数到按钮的onclick事件上执行$.ajax,要么在submit()中,使用$.ajax执行。如下:[javascript] view plain copy$(function(){ $('#myForm').submit(function(){ $.ajax({ ...转载 2018-05-21 11:52:25 · 843 阅读 · 0 评论 -
LiveReload for mac 软件下载
下载地址:LiveReload for macLiveReload for mac是一款跨平台的软件,在 OS X、Windows 以及 Linux 下都能使用。运行LiveReload for mac后载入网站源代码所在的文件夹,这样它就会开始识别。软件特色 而要让 LiveReload 自动刷新浏览器,则有两种方法,一种是在页面源代码中插入指定的代码,另外一种是安装浏览器扩展操作方法 方法...原创 2018-05-21 10:26:03 · 519 阅读 · 0 评论 -
CSS3选择器:nth-child和:nth-of-type之间的差异
一、深呼吸,直接内容:nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使用这两类选择器。先看一个简单的实例,首先是HTML部分:<section> <p>我是第1个p标签</p> <p>我是第2个p标签<...转载 2018-05-19 16:39:51 · 651 阅读 · 0 评论 -
animate step()下拉列表右三角动画效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="http://lib.baomitu.com/twitter-b原创 2018-04-27 15:48:23 · 400 阅读 · 0 评论 -
基于jquery的监听某个元素高度变化resize事件
//一个jquery的插件,用于监听元素宽度高度变化,调用方式: //$("classname").bind('resize',function(){ //callback //... //... //}); (function ($, window, undefined) { var...原创 2018-05-10 12:05:22 · 18593 阅读 · 4 评论 -
利用盒模型让元素在浏览器中垂直水平居中,改变浏览器窗口大小依然居中
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{ m原创 2018-05-03 16:15:05 · 867 阅读 · 0 评论