王新阳

活动在进行倒计时时，如果手机熄屏、切换程序导致当前程序进入后台）、PC浏览器后台运行（或切换标签页）后，再返回时，可能出现倒计时不准确的现象。原因是程序进入后台运行后浏览器会把定时器调慢，大约是从1秒变为2秒，熄屏后就更慢了。如果是苹果手机定时器直接停止运行。

最初想了个笨办法是定时使用ajax到服务器获取新的时间，结果因为访问量过大，把服务器搞挂了。研究半天，想到了用时间差！打开页面时，计算服务器和本地时间差。后面倒计时时就使用本地时间+时间差，即为服务器时间。不管怎么熄屏都不会出错了。

var diff = 服务器时间 - Math.round(new Date().getTime()/1000,0);
setInterval(function(){
  var serverTime = Math.round(new Date().getTime()/1000,0) + diff;
  ……进行倒计时计算-展示
},1e3);

也可以直接从服务器获取毫秒级时间，进行更精确的控制。如果担心页面打开时延迟导致有小许误差，也可以在页面加载完成后通过ajax从服务器取一次时间，个人感觉误差会更小一些。

FileReader手册 https://developer.mozilla.org/en-US/docs/Web/API/FileReader

html_html5增强的文件上传域_使用FileReader读取文件内容https://www.cnblogs.com/isXianYue/p/13196444.html

HTML

<input type="file" id="file">
<script>
$('#file').change(function(){
	var This=$(this);
	var reader=new FileReader();
	reader.onload=function(){
		$.post('/base64.php',{
				base64:reader.result,
				name:This.get(0).files[0]['name']
			}, function(res){
				alert(res);
		},'text');
	};
	//console.log(This.get(0).files[0]);
	reader.readAsDataURL(This.get(0).files[0]);
});
</script>

PHP

<?php
$base64 = $_POST['base64'];
$name = $_POST['name'];
$file = substr($base64,strpos($base64,','));
$mime = substr(substr($base64, 0, strpos($base64,';')), 5);

file_put_contents($name, base64_decode($file));
echo 'ok';

https://larsjung.de/jquery-qrcode/

https://github.com/lrsjng/jquery-qrcode

https://github.com/jeromeetienne/jquery-qrcode/

Masonry 官网：https://masonry.desandro.com/
imagesLoaded 官网：https://imagesloaded.desandro.com/
参考：https://www.jianshu.com/p/71ba8a69cf0f

<style>
.list .item{padding:10px;width:25%;}
.list .item img{max-width:100%;}
@media(max-width:1199px){
	.list .item{padding:8px;width:33.333333%;}
}
@media(max-width:575px){
	.list .item{padding:5px;width:50%;}
}
</style>
<div class="list">
	<div class="items"><img src="img1.jpg"></div>
	<div class="items"><img src="img2.jpg"></div>
	......
</div>
<script src="masonry.pkgd.min.js"></script>
<script src="imagesloaded.pkgd.min.js"></script>
<script>
var myList=$('.list');
myList.masonry({
	itemSelector: '.item',
	percentPosition: true,
});
myList.imagesLoaded().progress(function(){
	myList.masonry('layout');
});

//ajax加载简略示例
$('#abc').click(function(){
	var items=$('<div class="item"><img src="img2.jpg"></div><div class="item"><img src="img3.jpg"></div>');
	myList.append(items).masonry('appended',items);
	myList.imagesLoaded().progress(function(){myList.masonry('layout');});
/*
	//数组方式加载
	var items=[$('<div class="item"><img src="img2.jpg"></div>'), $('<div class="item"><img src="img3.jpg"></div>')];
	$.each(items, function(key, item){
		myList.append(item).masonry('appended',item);
		item.imagesLoaded().progress(function(){myList.masonry('layout');});
	});
*/
});
</script>

https://gitee.com/sentsin/layui

https://www.layui.com/

http://layuimini.99php.cn/

layui admin后台框架：

http://layuimini.99php.cn/iframe/v2/

http://layuimini.99php.cn/onepage/v2/

下载：

https://github.com/zhongshaofa/layuimini/tree/v2
https://gitee.com/zhongshaofa/layuimini/tree/v2
https://github.com/zhongshaofa/layuimini/tree/v2-onepage
https://gitee.com/zhongshaofa/layuimini/tree/v2-onepage

https://github.com/zenorocha/clipboard.js

http://www.clipboardjs.cn/

http://www.webkaka.com/Blog/ARCHIVES/demo/clipboard.js-master/demo/index.html

当音频/视频处于加载过程中时，会依次发生以下事件：

1、loadstart
当浏览器开始寻找指定的音频/视频时，会发生 loadstart 事件。即当加载过程开始时。

2、durationchange
当指定音频/视频的时长数据发生变化时，发生 durationchange 事件。 当音频/视频加载后，时长将由 "NaN" 变为音频/视频的实际时长。

3、loadedmetadata
当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。 音频/视频的元数据包括：时长、尺寸（仅视频）以及文本轨道。

4、loadeddata
当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。

5、progress
当浏览器正在下载指定的音频/视频时，会发生 progress 事件。

6、canplay
当浏览器能够开始播放指定的音频/视频时，发生 canplay 事件。

7、canplaythrough
当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。

https://github.com/imgix/drift

http://www.htmleaf.com/jQuery/Image-Effects/drift-luminous-javascript-zoom-on-hover.html

转自:https://blog.csdn.net/star_yt/article/details/52982407

JS 代码预防
<script type="text/javascript">
if (document.domain != 'xxx.com' && document.domain != 'www.xxx.com'){
 window.location.href='http://www.xxx.com/';
}
</script>


PHP 代码预防
$url = $_SERVER['SERVER_NAME'];
if( $url!= 'xxx.com' || $url!= 'www.xxx.com' ) 
{
 echo '非法反向代理访问';
 //header('Location: http://www.xxx.com/');
 exit;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

正向代理，也就是传说中的代理，他的工作原理就像一个跳板。简单的说，我是一个用户，我访问不了某网站，但是我能访问一个代理服务器。这个代理服务器呢，他能访问那个我不能访问的网站，于是我先连上代理服务器，告诉他我需要那个无法访问网站的内容，代理服务器去取回来，然后返回给我。从网站的角度，只在代理服务器来取内容的时候有一次记录，有时候并不知道是用户的请求，也隐藏了用户的资料，这取决于代理告不告诉网站。

结论就是，正向代理是一个位于客户端和原始服务器(origin server)之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端必须要进行一些特别的设置才能使用正向代理。

那么反向代理的概念呢？

比如用户访问 http://www.xxx.com/books/list这个页面，但www.xxx.com实际上并不存在这个页面，他是偷偷从另外一台服务器上取回来，然后作为自己的内容吐给用户。

但用户并不知情，这很正常，用户一般都很笨。这里所提到的 www.xxx.com 这个域名对应的服务器就设置了反向代理功能。

结论就是反向代理正好相反，对于客户端而言它就像是原始服务器，并且客户端不需要进行任何特别的设置。客户端向反向代理 的命名空间(name-space)中的内容发送普通请求，接着反向代理将判断向何处(原始服务器)转交请求，并将获得的内容返回给客户端，就像这些内容原本就是它自己的一样。

区别 / 总结：

正向代理：客户端知道服务端，通过代理端连接服务端。代理端代理的是客户端。
反向代理：所谓反向，是对正向而言的。服务端知道客户端，客户端不知道服务端，通过代理端连接服务端。代理端代理的是服务端。代理对象恰好相反，故名反向代理

恶意反向代理的危害

网站被恶意反向代理有什么危害呢？这里列举一下：

•首先肯定会占用服务器资源，网站打开速度受影响。
•其次，别人通过代理盗用你的网站数据，对用户与不是那么智能的搜索引擎而言，相当于建了一个与你一模一样的站点，那么很有可能你的站点会进搜索引擎沙箱，甚至被降权。
•如果被恶意代理的页面，还挂有你的联盟广告（比如Adsense），这就十分危险了，如果有人点击了上面的广告，很容易被Adsense封号。

如何预防网站被反向代理？

JS 代码预防
<script type="text/javascript">
if (document.domain != 'xxx.com' && document.domain != 'www.xxx.com'){
 window.location.href='http://www.xxx.com/';
}
</script>


PHP 代码预防
$url = $_SERVER['SERVER_NAME'];
if( $url!= 'xxx.com' || $url!= 'www.xxx.com' ) 
{
 echo '非法反向代理访问';
 //header('Location: http://www.xxx.com/');
 exit;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17