Namefhf的博客

原创 移动端1px

方法一：利用 ::after + transformdiv::after { display: block; content: ''; border: 1px solid #ccc; transform: scaleY(0.5);}复制代码方法二：利用 box-shadowdiv: { box-shadow: 0 0.5px 0 0 #fff;}

转载 ?可选链运算符

业务代码中经常会遇到这样的情况，a对象有个属性b, b也是一个对象有个属性c,我们需要访问c，经常会写成 a.b.c，但是如果f不存在时，就会出错。const a = { b: { c: 123, }}console.log(a.b.c); // 123;console.log(a.f.c); // f不存在所以会报错复制代码ECMAScript2020定义可选链运算符解决该问题，通过在.之前添加一个?将键名变成可选let person = {};

转载 ??合并空运算符

假设变量a不存在，我们希望给系统一个默认值，一般我们会使用||运算符。但是在javascript中空字符串，0，false都会执行||运算符，所以ECMAScript2020引入合并空运算符解决该问题，只允许在值为null或未定义时使用默认值。const name = '';console.log(name || 'yd'); // yd;console.log(name ?? 'yd'); // '';作者：隐冬链接：https://juejin.cn/post/68981684955

原创 display opacity visibility

display-none: 元素不会占用空间，在页面中不显示，子元素也不会显示。opacity-0: 元素透明度将为0，但元素仍然存在，绑定的事件仍旧有效仍可触发执行。visibility-hidden：元素隐藏，但元素仍旧存在，占用空间，页面中无法触发该元素的事件。...

转载 解决ios audio无法自动播放、循环播放的问题

ios手机在使用audio或者video播放的时候，个别机型无法实现自动播放，可使用下面的代码hack。// 解决ios audio无法自动播放、循环播放的问题var music = document.getElementById('video');var state = 0;document.addEventListener('touchstart', function(){ if(state==0){ music.play(); state=1;

转载 滚动条

div::-webkit-scrollbar { display: none;}

原创 IOS手机容器滚动条滑动不流畅

overflow: auto;-webkit-overflow-scrolling: touch;

转载 css文本超出

1. css一行文本超出...overflow: hidden;text-overflow:ellipsis;white-space: nowrap;2.多行文本超出显示...display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;作者：隐冬链接：https://juejin.cn/post/6898168495591292942来源：掘金著作权归

原创 centos安装nodejs

1. 安装nvmcurl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash重新连接shell2. 查看是否安装成功command -v nvm3. 查看node可安装版本nvm list-remote / nvm ls-remote4. 安装nodejsnvm install(你想要安装的版本，如nvm install v6.9.5)5. 切换nodejs版本.

原创 变量提升

转载 npm 查看源 换源

查看源npm config get registry// 或npm config list修改源# 默认源npm config set registry https://registry.npmjs.org# https -> http，这样网速就会好很多npm config set registry http://registry.npmjs.org# 如果还不能下载，就切换成淘宝源npm config set registry https://regi

原创 项目中安装和配置webpack

配置自动打包配置html-webpack-plugin配置加载器配置postCSS自动添加css的兼容前缀

原创 Nodejs使用es6的模块化

npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/node npm i --save @babel/polyfill 项目根目录创建文件babel.config.js babel.config.js文件内容const presets =[ ["@babel/env",{ targets...

原创 vue使用axios

1.npm i axios2.main.js文件中import axios from 'axios'Vue.prototype.$axios = axios跨域问题编辑vue.config.jsmodule.exports = { devServer: { proxy: { '/api': {//发请求时用/api来代替http://39.97.3...

原创 vue-cli 使用px2rem插件

npm install --save lib-flexible main.js引入import'lib-flexible/flexible'npm install --save postcss-px2rem修改vue.config.jsmodule.exports = { css: { loaderOptions: { stylus: {...

原创 vue简单的组件传值

父传子子组件代码：<template> <div> {{text}}----{{msg}}</div></template><script>export default { data() { return { text: "子组件" }; }, props:['m...

原创 控制文本行数

.divele {font-size: 28rpx;display: -webkit-box;overflow: hidden;white-space: normal;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 2;/*设置p元素最大2行，父元素需填写宽度*/-webkit-b...

原创 使用mongodb

1.开启服务在执行mongod命令的根目录创建data文件夹在data文件夹内再创建db文件夹运行mongod命令2.连接数据库新开一个命令行工具运行mongo命令3.基本命令show dbs 查看所有数据库db 查看当前操作的数据库（默认为test数据库）use数据库名称 切换到指定数据库(没有则自动创建该数据库)插入数据：db.stu...

原创 导航栏动态显示隐藏

js/* Header Sticky ========================================================*/ $(window).on('scroll',function() { if ($(this).scrollTop() >170){ $('.heade...

原创 owl

$('.home-slides').owlCarousel({items:1,loop:true,autoplay:true,nav:true,responsiveClass:true,dots:false,autoplayHoverPause:true,mouseDrag:true,animateOut: 'fadeOut',navText: ["&l...

转载 如何居中一个元素（终结版）

本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下：一、水平居中1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。.parent{//在父容器设置 text-align:...

转载 HTML行内元素、块状元素、行内块状元素的区别

行内元素特征：(1)设置宽高无效　　　　　　　(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间　　　　　　　(3)不会自动进行换行行内元素特征：(1)设置宽高无效　　　　　　　(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间　　　　　　　(3)不会自动进行换行行内块状元素特征：(...

转载 html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

html中的标签元素大体被分为三种不同的类型：块级元素、内联元素(又叫行内元素)和内联块级元素。块级元素特点：1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（霸道，一个块级元素独占一行）2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）常用的块状元素有：<div>、<...

原创 css绘制梯形 、直角三角形

改老外的模板是看到了这个效果看其源代码写了个demo完整代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device

转载 js禁用带有二级菜单的导航栏的a标签的跳转功能

//Disable dropdown parent link$('.main-header .navigation li.dropdown > a).on('click', function(e) {e.preventDefault();})；

转载 HTML的footer置于页面最底部的js方法

&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; html,body{margin:0;padding: 0;} .header{background-color: #ffe4c4;} .main{background-color: #bdb76b;} .footer{bac...

转载 js返回顶部

//返回顶部 function gotoTop(min_height){ //预定义返回顶部的html代码，它的css样式默认为不显示 var gotoTop_html = '&lt;div id="gotoTop"&gt;返回顶部&lt;/div&gt;'; //将返回顶部的html代码插入页面上id为page的元素的末尾 $("bo...

转载 vscode 缩进

vscode缩进快捷键：               选中文本；               Ctrl  +  [      和   Ctrl  +  ]     实现文本的向左移动或者向右移动；vscode代码对齐快捷键：              选中文本；               Shift  +  Alt  + F     实现代码的对齐；-------------...

转载 前端面试总结篇（初级）

1. 你熟悉的es6 let、const、var的使用区别 let: 相当于var,用于声明一个变量,在块级作用域有效(可解决for循环问题);不能重复声明;不会变量提升;不会预处理 const: 用于定义一个常量，不能修改，其他特点等同于let，用于保存不用改变的数据 Map与普通对象的区别 JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构...

转载 form表单提交后不刷新不跳转的实现方法

由于制作用户的注册界面，发现每当form表单提交后，都会刷新一下，导致填写的数据丢失，为了解决这一问题专门，百度了一下。还真找到了一种form表单提交后，不刷新的方法，先转过来，以后备用。代码如下：&lt;html&gt; &lt;body&gt; &lt;form action="" method="post" target="nm_iframe"&gt; ..

转载 css选择器

选择器例子例子描述CSS.class.intro选择 class="intro" 的所有元素。1#id#firstname选择 id="firstname" 的所有元素。1**选择所有元素。2elementp选择所有 &lt;p&gt; 元素。1element,elementdiv,p选择所有 &lt;div&gt; 元素和所有 &lt;p&gt; 元素。1element elementdiv p...

转载 clear:both

&lt;div style="border:2px solid red;"&gt; &lt;div style="float:left;width:80px;height:80px;border:1px solid blue;"&gt;TEST DIV&lt;/div&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt;