前端
star...
这个作者很懒,什么都没留下…
展开
-
原生JS实现下拉加载
实现的原理:滚动条当前的位置+当前可视范围的高度=文档完整的高度1、获取滚动条当前位置// 获取滚动条当前的位置function getScrollTop() { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; return scrollTop}2、获取当前可...原创 2019-10-23 15:42:10 · 663 阅读 · 0 评论 -
css选择器
1、交集选择器既是p标签类名称又是text的字体变成红色p.text{color: red}2、并集选择器让container下的所有元素内容为蓝色#container p, span, em, strong{color: blue}3、兄弟选择器选择h1 元素后出现的段落h1~p{color:red;}<p>Hello word!</p>&...原创 2019-08-13 10:19:51 · 235 阅读 · 0 评论 -
移动终端H5页面meta标签的设置案例
天猫<title>天猫触屏版</title><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0, maxi...原创 2019-05-24 10:34:32 · 761 阅读 · 0 评论 -
移动终端h5页面常用的meta属性
apple-mobile-web-app-capableapple-mobile-web-app-capable是设置web应用是否以全屏模式运行语法:<meta name="apple-mobile-web-app-capable" content="yes">说明:如果content设置为yes,web应用会以全屏模式运行。content设置为no,表示正常显示。可以通过...原创 2019-05-24 10:19:59 · 1467 阅读 · 0 评论 -
npm run命令会自动在环境变量$PATH添加node_modules/.bin目录
npm run命令会自动在环境变量$PATH添加node_modules/.bin目录,所以scripts字段里面调用命令时不用加上路径,这就避免了全局安装NPM模块。npm run如果不加任何参数,直接运行,会列出package.json里面所有可以执行的脚本命令。npm run会创建一个Shell,执行指定的命令,并临时将node_modules/.bin加入PATH变量,这意味着本地模块...转载 2019-06-05 14:25:51 · 7532 阅读 · 0 评论 -
npm --save-dev --save 的区别
npm install 在安装 npm 包时,有两种命令参数可以把它们的信息写入 package.json 文件一个是 --save || -S // 运行依赖(发布)另一个是–save-dev || -D //开发依赖(辅助)区别是它们会把依赖包添加到package.json 文件–save : dependencies 键下,发布后还需要依赖的模块,譬如像jQuery库或者An...转载 2019-06-05 11:07:56 · 28485 阅读 · 0 评论 -
h5页面唤醒app
h5页面发送请求打开app自定义url scheme,如taobao://home(淘宝首页) 、etao://scan(一淘扫描));如果安装了客户端则会直接唤起,直接唤起后,之前浏览器窗口(或者扫码工具的webview)推入后台;如果在指定的时间内客户端没有被唤起,则js重定向到app下载地址。window.location.href = 'taobao://home'setTimeo...原创 2019-05-23 20:13:20 · 1742 阅读 · 0 评论 -
CSS的三种引入方式
1、内联CSS内联css也称为行内css或者行级css,它直接在标签内引入。优点:便捷、高效缺点:不能够重用样式,代码行数多的时候不建议使用<head> <div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div></head>2、页级css页...原创 2019-04-03 11:19:06 · 4399 阅读 · 0 评论 -
CSS盒模型
基本概念盒模型由里向外是content,padding,border,margin盒模型有两种:标准模型和IE模型标准模型:盒模型的宽高是内容(content)的宽高IE模型:盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高CSS如何设置两种模型css3的属性box-sizing标准模型 box-sizing:content-...原创 2019-04-09 17:05:32 · 94 阅读 · 0 评论 -
BFC
1、常见布局模式CSS中的三种布局模型:流动模型(flow)、浮动模型(float)、层模型(layer)2、BFC的原理 BFC即 Block Formatting Context(块级格式化上下文),它属于上述布局模式中的流动模型。 它是W3C CSS2.1规范中的一个概念,它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及...转载 2019-04-09 18:03:50 · 117 阅读 · 0 评论 -
js判断一个对象是否为空
1、ES6新增的方法Object.keys();Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 。参数要返回其枚举自身属性的对象。返回值一个表示给定对象的所有可枚举属性的字符串数组。描述Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的object...原创 2019-04-17 17:52:58 · 152 阅读 · 0 评论 -
Object.create()
Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的_proto_。const person = { isHuman: false, printIntroduction: function () { console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`); }};...转载 2019-04-18 18:00:05 · 211 阅读 · 0 评论 -
三元表达式
var a = '123';var b = (a === 'cpa' ? 'cpa' : (a === 'cps') ? 'cps' : 'flow');console.log('b', b); // b flow原创 2019-04-25 10:13:29 · 697 阅读 · 0 评论 -
H5移动端常见问题
html5调用安卓或者ios的拨号功能html5提供了自动调用拨号的标签,只要在a标签的href中添加tel:就可以了。如下:<a href="tel:4008106999,1034">400-810-6999 转 1034</a>拨打手机直接如下<a href="tel:15677776767">点击拨打15677776767</a>...原创 2019-05-24 11:56:30 · 946 阅读 · 0 评论 -
div水平居中及div水平垂直居中的方法总结
水平居中1、margin:auto<div class="wrap"> <div class="wrap-txt"></div></div>.wrap{ width: 100%;}.wrap-txt{ width: 6rem; height: 2rem; background: #00FFFF; ...原创 2019-05-23 16:41:39 · 391 阅读 · 0 评论 -
移动端几种tab切换及实现方式
看了下 FrozenUI(QQ)、Jquery WeUI(微信)、SUI Mobile(淘宝)的tab实现方式,自己整理了一下。1、FrozenUI<div class="wrap"> <ul class="tab border-b"> <li class="tab-item current"> <span&g...原创 2019-05-23 17:00:19 · 8484 阅读 · 1 评论 -
-webkit-text-size-adjust的用法
-webkit-text-size-adjust的用法如下:1、当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-size-adjust:none;} 或者html{-webkit-text-size-adjust:100%;}2、-webkit-text-size-adjust放在body上会导致页...原创 2019-05-23 19:58:58 · 11766 阅读 · 0 评论 -
CSS3动画
1、 @keyframes规则@keyframes规则用于创建动画,在@keyframes中规定某项css样式,就能创建由当前样式逐渐过渡为新样式的动画效果。定义动画的方式有两种:1)<head> <meta charset="UTF-8"> <title></title> <style type="text/css">...原创 2019-04-11 11:39:11 · 321 阅读 · 0 评论