前端需要学习的HTTP知识

很详细哦 ,感谢-> https://www.cnblogs.com/chaoran/p/4783633.html

点击水波纹效果css实现

阅读请至-> https://demo.demohuo.top/jquery/32/3205/demo/

点击水波纹效果JS实现

阅读请至-> https://github.com/siyuankang/resource/tree/master

vue设置五星好评显示,我是想不到这方法o( ̄▽ ̄)d

1
2
3
4
5
6
data:{
star_active:0
}
<div class="flex-star">
<span v-for="n in 5" class="star-static" :class="{'star-active':star_active>=n}">333</span>
</div>

得到时间差值,精确到秒

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var timestamp = Date.parse( new Date());
var race_time = Date.parse(data.race_time);
var diff = race_time - timestamp;
//计算出相差天数
var days = Math.floor(diff/(24*3600*1000));
//计算出小时数
var leave1=diff%(24*3600*1000); //计算天数后剩余的毫秒数
var hours=Math.floor(leave1/(3600*1000));
//计算相差分钟数
var leave2=leave1%(3600*1000); //计算小时数后剩余的毫秒数
var minutes=Math.floor(leave2/(60*1000));
//计算相差秒数
var leave3=leave2%(60*1000); //计算分钟数后剩余的毫秒数
var seconds=Math.round(leave3/1000);
var returnStr = seconds + "秒";
if(minutes>0) {
returnStr = minutes + "分" + returnStr;
}
if(hours>0) {
returnStr = hours + "小时" + returnStr;
}
if(days>0) {
returnStr = days + "天" + returnStr;
}

时间倒计时效果(非原创)

从这里看到的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var timer = null;
var diff = '时间戳';
timer=setInterval(function(){
var day=0,
hour=0,
minute=0,
second=0;//时间默认值
if(diff > 0){
day = Math.floor(diff / (60 * 60 * 24));
hour = Math.floor(diff / (60 * 60)) - (day * 24);
minute = Math.floor(diff / 60) - (day * 24 * 60) - (hour * 60);
second = Math.floor(diff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
}
if (day <= 9) day = '0' + day;
if (hour <= 9) hour = '0' + hour;
if (minute <= 9) minute = '0' + minute;
if (second <= 9) second = '0' + second;
vm.race_time = day+"天"+hour+"小时"+minute+"分钟"+second+"秒";
diff--;
},1000);
if(diff<=0){
clearInterval(timer);
}

时间戳计算时间差(非原创)

从这里看到的

1
2
3
4
5
6
7
8
9
10
var timestamp = Date.parse( new Date());
var ajaxwork_date = Number(Date.parse(ret.data.content.work_date).toString().substr(0,10));
var today = Number(timestamp.toString().substr(0,10));
var diffstamp = ajaxwork_date - today;
var free_time = Math.floor(diffstamp/86400);
if(free_time < 0) {
ret.data.content.work_date = '空闲';
}else {
ret.data.content.work_date = (free_time + 1) + '天后空闲';
}

vue v-for遍历失败原因

从这里看到的

1
2
3

出现的原因: 可能是页面渲染和请求数据是异步操作, 数据还未请求结束,页面已经开始渲染了,
所以刚开始报未定义变量, 等数据获取结束后,再次渲染,页面内容出来了,但是刚开始的警告也出来了

做数据渲染列表细节

数据列表渲染最忌讳是空白页的出现,用户体验很不好,所以可以这样做

1
2
3
4
5
6
7
8
1. 给渲染变量赋值为缓存,无论这个缓存存在与否。
2. 赋值后html就可以渲染出数据了,同时请求ajax,
比较ajax返回值和赋值缓存的渲染变量,
如果相同,就直接return掉ajax的后续操作,如果
不相同,则把ajax返回数据赋值给渲染变量,
再把变量存入缓存(顺序不要变)。
3. 这样每次进来,可以直接展示缓存的数据,ajax取
到数据不同的话则直接替换。

获取apicloud应用签名的工具

叫GenSignature,直接下载.apk文件安装该应用,然后把你的appID
输入进去就能得到该应用的签名。

使用vue导致ios出现点击延迟问题(加了tapmode没用)

1
2
3
4
5

引用fastclick.js
然后在apiready函数里调用
FastClick.attach(document.body);//解决vue在ios下点击延迟的问题,测试有效
很谢谢这位网友的分享。

fastclick.js文件下载

手机端判断滑动方向【copy】

备注:/兼容安卓滑动事件/

1
2
3
4

html{
touch-action:none;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// // var h = document.documentElement.clientHeight,
// // var h = api.frameHeight;
// mybody = document.getElementsByTagName('body')[0];
// // mybody.style.height = h + 'px';
// //返回角度
// function GetSlideAngle(dx,dy) {
// return Math.atan2(dy,dx) * 180 / Math.PI;
// }
// //根据起点和终点返回方向 1:向上,2:向下,3:向左,4:向右,0:未滑动
// function GetSlideDirection(startX,startY, endX, endY) {
// var dy = startY - endY;
// var dx = endX - startX;
// var result = 0;
// //如果滑动距离太短
// if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
// return result;
// }
// var angle = GetSlideAngle(dx, dy);
// if (angle >= -45 && angle < 45) {
// result = 4;
// }else if (angle >= 45 && angle < 135) {
// result = 1;
// }else if (angle >= -135 && angle < -45) {
//
// result = 2;
//
// }else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
//
// result = 3;
//
// }
//
// return result;
// }
// //滑动处理
// var startX, startY;
// mybody.addEventListener('touchstart', function (ev){
// ev.preventDefault();
// startX = ev.touches[0].pageX;
// startY = ev.touches[0].pageY;
// }, false);
// mybody.addEventListener('touchmove', function (ev){
// var endX, endY;
// ev.preventDefault();
// endX = ev.changedTouches[0].pageX;
//
// endY = ev.changedTouches[0].pageY;
// var direction = GetSlideDirection(startX, startY, endX, endY);
// if(direction == 2){
// $api.addCls($api.byId('header'), 'load');
//
// }
// }, false);

grid布局实现的九宫格【copy】

html代码

1
2
3
4
5
6
7
8
9
10
11
<div class="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>

CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.wrapper {
padding: 10px;
background: #fff1ce;
width: 300px;
height: 300px;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-auto-flow: row;
}

.box {
background-color: #ccc;
color: #000;
border-radius: 5px;
padding: 20px;
}</style>

图片上传,缩略图显示思路(vue)

选中图片后,直接传到后台,后台会返回服务器的图片地址。

1
2
3
4
定义3个数组
thumbImg:[], //用于循环显示的缩略图地址
nativeImg:[], //点击查看大图的数组,完整路径
nativeSubmitImg: [] //存放后台返回的相对路径,发送表单的时候,把这个数组交给后台