- 博客(45)
- 收藏
- 关注
RSS订阅原创 事件委托（事件代理）
解释：只指定一个事件处理程序，就可以管理某一类型的所有事件。原理：事件委托是利用事件的冒泡原理来实现的，就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委.
2020-12-02 16:08:37
113
原创 什么是同源策略？如何解决跨域问题？
什么是同源？ 同协议 同域名 同端口 例如：http://a.xyz.com:81/dir/etc.html 协议-http 域名-xyz 端口-81 （如果不写默认就是80）同源策略是什么？ 同源策略是浏览器的一个安全功能，同源策略用于隔离潜在恶意文件的重要安全机制。不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。哪些不会受到同源策略限制的影响？ 页面中的链接，重定向以及表单提交是不会
2020-12-02 15:58:06
415
原创 js中for循环和foreach循环的区别
foreach与for循环的明显差别在于，foreach循环时循环对象（数组、集合）被锁定，不能对循环对象中的内容进行增删改操作。 // for循环：可以修改循环语句 var array = ["a","b","c","d"] for(var i = 0;i < array.length;i++) { array[i] = "A"; } console.log(array) // 结果是四个A
2020-10-29 17:09:57
1442
2
原创 Vue自定义全局组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <t
2020-10-13 13:38:16
417
原创 移动端h5页面软键盘弹出后 背景图片被顶上去
移动端h5页面在软键盘弹出后，body的高度被压缩了，就导致原本高度100%的背景图被顶上去一截，需要把div的高度强行设回100%才能解决这个问题<div class="app" :style="{ height: bodyHeight + 'px' }"></div> mounted(){ this.bodyHeight=document.documentElement.clientHeight}jq中这么写(挂载的时候就要开始执行的)$(function ()
2020-10-10 10:00:38
3736
2
原创 根据不同的域名去动态修改div中的文字
方式一：domain1、domain2是域名，后端提供 var wordObj = { 'domain1': { 'id1': 'xxxxxxx', 'id2': 'xxxxxxxx', }, 'domain2': { 'id1': 'xxxxxxx', 'id2': 'xxxxxxxx', } } 获取域
2020-09-30 14:36:11
349
原创 H5页面添加背景音乐播放功能，可暂停
html： <span id="musicControl"> <a id="mc_play" class="on"> <audio id="musicfx" loop="loop" autoplay="autoplay"> <source src="./music/music.mp3" type="audio/mpeg" id="hhh"> </aud
2020-09-30 10:40:09
1475
1
原创 移动端实现点击body其他位置导航栏回到初始位置
$(document).on('tap', function (e) { var canCloseNav = true; var parents = $(e.target).parents(); for (var i = 0, len = parents.length; i < len; i++) { var parent = parents.eq(i); if (parent.hasClass('nav') || parent.hasClass('..
2020-09-15 11:43:02
240
原创 zepto无法使用animate的解决办法
zepto就是一个专为移动端而生的精简版jquery框架，语法和jquery几乎一模一样。但在用的时候会发现jquery中使用频率非常高的animate动画方法在zepto中无法使用。其实zepto是支持的，只不过没有集成到zepto核心文件中，需要大家引入官方提供的fx.js扩展。友情提示：请在引入zepto核心js文件后再引入fx.js _使用tap方法要引入touch.js学习参考 http://www.sunqizheng.com/blog/379.html正文有fx的心下载地址...
2020-09-15 11:36:53
399
原创 差速滚动、视差滚动效果实现
http://www.coolz.cc/这是最终实现的效果首先banner要设置为固定定位，position：fixed；实现两个元素以不同的速度一起滚动，他们滚动的距离成比例，需要进行动态的计算 $(window).scroll(function () { if ($(window).scrollTop() >= 0) { var scrollHeight = $(window).scrollTop(); $('.banner
2020-09-10 16:30:09
269
原创 swiper轮播图自动轮播失效问题
设置autoplay:true之后，再设置autoplay:{ disableOnInteraction: false}
2020-09-09 11:25:52
2004
原创 js判断，提示用户在微信端打开该页面
function is_weixin() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { return true; } else { document.write('请在微信端打开页面'); return false; } } is_weixin();...
2020-09-08 17:01:24
438
原创 使用百度地图api制作地图名片
http://api.map.baidu.com/mapCard/setInformation.html制作地图名片
2020-08-04 15:11:06
437
原创 psd设计图转换为css的box-shadow
h-shadow = 距离 * cos（180 - Angle）h-shadow = 距离 * cos (180 - Angle）spread = 扩展 * 大小blur = 大小 - spreadcolor = rgba （a显示透明度）
2020-08-04 13:39:12
306
原创 swiper插件怎么设置鼠标经过缩略图标切换图片
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide active-nav" data-index="0"> <img src="./common/images/s1.jpg" alt="">
2020-07-20 16:07:45
2363
原创 CSS基础知识汇总{主要内容：多背景及背景尺寸}
一、多背景多背景写法：背景尺寸： 设置背景图片的大小◆通过background-size设置背景图片的大小◆background-size的取值：✔可以设置具体值✔可以设置一个值，另外一个默认代表auto✔可以设置预定义的值 cover将背景图片按照缩放比例，将整个父容器沾满✔可以设置预定的值 contain将背景图片按照缩放比例，将整个背景图片完整的显示到容器中。二、...
2020-04-03 19:10:12
212
原创 CSS基础知识汇总{主要内容：过渡、位移、旋转、缩放}
一、过渡（transition） /* 设置过渡的属性 */ transition-property: width,height;/* 设置过渡的时间 */transition-duration: 1s; /* 设置过渡的类型 为匀速*/ transition-timing-function: linear; /* 设置延时效果 */transition-delay: 2s;/*...
2020-04-03 17:37:47
345
原创 CSS基础知识汇总{主要内容：精灵图、滑动门、web字体、图标字体}
一、精灵图精灵图作用： ◆用来设置背景图片的。◆提高网页加载速度步骤：◆先将精灵图作为背景图片设置给容器◆通过background-position 移动精灵图的位置备注：◆精灵图移动的位置是依据图片的横坐标和纵坐标来的◆在设置坐标值的时候，记住需要设置为负数。二、滑动门☞作用： 使用滑动门制作网页导航。☞注意事项：◆滑动门导航必须使用背景图片◆滑动门导航不能设置固定宽度...
2020-04-02 22:01:09
171
1
原创 CSS基础知识汇总{主要内容：定位及特点}
一、定位定位的分类：◆静态定位◆绝对定位【重点】◆相对定位【重点】◆固定定位静态定位：position: static;如果我们希望使用静态定位改变元素位置，是实现不了的。【静态定位无法改变元素位置】，因为静态定位的元素和标准流的元素默认显示方式是一样的。【静态定位元素就是标准流的元素】绝对定位：position:absolute;特点：绝对定位的元素也是脱标的元素（不占位置）...
2020-04-01 17:20:31
331
原创 CSS基础知识汇总{主要内容：浮动特点，网页布局，清除浮动}
一、box-sizingbox-sizing有两个值：当给一个盒子设置box-sizing: border-box;的时候，那么当前这个盒子的实际大小就是我们设置的宽度和高度的大小。当给一个盒子设置box-sizing: content-box的时候，那么当前这个盒子的实际大小=盒子的内容区域（宽度和高度）+边框+内边距。二、浮动浮动的使用：如果要实现图片和文字环绕的效果，我们给图片设...
2020-03-30 18:34:23
150
原创 CSS基础知识汇总{主要内容：行高的定义、盒子模型}
一、行高line-height的定义及使用行高指的是两行文字两条基线之间的距离行高的作用：1、让文字垂直居中（只要设置文字的行高值=当前文字所在容器的高度）2、可以通过行高调整文字上下的间距（具体的使用测量还没待学习，后续更新）二、盒子模型1、边框（border）border-color: 设置边框颜色border-style: 设置边框样式的（none 默认没有边框、sol...
2020-03-26 16:45:09
245
原创 CSS基础知识汇总{主要内容： 元素的模式分类，CSS特性}
1、palcehoder的兼容性问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
2020-03-22 22:14:47
281
原创 CSS基础知识汇总{主要内容： CSS语法结构，类选择器，后代选择器，交集选择器等}
1、CSS的作用： 通过css达到美化网页的效果2、选择器：✔ 基础选择器（重点）◆标签选择器（重点学习）◆类选择器（重点学习）◆ID选择器◆通配符选择器✔ 复合选择器（重点）◆后代选择器（重点）◆子代选择器◆伪类选择器（重点）◆并集选择器（重点）◆标签指定式选择器（重点）类选择器示例：类选择器特点注意事项：◆不能使用数字定义类名◆不能使用特殊字符定义类名（%，/...
2020-03-14 21:08:44
565
原创 HTML知识汇总
1、html的作用是用来制作网页（PC端和移动端），其中移动端又分为安卓和ios。2、组成网页的规范：结构标准（html）、表现标准（css）、行为标准（js）。3、浏览器：主流的浏览器有谷歌（内核是blink）、火狐（内核是gecko）、IE高版本（内核是trident）、苹果（内核是webkit）、欧鹏（内核是presto）。世界范围内以上浏览器的使用频率更高，都有属于自己的内核，内核即...
2020-03-14 16:01:08
108
原创 Javascript基础简介及变量命名规范
1、Javascript是运行在客户端（即浏览器端）的脚本语言。2、Javascript = ECMAScript + DOM + BOMBOM : 浏览器对象模型，一套操作浏览器功能的API,可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。DOM：文档对象模型，一套操作页面元素的API....
2020-02-29 15:37:03
144
原创 HTML5新增标签及新增属性
一、 HTML5出现及与之前版本的异同点HTML5是2008年出现的！+ TAB生成html5的框架结构<!DOCTYPE html> //文档类型写法<meta charset="UTF-8"> //字符集写法二、HTML5新增标签具体的HTML5新增标签的学习可以在www.w3cschool.com.cn中学习常见的HTML5新增标签如下：<h...
2020-02-02 20:31:55
381
1
原创 小程序中的js和普通的javascript区别
（1）小程序不是运行在浏览器中，所以没有BOM和DOM对象console.log(window); => undefinedconsole.log(document); => undefined（2）小程序的JS有一些额外的成员App方法 用于定义应用程序实例对象Page方法 用于定义页面对象//微信小程序由一个应用程序实例对象+多个页面对象构成//getApp 方...
2019-09-24 11:45:51
4195
原创 字蛛的使用总结—用于网页中需要使用特殊字体的情况
一、第一步在找字网中找出自己需要的字体并下载发现下载的字体文件的格式为otf二、第二步使用工具对字体文件进行转换使用这个FontCreator软件可以将字体文件转换为ttf文件三、第三部在自己的项目中建立一个文件夹font将ttf格式的字体文件放到font文件夹中1、下载字蛛 全局安装npm install font-spider -g2、安装完毕 检查是否安装成功fon...
2019-07-03 22:45:56
205
原创 Vue学习（v-for的使用以及普通数据排序、数组对象排序）
v-for：循环渲染data的一组数据组，v-for指令需要以item in items形式的特殊语法显示索引值 （item，index）in items完整代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="...
2019-05-12 16:33:13
7021
3
原创 Vue学习总结（一）
一、使用vue-cli脚手架去搭建一个项目1、安装一个脚手架生成工具（安装全局命令行工具，在任何位置都可以）npm install -g vue-cli2、安装完毕之后在你的终端验证是否安装成功vue -help3、使用工具去自动生成项目，在终端找到你行存储项目的地址，然后输入以下命令vue init webpak 名称4、等待安装完成，其中有一项是ESlint code，是用...
2019-05-10 20:39:03
664
原创 微信小程序—数据绑定
WXML中的动态数据均来自对应的Page中的data。（在js文件中）https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html注意点：在书写轮播图的时候假如我们把属性indicator-dots=‘false’时，小圆点并没有消失，这是因为微信小程序内部自动将引号里面的强制转换为了字符串，正确...
2019-03-29 17:29:57
221
原创 vue基础入门必备
一、Vue是什么？Vue.js是一套构建用户界面的渐进式框架，一款非常优秀的前端 javascript 框架，类似于 jQuery 的功能职责，它帮你去处理 DOM , 不需要你去操作DOM , Vue是一个更高级的模板引擎，彻底帮你解放了DOM操作。它不是 UI 样式框架由中国人尤雨溪开发可以轻松构建SPA（Single Page Application）应用程序（单页面应用），不仅...
2019-03-26 22:01:08
369
原创 微信小程序开发项目实战（五）
一、项目中要注意到的点1、删除多余文件的时候我们一定要先把app.json中的pages数组中删除，再去删除文件夹。2、我们会发现在image文件夹中的图片都有@3这样的图标，意思是设计师给的是三倍的高清图片。3、底部的tabBar建议设计师设计的尺寸为81px*81px，否则可能会在某些机型上出现模糊的bug。伸缩盒（flex）布局实现内容水平垂直居中 /* flex伸缩盒布局 */...
2019-03-08 16:51:10
936
原创 介绍微信小程序开发中常用布局组件（三）
1、文本组件text：微信小程序中是不允许选中文字的，text标记是唯一可以选中文本的标记。但是要实现这个功能的话，需要给text标记加一个属性selectable=‘true’，并且在选中的时候我们要模拟在手机上长按，而不是直接框选。&amp;amp;amp;amp;lt;text selectable='true'&amp;amp;amp;amp;gt;这是我的第一个页面测试页面&amp;amp;amp;amp;lt;/text&amp
2019-03-06 13:45:47
2153
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人