Fork me on GitHub

somecode

一些代码

1
2
3
4
5
6
7
<body onpageshow="myFunction(event)">

<script>
function myFunction(event) {
alert("页面是否从浏览器缓存中加载? " + event.persisted);
}
</script>

css

  1. css伪元素、伪类,css奇数偶数(:nth-child(odd,even,2n,2n+1))
    在CSS中使用负的 nth-child 选择项目1到项目n。
1
2
3
4
5
6
7
8
9
//一屏显示样式
.center-back[data-v-0613fe46] {
position: relative;
min-height: 100%;
width: 100%;
background: url(/qxby-h5/static/img/background.d092639.png) no-repeat center 0 fixed;
background-size: 100vw 100vh;
background-color: #000;
}
1
2
3
4
5
6
7
8
li {
display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
display: block;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
//css 浏览器前缀
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:flex;

-webkit-box-flex:1;
-moz-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;

div { width: calc(100% - 100px);}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
清浮动(父元素)
.clearfix:after{
content:'.';
display:block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {zoom:1;}

经益求精写法
.clearfix:after {
content:”\200B”;
display:block;
height:0;
clear:both;
}
//照顾IE6,IE7就可以了
.clearfix { *zoom:1; }
1
calc(100vh-60px)

js

1
2
3
4
5
6
7
8
//浮点数操作
var num=0.57;parseInt(num.toString().replace('.', ''), 10);

//angular
angular.element($0).scope();
监测
abc.$apply(function(){abc.hasMore=true})
abc.$apply(abc.hasMore=true)
1
2
3
4
5
6
7
<!--DATE-->
var year = new Date().getFullYear();
var month = new Date().getMonth();
var day = new Date().getDate();
this.setData({
nowDate: year + '-' + (month+1) + '-' + day
})
1
2
3.判断标签是否含有这个属性(placeholder && tabIndex && name等)
if("placeholder" in document.createElement("input"))
1
2
3
4
5
6
7
8
9
10
//密码限制
onkeyup="value=value.replace(/[^a-z0-9_]/g,'')"
//图片出错
<img src="pic.gif" onerror="javascript:this.src='/NoPic.gif';" />

navigator.userAgent.indexOf('Firefox') >= 0 //判断浏览器
console.time('small loop');
for (var i = 0; i < 100000; i++) {
}
console.timeEnd('small loop');
1
2
3
4
5
6
7
8
9
10
11
12
//DOM没有提供insertAfter()方法
function insertAfter(newElement, targetElement){
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
// 如果最后的节点是目标元素,则直接添加。因为默认是最后
parent.appendChild(newElement);
}
else {
parent.insertBefore(newElement, targetElement.nextSibling);
//如果不是,则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面
}
}
1
2
3
1.setInterval
var b = 123; setInterval(function(b){consolel.log(b);},3000,b);b=345;
setInteval((b)=>{},3000,b); //这样以来我们就可以立即传这个值了
1
2
3
4
5
6
7
8
防止多次点击事件
if (window.isClicking) {
return;
}
window.isClicking = true;

TODO....
window.isClicking = false;

知识点

1
2
3
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
manifest 文件的建议的文件扩展名是:".appcache"。
请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 解决键盘弹出后挡表单的问题
//这个api还可以设置对齐方法,选择将input放在屏幕的上方/下方
window.addEventListener('resize', function() {
if(
document.activeElement.tagName === 'INPUT' ||
document.activeElement.tagName === 'TEXTAREA'
) {
window.setTimeout(function() {
if('scrollIntoView' in document.activeElement) {
document.activeElement.scrollIntoView();
} else {
document.activeElement.scrollIntoViewIfNeeded();
}
}, 0);
}
});
1
2
3
textarea多行回车换行,显示的时候换行设置:
在使用textarea标签输入多行文本的时候,如果没有对多行文本显示处理,会导致没有换行的情况,就比如下面这种情况,用户在textarea是有换行的。
只要在显示内容的地方将该属性设置为white-space: pre-line或者white-space:pre-wrap,多行文本就可以换行了。

移动端100%链接

1
html,body{height:100%;width:100%;overflow: hidden;}

活动代码整理

姐姐乐

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
//audio 自动播放(微信)
//TIP 使用了两次ready
wx.ready(function() {
jieMusic.play();
jieMusic.pause();
});
wx.ready(function(){
jieMusic.play();
});

//APP
window.onload = function() {
babyCart.addEventListener("touchstart", function (e) {
jieMusic = document.querySelector('#jieMusic')
jieMusic.play();
jieMusic.pause();
});
}



//硬件加速
.isaax{
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}

//动态移动
.move_transition{transition: all 1.5s;}
tipImg.style.top = flyer.offsetTop - 20 + 'px';
tipImg.style.left = flyer.offsetLeft + flyer.clientWidth/2 + 'px';
document.body.appendChild(tipImg);
tipImg.classList.add('move_transition');
tipImg.style.top = flyer.offsetTop - 60 + 'px';
tipImg.style.left = flyer.offsetLeft + flyer.clientWidth/2 + 20 + 'px';
1
2
3
4
5
6
7
8
//可以考虑用我的博客懒加载  http://pzhicong.com/2017/05/02/lazyload/
target.diyOffsetTop = document.documentElement.clientHeight -
parseFloat(document.documentElement.style.fontSize) * 0.56 - target.offsetHeight;
//判断物体相撞
flyer.offsetTop+flyer.offsetHeight>=target.offsetTop &&
flyer.offsetTop<=target.offsetTop+target.offsetHeight &&
flyer.offsetLeft+flyer.offsetWidth>=target.offsetLeft &&
flyer.offsetLeft<=target.offsetLeft+target.offsetWidth
1
2
3
4
5
6
7
8
9
//轮寻
function giftGoDown(giftId, $scope, $interval, $cookies, $http) {
if (!isPlay) {
timeout = setTimeout(function () {
giftGoDown(giftId, $scope, $interval, $cookies, $http);
}, 100);
return;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function goToTop(){
if (mama.device.platform == 'android') {
setTimeout(function(){
window.scrollTo(0,sessionStorage.myTop|| 0);
},100);
}
}

window.onbeforeunload = function() {
sessionStorage.myTop = document.documentElement.scrollTop || document.body.scrollTop;
}

// if (mama.device.platform == 'android') {
// history.scrollRestoration = 'manual';
// }

transpiling:同一种语言 es6=>es5
compiling: 一种语言的代码编译成另一种语言

yeoman