- 博客(32)
- 收藏
- 关注
原创 移动端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;}
2020-12-12 16:10:45
118
转载 ?可选链运算符
业务代码中经常会遇到这样的情况,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 = {};
2020-12-01 13:42:11
234
转载 ??合并空运算符
假设变量a不存在,我们希望给系统一个默认值,一般我们会使用||运算符。但是在javascript中空字符串,0,false都会执行||运算符,所以ECMAScript2020引入合并空运算符解决该问题,只允许在值为null或未定义时使用默认值。const name = '';console.log(name || 'yd'); // yd;console.log(name ?? 'yd'); // '';作者:隐冬链接:https://juejin.cn/post/68981684955
2020-12-01 13:40:34
172
原创 display opacity visibility
display-none: 元素不会占用空间,在页面中不显示,子元素也不会显示。opacity-0: 元素透明度将为0,但元素仍然存在,绑定的事件仍旧有效仍可触发执行。visibility-hidden:元素隐藏,但元素仍旧存在,占用空间,页面中无法触发该元素的事件。...
2020-12-01 13:31:32
141
转载 解决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;
2020-12-01 13:30:14
417
转载 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来源:掘金著作权归
2020-12-01 13:24:51
220
原创 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版本.
2020-11-16 09:27:12
157
转载 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
2020-09-23 08:35:57
487
原创 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...
2020-02-01 14:20:00
1039
原创 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...
2019-10-18 13:22:10
123
原创 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: {...
2019-10-18 11:36:50
227
原创 vue简单的组件传值
父传子子组件代码:<template> <div> {{text}}----{{msg}}</div></template><script>export default { data() { return { text: "子组件" }; }, props:['m...
2019-10-17 11:09:03
161
原创 控制文本行数
.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...
2019-10-16 13:08:02
156
原创 使用mongodb
1.开启服务在执行mongod命令的根目录创建data文件夹在data文件夹内再创建db文件夹运行mongod命令2.连接数据库新开一个命令行工具运行mongo命令3.基本命令show dbs 查看所有数据库db 查看当前操作的数据库(默认为test数据库)use数据库名称 切换到指定数据库(没有则自动创建该数据库)插入数据:db.stu...
2019-10-14 09:42:54
152
原创 导航栏动态显示隐藏
js/* Header Sticky ========================================================*/ $(window).on('scroll',function() { if ($(this).scrollTop() >170){ $('.heade...
2019-04-07 15:48:04
742
原创 owl
$('.home-slides').owlCarousel({items:1,loop:true,autoplay:true,nav:true,responsiveClass:true,dots:false,autoplayHoverPause:true,mouseDrag:true,animateOut: 'fadeOut',navText: ["&l...
2019-04-07 08:28:31
328
转载 如何居中一个元素(终结版)
本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下:一、水平居中1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。.parent{//在父容器设置 text-align:...
2019-04-07 07:34:07
156
转载 HTML行内元素、块状元素、行内块状元素的区别
行内元素特征:(1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行行内元素特征:(1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行行内块状元素特征:(...
2019-03-29 11:02:36
292
转载 html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。
html中的标签元素大体被分为三种不同的类型:块级元素、内联元素(又叫行内元素)和内联块级元素。块级元素特点:1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(霸道,一个块级元素独占一行)2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致)常用的块状元素有:<div>、<...
2019-03-20 10:55:52
146
原创 css绘制梯形 、直角三角形
改老外的模板是看到了这个效果看其源代码写了个demo完整代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device
2019-03-18 12:01:05
1985
转载 js禁用带有二级菜单的导航栏的a标签的跳转功能
//Disable dropdown parent link$('.main-header .navigation li.dropdown > a).on('click', function(e) {e.preventDefault();});
2019-03-14 09:12:24
394
转载 HTML的footer置于页面最底部的js方法
<html> <head> <style type="text/css"> html,body{margin:0;padding: 0;} .header{background-color: #ffe4c4;} .main{background-color: #bdb76b;} .footer{bac...
2019-03-13 15:34:12
468
转载 js返回顶部
//返回顶部 function gotoTop(min_height){ //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div id="gotoTop">返回顶部</div>'; //将返回顶部的html代码插入页面上id为page的元素的末尾 $("bo...
2019-03-06 11:21:03
151
转载 vscode 缩进
vscode缩进快捷键: 选中文本; Ctrl + [ 和 Ctrl + ] 实现文本的向左移动或者向右移动;vscode代码对齐快捷键: 选中文本; Shift + Alt + F 实现代码的对齐;-------------...
2019-02-27 09:47:34
1250
转载 前端面试总结篇(初级)
1. 你熟悉的es6 let、const、var的使用区别 let: 相当于var,用于声明一个变量,在块级作用域有效(可解决for循环问题);不能重复声明;不会变量提升;不会预处理 const: 用于定义一个常量,不能修改,其他特点等同于let,用于保存不用改变的数据 Map与普通对象的区别 JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构...
2019-02-26 07:58:19
231
转载 form表单提交后不刷新不跳转的实现方法
由于制作用户的注册界面,发现每当form表单提交后,都会刷新一下,导致填写的数据丢失,为了解决这一问题专门,百度了一下。还真找到了一种form表单提交后,不刷新的方法,先转过来,以后备用。代码如下:<html> <body> <form action="" method="post" target="nm_iframe"> ..
2018-10-12 13:04:29
809
1
转载 css选择器
选择器例子例子描述CSS.class.intro选择 class="intro" 的所有元素。1#id#firstname选择 id="firstname" 的所有元素。1**选择所有元素。2elementp选择所有 <p> 元素。1element,elementdiv,p选择所有 <div> 元素和所有 <p> 元素。1element elementdiv p...
2018-07-03 15:37:49
264
转载 clear:both
<div style="border:2px solid red;"> <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="clear:both;"></div>
2018-07-03 13:39:08
198
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人