前端
我的大白菜呢
这个作者很懒,什么都没留下…
展开
-
每天一道前端面试题:1PX、盒模型
1px 问题:原因:2 倍图的 1px 其实要实现的是 0.5px,直接写 1px 会偏粗,但写 0.5 又会有兼容性问题解决:写成 1px,然后采用缩放的形式,避免直接写小数带来的兼容性问题。比如 1px 的 border,先扩大 200%(border 不会被扩大)再缩放 0.5,效果就是元素大小上没变,border 粗细变成了 0.5。注意:如果用css直接设置边框为0.5px,这种情况下iPhone可以正常显示,但是android下几乎所有的浏览器都会把0.5识别为0,即无边框状态,所以原创 2021-04-26 14:51:56 · 363 阅读 · 0 评论 -
LeetCode367: 有效的完全平方数(js)(二分查找)
题目:给定一个正整数num,编写一个函数,如果num是一个完全平方数,则返回 True,否则返回 False。说明:不要使用任何内置的库函数,如sqrt。示例 1:输入:16输出:True示例 2:输入:14输出:False解决:/* * @lc app=leetcode.cn id=367 lang=javascript * * [367] 有效的完全平方数 */// @lc code=start/** * @param {number}...原创 2021-01-27 18:32:25 · 200 阅读 · 0 评论 -
原生video的使用坑
1 背景原生video标签的使用1 预加载进入主内容有一个加载页。技术实现视频预加载使用video标签的preload属性。将preload属性设置为metadata表示用户不想马上加载视频,但是需要预先获取其元数据(尺寸,轨道列表,时长等)。 请注意,从 Chrome 64 开始, preload 的默认值是 metadata(以前是 auto )。<video id="video" preload="metadata" src="file.mp4" controls&原创 2020-11-23 18:37:42 · 3221 阅读 · 0 评论 -
ios h5 移动端 关于监测切换程序到后台或息屏事件和visibilitychange的使用
document.addEventListener("visibilitychange", () => { if (document.hidden) { audio.pause() video.pause() } else { setTimeout(() => { bgMusic.play() video.play() }, 2000) }});需求:当我们页面上正在播放视频或者播放背.转载 2020-09-29 17:34:52 · 1587 阅读 · 0 评论 -
解决ios回退后不刷新的问题
window.addEventListener("popstate", () => { window.location.reload(true); }, false); const state = { title : "", url : "#" }; window.history.replaceState(state, "", "#");放在当前...原创 2020-09-28 20:13:41 · 270 阅读 · 0 评论 -
js去掉头尾空格、括号
去掉头尾空格trimSpace = (str: string) => { const reg = /^\s+|\s+$/g; return str.replace(reg, ""); }去掉括号中的内容trimBrackets = (str: string) => { const reg = /\([^\)]*\)/g; ret...原创 2020-04-20 16:31:13 · 2479 阅读 · 0 评论 -
react 中的input 只读属性
正确的两种写法:一、HTML中 <input type="text" className="lg-input-o" autoComplete="off" plac...原创 2019-12-17 10:36:17 · 1872 阅读 · 0 评论 -
采坑记--fetch 请求header与body配置及常用问题
fetch 请求-header与body配置及常用问题引入说道fetch就不得不提XMLHttpRequest了,XHR在发送web请求时需要开发者配置相关请求信息和成功后的回调,尽管开发者只关心请求成功后的业务处理,但是也要配置其他繁琐内容,导致配置和调用比较混乱,也不符合关注分离的原则;fetch的出现正是为了解决XHR存在的这些问题。例如下面代码:fetch(url).then...原创 2019-11-07 17:06:15 · 16266 阅读 · 0 评论 -
React:children解析(map使用)
问题:在使用children过程中发现children不包含map方法,但是类型验证表明children就是array类型解决:1、由于在props中写明children时一个React.ReactNode类型(此类型代表children可以是任何类型),所以即使类型检查为array类型,在使用children.map()的时候认为children依旧时全类型,不包含map方法。2、这...原创 2019-09-25 18:33:43 · 2393 阅读 · 0 评论 -
React:父组件数据实时更新,子组件相应更新
目标:父组件发送请求后,根据返回数据实时跟新部分state,子组件实时检测跟随跟新实现思路:利用react的componentWillReceiveProps方法案例:子组件中增加componentWillReceiveProps(nextProps:any){ this.setState({ reuploadFlag: nextProps.r...原创 2019-09-24 18:36:09 · 6412 阅读 · 1 评论 -
React:子组件向父组件传值
目标:子组件中发送请求后获取数据传递给父组件展示实现思想:子组件通过props控制父组件的方法触发,将子组件中的值通过此方法传给父组件。案例:父组件Authentication:import React from "react";import "./style.scss";import AuthenticationItem from './Authentication...原创 2019-09-24 18:28:10 · 173 阅读 · 0 评论 -
ES6:Generator 函数和迭代器(Iterator)
Generator 函数ES6提供的一种异步编程解决方案。通过yield标识位和next()方法调用,实现函数的分段执行。function* helloGenerator() { yield "hello"; yield "generator"; return; } var h = helloGenerator(); conso...转载 2019-07-08 17:44:11 · 186 阅读 · 0 评论 -
npm报错:code ELIFECYCLE \ A complete log of this run can be found in:...
报错现象:在npm start时,出现错误如下:npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! ******@0.1.0 start: `rocketact-scripts start`npm ERR! Exit status 1npm ERR!npm ERR! Failed at ******@0.1.0 start scri...原创 2019-07-03 12:29:33 · 1116 阅读 · 0 评论 -
ES6:通过实现读文件功能理解Promise、Generator函数、async函数区别
1、Promiseconst fs = require('fs');//nodejs的内置模块,由于读取文件一般是由异步执行,这样不会阻塞别的功能代码执行//把fs封装成一个Promise对象,然后在下面返回数据输出const read = function(fileName) { return new Promise((resolve ,reject ) => { ...原创 2019-07-08 20:41:26 · 203 阅读 · 0 评论 -
js的正则表达式:判断全部为数字,全部为字母
1、判断字符串全部为数字,(0-9)之间(/^[0-9]+$/.test(element))2、判断字符串全部为字母(/^[a-zA-Z]+$/.test(element))注:1,2结果用false和true表示原创 2019-07-03 20:34:06 · 25559 阅读 · 0 评论 -
Promise学习:promise.all()方法
例子:Promise.all([1,2,3]).then( all => { console.log('1: ',all); return Promise.all([function(){ console.log("ooxx") },"xxoo",false])}).then( all => { con...原创 2019-07-04 15:15:19 · 546 阅读 · 0 评论 -
Promise学习:Promise.race()用法
如下demolet P1 = new Promise( resolve => { setInterval( () => { resolve("I\'m P1"); },1000)});let P2 = new Promise( resolve => { setInterval( () => { resol...原创 2019-07-05 14:55:34 · 3565 阅读 · 0 评论 -
一句话分清 NPM install -save 和 -save-dev
NPM install -save 和 -save-dev 傻傻分不清本文原文地址:https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html回顾 npm install 命令最近在写Node程序的时候,突然对 npm install 的-save和-save-dev 这两个参数的使用比较混乱。其实博主在这之前对这两个参...转载 2019-08-08 11:29:00 · 793 阅读 · 0 评论 -
react项目中配置mock数据
最近在项目中需要数据测试,为了方便,直接引入mockjs。首先使用npm安装mockjs,npm install mockjs然后在api文件夹中创建index.ts文件,数据随便填,可以参考mock.js,内容如下:其中index.ts配置var Mock = require('mockjs');var data = Mock.mock('/data',{ '...原创 2019-09-04 15:22:17 · 2445 阅读 · 0 评论 -
CSS:loading动画,图片自身旋转
css文件 .icon { margin: 32px auto 0px; width: 22px; ...原创 2019-09-19 14:05:25 · 1274 阅读 · 0 评论 -
CSS:带三角(实心,边线)提示框,提示文案
css文件,在长方形提示框的div上添加after和before样式 .r-note:before { content:""; width: 0; height: 0; ...原创 2019-09-19 14:13:16 · 436 阅读 · 0 评论 -
5分钟学会React (一个对于当前流行的JavaScript库的快速梳理)
5分钟学会React(一个对于当前流行的JavaScript库的快速梳理)这个说明通过一个非常简单的应用给你一个对于React.js的基本了解,我会省略非重点的内容。当你开始阅读这篇文章,你可以检查Scrimba网站上的免费React课程,那里你可以通过48个视频学习这个库。体制当开始学习React的时候,你应该尽可能的使用最简单的模板,一个使用script标签导入React和...翻译 2019-01-30 15:28:32 · 190 阅读 · 0 评论