06 2020 档案
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>百度地图预研</t
阅读全文
摘要：官方提供的分享插件进行分享，在官网里已经找不到文档了，但插件还是能用的。 一、代码结构 分享代码可以分为三个部分：HTML、设置和js加载 html: <div id="share"> <div class="bdsharebuttonbox" data-tag="share_1"> <a clas
阅读全文
摘要：解决carousel获取偏移问题,此处获取元素之前的距离偏移量： carouselListItems.each(function (index) { $(this).click(function () { let itemOffset = parseInt($(this).offset().left
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Carousel<
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Carousel<
阅读全文
摘要：实现原理：父元素为定宽定高相对定位，且overflow：hidden，子元素为绝对定位高度继承父元素，宽度可计算或设置一个大值，通过绝对定位的left来决定显示的子元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m
阅读全文
摘要：//根据长度生成随机码 app.randCode = function (len) { var charset = 'abcdefghkmnprstuvwxyzABCDEFGHKMNPRSTUVWXYZ0123456789'; var charsetLen = charset.length - 1;
阅读全文
摘要：html: <div class="knowledge-left fl"> <div class="menu-item down"> <a href="javascript:;" class="sub-title">买房准备</a> <ul> <li> <a href="" class="activ
阅读全文
摘要：父元素为块级元素，子元素inline-block,因为行高而对不整齐调整位置 <div class="box-scan inline"> <span>扫描到手机</span> <div class="scan-to-mobile clearfix"> <span class="top-arrow">
阅读全文
摘要：自定义滚动条实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
阅读全文
摘要：html: <div class="hot-purchase"> <div class="title">热门团购</div> <dl class="item on"> <dt> <a href="" class="text-area">[text]</a> <a href="" class="tex
阅读全文
摘要：$(document).ready(function () { let loginByPassword = true; //登录校验规则 let nameMapper = { phone: '手机号码', phoneCode: '手机验证码', account: "登录账号", password:
阅读全文
摘要：1、多个元素处理同一个事件，有共同的逻辑 let loginForm = $('#loginForm'); loginForm.on('focusin', '#phone,#password,#account,#phoneCode', function (event) { let targetId
阅读全文
摘要：function toggleToTopBtn(toTopBtn, scrollTop, clientHeight) { if (scrollTop > clientHeight) { toTopBtn.css('display', 'block') } else { toTopBtn.css('d
阅读全文
摘要：html: <div class="sand-content fl"> <img src="images/sand_900x600c.jpg" alt="" id="sandPicture"> </div> css: .sand-content { position: relative; width
阅读全文
摘要：宽高： javascript: offsetWidth jquery: outerWidth clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标(垂直坐标)。 客户区指的是当前窗口。 显示出事件发生时鼠标指针的坐标。 clientX：当鼠标事件发生时（不管是on
阅读全文
摘要：CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。 【官方解释】 CSS雪碧图即CSS Sprite（精灵），在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载
阅读全文
摘要：html: <div class="consult-tab"> <a href="">咨询</a> <a href="">企业咨询</a> <a href="">咨询</a> <a href="">咨询</a> <a href="">咨询</a></div> css: .consult-tab {
阅读全文
摘要：html: <body> <div class="login-wrap"> <div class="box-login"> <div class="login-form"> <dt class="login-tab"> <span class="actived">手机动态码登录</span> <sp
阅读全文
摘要：<link rel="stylesheet" type="text/css" href="../css/reset.css"> <link rel="stylesheet" type="text/css" href="../css/common.css"> 带../的相对在safari浏览器不生效
阅读全文
摘要：foucs时无边框需设置outline input { border: 0; outline: none; } 调整checkbox高度居中方式： input[type=checkbox]{ vertical-align: -1px; }
阅读全文
摘要：.bax { box-shadow: 0 0 12px #ddd; } box-shadow: h-shadow v-shadow blur spread color inset; h-shadow: 必需的。水平阴影的位置。允许负值 v-shadow: 必需的。垂直阴影的位置。允许负值 blur:
阅读全文
摘要：html: <div class="imgBox"> <img src="http://www.jq22.com/img/cs/500x500-1.png" alt=""> </div> css: .imgBox { width:200px; height:200px; overflow:hidde
阅读全文
摘要：一、文件引用规范 先说加载的规范，这个规范主要是为了提高页面加载速度或者是首屏的速度。 CSS 文件或样式在 head 标签中引用。页面的渲染需要 CSS，所以尽量早的让 CSS 文件加载出来。 JS 文件要放在 body 标签尾部。页面里加载和运行 JS 都会阻塞页面的渲染过程，所以把 JS 放在
阅读全文
摘要：一、伪类选择器 在页面中，有时候同一个元素在不同动作下有不同的样式。比如链接在没有点击的时候有个样式，在鼠标放上去有另外的样式，还有在点击完成以后又会又一个样式。这几种情况下这个链接的标签并没有变化，有变化的只是它的状态，这时候就可以里用伪类来实现这个需求。在浏览器中，伪类的出现是为了向某些选择器添
阅读全文
摘要：组合选择器：后代选择器、子元素选择器、兄弟选择器、交集选择器和并集选择器这几种复合选择器 一、后代选择器 后代选择器的语法是用空格分隔的多个选择器组合，它的作用是在 A 选择器的后代元素中找到 B 选择器所指的元素。它的语法形式就是：“选择器 A 选择器 B” ，例如： <!-- HTML -->
阅读全文
摘要：基础选择器包括 ID 选择器、类选择器、标签选择器、通配符选择器和属性选择器这几种。 一、ID 选择器 Tips：1、ID 选择器只能对一个元素生效，同一个页面里不允许出现两个 ID 相同的元素。2、理论上 ID 选择器是效率最高的选择器。但是由于它只能选一个元素，特异性太高，在实际开发中也很少在
阅读全文
摘要：工厂模式 （Factory Pattern），根据不同的输入返回不同类的实例，一般用来创建同一类对象。工厂方式的主要思想是将对象的创建与对象的实现分离。 一、生活实例 顾客，饭店，菜品 在类似场景中，这些例子有以下特点： 访问者只需要知道产品名，就可以从工厂获得对应实例； 访问者不关心实例创建过程；
阅读全文
摘要：注册机制： //app.js let Api = require('./http/api.js') let request = require('./http/request.js') let config = require('./env/index.js') let env = 'dev' Ap
阅读全文
摘要：官网：https://cli.vuejs.org/ 安装：npm i -g @vue/cli 创建项目方式：命令行 vue create project_name GUI创建 vue ui 安装依赖： axios vue-axios vue-cookie vue-router weixin-js-s
阅读全文
摘要：官方文档：https://sequelize.org/v5/manual/migrations.html 安装：npm install --save sequelize-cli 初始化：npx sequelize-cli init 修改配置文件 创建数据模型：npx sequelize-cli mo
阅读全文
摘要：一、flex布局 顶部，底部固定，中间自适应(中间左固定，右自适应)。 <body> <div class="container"> <div class="header"></div> <div class="content"> <div class="left"></div> <div clas
阅读全文
摘要：express: web application framework 第一个express 基本应用： const express = require('express'); const port = 3000; const app = express(); app.use((req, res) =
阅读全文
摘要：适配器模式（Adapter Pattern）又称包装器模式，将一个类（对象）的接口（方法、属性）转化为用户需要的另一个接口，解决类（对象）之间接口不兼容的问题。 主要功能是进行转换匹配，目的是复用已有的功能，而不是来实现新的接口。也就是说，访问者需要的功能应该是已经实现好了的，不需要适配器模式来实现
阅读全文
摘要：装饰者模式 （Decorator Pattern）又称装饰器模式，在不改变原对象的基础上，通过对其添加属性或方法来进行包装拓展，使得原有对象可以动态具有更多功能。 本质是功能动态组合，即动态地给一个对象添加额外的职责，就增加功能角度来看，使用装饰者模式比用继承更为灵活。好处是有效地把对象的核心职责和
阅读全文
摘要：代理模式 （Proxy Pattern）又称委托模式，它为目标对象创造了一个代理对象，以控制对目标对象的访问。 代理模式把代理对象插入到访问者和目标对象之间，从而为访问者对目标对象的访问引入一定的间接性。正是这种间接性，给了代理对象很多操作空间，比如在调用目标对象前和调用后进行一些预操作和后操作，从
阅读全文
摘要：发布 - 订阅模式 （Publish-Subscribe Pattern, pub-sub）又叫观察者模式（Observer Pattern），它定义了一种一对多的关系，让多个订阅者对象同时监听某一个发布者，或者叫主题对象，这个主题对象的状态发生变化时就会通知所有订阅自己的订阅者对象，使得它们能够自
阅读全文
