项目中遇到的bug或技术难点（持续更新中）

一，在页面布局中，使用img图片设置宽高为父元素100%，会出现有默认空隙问题。

解决：
1：给img标签添加float:left
2:给img添加display:black

二，BFC是什么？解决了什么问题？

解决：
1，BEC全称：Block Flrmatting Context ,翻译为块级格式化上下文，它是css2.1规范定义的，关于css渲染定位的一个概念。
2，可以解决因float浮动造成的父元素塌陷问题。
3，可以解决div浮动造成的遮盖问题【overflow:hidden；触发BFC来解决遮挡问题】
4，可以解决margin塌陷的问题【overflow:hidden;产生BFC来解决】、

三，项目中input输入框获取焦距，会出现虚拟键盘会挡住导航栏的bug。

解决：
可以在获取焦距时使用display：none把导航栏隐藏掉，在失去焦距时使用display：block在显示就可以了。

四，渐进增强和优雅降级之间的区别

.渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
.优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
.其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，经常会提到向上兼容和向下兼容的概念。渐进增强就是相当于向上兼容，而优雅降级就相当于向下兼容

js操作DOM方法

1. 查找：getElementsByTagName，getElementsByClassName，getElementById.
2. 创建元素节点：createElement
3. 创建文本节点：createTextNode
4. 赋值节点：cloneNode
5. 插入节点：appendChild,insertBefore.
6. 删除节点：removeChild
7. 替换节点：replaceChild
8. 设置属性获取属性：setAttribute,getAttribute
9. 插入HTML结构：innerHTML
10. 插入TEXT文本：innerTEXT

js如何获取ul中鼠标点的行号

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<script>
let list=document.getElementsByTagName('li')
for(let i=0;i<list.length;i++){
(function(){
list[i].onclick=function(){
console.log(i)
}
})(i)
}
</script>

使用getElementSByTagName获取列表，循环，函数自执行

本地图片地址转base64编码

btoa('D:\Documents\Pictures\Saved Pictures/111.png')
[https://www.runoob.com/jsref/met-win-btoa.html

(https://www.runoob.com/jsref/met-win-btoa.html)

设置 letter-spacing 后文字不能居中的解决方法

text-align: center;
letter-spacing: 1em;
text-indent: 1em;

css3动画

动画使用地址

animation-fill-mode : none | forwards | backwards | both;

none：不改变默认行为。
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。

引入gif图片不动问题

在scr地址栏后添加随机数

<img src="../../../../assets/subpage/Exchange_moon.gif?`+ Math.random())`" alt="">

css添加伪元素

.null_text:after {
content: '';                 /*CSS伪类用法*/
position: absolute;         /*定位背景横线的位置*/
top: 4rem;       /*宽和高做出来的背景横线*/
width: 0.02rem;
height: .48rem;
background:rgba(255,255,255,1);
opacity:1;
border-radius:1px;
}

JavaScript 获取当前时间戳：

第一种方法：

var timestamp = Date.parse(new Date());

结果：1280977330000
第二种方法：

var timestamp = (new Date()).valueOf();

结果：1280977330748
第三种方法：

var timestamp=new Date().getTime()；

结果：1280977330748
第一种：获取的时间戳是把毫秒改成000显示，
第二种和第三种是获取了当前毫秒的时间戳。
时间戳与日期格式之间的转换

将时间戳转换日期格式

// 简单的一句代码

var date = new Date(时间戳); //获取一个时间对象

1. 下面是获取时间日期的方法，需要什么样的格式自己拼接起来就好了
2. 更多好用的方法可以在这查到 -> http://www.w3school.com.cn/jsref/jsref_obj_date.asp

date.getFullYear(); // 获取完整的年份(4位,1970)
date.getMonth(); // 获取月份(0-11,0代表1月,用的时候记得加上1)
date.getDate(); // 获取日(1-31)
date.getTime(); // 获取时间(从1970.1.1开始的毫秒数)
date.getHours(); // 获取小时数(0-23)
date.getMinutes(); // 获取分钟数(0-59)
date.getSeconds(); // 获取秒数(0-59)

例子

// 比如需要这样的格式 yyyy-MM-dd hh:mm:ss
var date = new Date(1522785844000);
Y = date.getFullYear() + '-';
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
D = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
console.log(Y+M+D+h+m+s);
// 输出结果：2018-04-04 04:04:04

2、将日期格式转换时间戳

var strtime = '2014-04-23 18:55:49:123';
var date = new Date(strtime);
//传入一个时间格式，如果不传入就是获取现在的时间了，这样做不兼容火狐。
// 可以这样做
var date = new Date(strtime.replace(/-/g, '/'));

// 有三种方式获取

time1 = date.getTime();
time2 = date.valueOf();
time3 = Date.parse(date);

/*
三种获取的区别：
第一、第二种：会精确到毫秒
第三种：只能精确到秒，毫秒将用0来代替
比如上面代码输出的结果(一眼就能看出区别)：
1398250549123
1398250549123
1398250549000
*/
3、Date()参数形式有7种

new Date("month dd,yyyy hh:mm:ss");
new Date("month dd,yyyy");
new Date("yyyy/MM/dd hh:mm:ss");
new Date("yyyy/MM/dd");
new Date(yyyy,mth,dd,hh,mm,ss);
new Date(yyyy,mth,dd);
new Date(ms);

例子

new Date("September 16,2016 14:15:05");
new Date("September 16,2016");
new Date("2016/09/16 14:15:05");
new Date("2016/09/16");
new Date(2016,8,16,14,15,5); // 月份从0～11
new Date(2016,8,16);
new Date(1474006780);

加载图片出现403的问题

有时候服务器会做一些限制，这样我们有时候访问图片的话就会出现403的报错。
但是把图片地址复制出来在地址栏打开的话是可以正常查看图片的。
解决方案是在head中加一句代码：

<meta name="referrer" content="no-referrer"/>

这样我们就可以愉快的查看图片了。

vue播放音频

vue项目页面转图片base64

转载地址
1.将整个页面转成图片；
2.将页面内部分内容转成图片。
解决方案如下：

1.引入html2canvas
为了更便捷有效的开发，这里可以引入html2canvas这个插件，如果读者不想采用这种方案，可以跳过下面内容，自行寻求其他解决方案。
点击可以查看相关文档：html2canvas官方文档
引入方式：

npm install --save html2canvas

或者：

yarn add html2canvas

2.将html2canvas引入到组件中
该插件安装完毕后，在你需要使用的vue组件中，按照以下方式，将插件引入：

import html2canvas from "html2canvas"

到此，基本的环境已经配置完毕，接下来就可以使用了。

3.将制定区域内转成图片
首先，你需要让html2canvas获取到你想要转换的节点内容，因此，你需要添加ref标记。
示例如下：

<div class="container" ref="imageDom"></div>

imageDom需要是你想转换的页面内容的父容器，即你想转换的页面内容需要全部包含在imageDom节点内。
转换方法如下：

/**
* 将页面指定节点内容转为图片
* 1.拿到想要转换为图片的内容节点DOM；
* 2.转换，拿到转换后的canvas
* 3.转换为图片
*/

clickGeneratePicture() {
html2canvas(this.$refs.imageDom).then(canvas => {
// 转成图片，生成图片地址
this.imgUrl = canvas.toDataURL("image/png");
});
}

官方示例如下：

html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});

返回的canvas参数就是一个生成好的canvas元素，如果你想将他转成图片，直接使用toDataURL方法即可，将转换的图片地址赋值给你想显示的图片元素，就可以在页面上看到转换后的图片。

问题1：微信浏览器不能直接下载生成后的图片。
在chrome等浏览器下可以使用如下方法，将生成的图片直接下载下来：

// 创建隐藏的可下载链接

var eleLink = document.createElement(“a”);
eleLink.href = imgUrl; // 转换后的图片地址
eleLink.download = “pictureName”;
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);

但是微信浏览器禁用了下载链接，你只能采用引导的方式，引导用户将页面内容转成图片显示出来，用户长按显示的图片即可保存到本地。

判断安卓或ios微信

var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
//如果是ios系统
}
else if (browser.versions.android) {
//如果是Android系统 就
}
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
console.log('这是微信')
} else {

}

在线图片压缩地址

https://tinypng.com/

在线二维码生成地址

https://cli.im/

去掉button按钮点击默认篮边

outline: none;

去掉滑动条默认条边

.box::-webkit-scrollbar {
display: none;
}

去掉超链接a标签的下划线

text-decoration: none;

去掉titile显示内容

js开头直接添加

document.title='\u200E';

在线图片转base64码或反转

http://www.atool9.com/img2base64.php

判断客户端ios或安卓，pc，微信

https://blog.csdn.net/zfz5720/article/details/79989361

vue-awesome-swiper中动画不执行问题

在vue页面的swiper上加ref

<swiper id="swiperBox" v-bind:options="swiperOption" ref="mySwiper">

每一个swiper页面加判断当前页数

<!-- 第一页 -->
<swiper-slide class="swiper-slide1">
<div class="page">
<pageRecallTime v-bind:lists="lists" :firstAcRun='mySwiperIndex>=0'></pageRecallTime>
</div>
</swiper-slide>
<!-- 第二页 -->

<swiper-slide class="swiper-slide2">
<div class="page">
<!-- {{mySwiperIndex}} -->
<pageRecallMonth v-bind:lists="lists" :firstAcRun='mySwiperIndex>=1'></pageRecallMonth>
</div>
</swiper-slide>

js代码在swiper控制中加入

on: {
slideChange: () => {
let swiper = this.$refs.mySwiper.swiper
// console.log(swiper.activeIndex, JSON.parse(this.lists.firstFeed).feed_list)
if (swiper.activeIndex === 1 && !JSON.parse(this.lists.firstFeed).feed_list) {
// console.log(1)
let i = swiper.activeIndex
if (this.mySwiperIndex < swiper.activeIndex) {
i++
} else {
i--
}
swiper.slideTo(i, 0, false)
}
if (swiper.activeIndex === 4 && ! (this.lists.mostFeed && JSON.parse(this.lists.mostFeed).feed_list) && (this.lists.lastFeed && !JSON.parse(this.lists.lastFeed).feed_list)) {
// console.log(1)
let i = swiper.activeIndex
if (this.mySwiperIndex < swiper.activeIndex) {
i++
} else {
i--
}
swiper.slideTo(i, 0, false)
}
// console.log(swiper.activeIndex, this.lists.friendShare.head || this.lists.friendLike.head || this.lists.friendComment.head)
if (swiper.activeIndex === 5 && !(this.lists.friendShare.head || this.lists.friendLike.head || this.lists.friendComment.head)) {
let i = swiper.activeIndex
if (this.mySwiperIndex < swiper.activeIndex) {
i++
} else {
i--
}
swiper.slideTo(i, 0, false)
}
this.mySwiperIndex = swiper.activeIndex
}
}

这个时候会出现底下的swiper覆盖上面的swier控制css样式

.flyback{
position: fixed;
left: 0;
top: 0;
}
.box{
width:100vw;
height:100vh;
position: relative;
overflow: hidden;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.swiper-slide {
width:100%;
height:100%;
}

.swiper-slide-active{
position: relative;
z-index: 111;
}

• 点赞
• 收藏
• 分享
• 文章举报

Artoria-Pendragon 发布了12 篇原创文章 · 获赞 6 · 访问量 1528 私信 关注