评论 - lizhenqiu blog

#⁴⁵⁷

作者：广西河池市宜州市

HTML5实现图形挤压变形效果DEMO

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>HTML5实现图形挤压变形效果DEMO演示</title>

<style>
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}body {
  background: #000;
}

.zone {
  width: 800px;
  height: 600px;
  background: #000;
  margin: auto;
  -webkit-filter: blur(15px) saturate(800%);
          filter: blur(15px) saturate(800%);
  cursor: none;
}
.zone .blob {
  width: 90px;
  height: 67.5px;
  margin: 20px 20px;
  background: red;
  float: left;
  border-radius: 100%;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.zone .repulse {
  width: 90px;
  height: 67.5px;
  background: lightblue;
  display: block;
  position: absolute;
  border-radius: 100%;
  -webkit-filter: saturate(600%);
          filter: saturate(600%);
}
</style>

</head>

<body>

  <div class="zone">
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>

  <span class="repulse"></span>
</div>

  <script src='https://lizhenqiu.com/templates/default/jquery.min.js'></script>

  <script>$(document).on('mousemove', function(e){
    $('.repulse').css({
       left:  e.pageX,
       top:   e.pageY
    });
});</script>

</body>

</html>

Run code

Cut to clipboard

文章：常用代码2 发表时间：2018-08-01, 09:55:31

展开↯

#⁴⁵⁸

作者：广西河池市宜州市

js各种获取当前窗口页面宽度、高度的方法

alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
 
alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度

Run code

Cut to clipboard

文章：常用代码2 发表时间：2018-07-30, 09:28:41

展开↯

#⁴⁵⁹

作者：广西河池市宜州市

404数字动画页面特效果变化增加

文章：404创意动画闪动页面发表时间：2018-07-26, 16:43:58

展开↯

#⁴⁶⁰

作者：广西河池市宜州市

鼠标移动星星jq代码跟随鼠标移动

(function() {
	var N;
	$(function() {
		
		window.giffy_bp_0013 = {
			canvas: null,
			ball: [],
			ballImageResource: [],
			subBall: [],
			subBallImageResource: [],
			actionCount: [],
			timerId: null,
			waitCnt: 0,
			curBallIdx: 0,
			mouseX: 0,
			mouseY: 0,
			init: function() {
				for (i = 0; i < 1; i++) {
					var j = "/mouse_star/subball" + (i + 1) + ".png";
					giffy_bp_0013.ballImageResource[i] = new Image;
					giffy_bp_0013.ballImageResource[i].src = j
				}
				for (i = 0; i < 8; i++) j = "/mouse_star/subball" + (i + 1) + ".png", giffy_bp_0013.subBallImageResource[i] =
					new Image, giffy_bp_0013.subBallImageResource[i].src = j;
				for (i = 0; i < 20; i++) {
					giffy_bp_0013.ball[i] = $("<div />", {
						id: "giffy_bp_0013_ball_" + i,
						no: i,
						css: {
							position: "absolute",
							visibility: "hidden",
							zIndex: "10000"
						},
						html: "",
						click: function() {}
					}).appendTo("body");
					giffy_bp_0013.subBall[i] = [];
					for (n = 0; n < 3; n++) giffy_bp_0013.subBall[i][n] = $("<div />", {
						id: "giffy_bp_0013_subball_" + i + "_" + n,
						no: i,
						subno: n,
						css: {
							position: "absolute",
							visibility: "hidden",
							zIndex: "10000"
						},
						html: "",
						click: function() {}
					}).appendTo("body");
					giffy_bp_0013.actionCount[i] =
						0
				}
				$("html").mousemove(function(j) {
					giffy_bp_0013.mouseX = j.pageX;
					giffy_bp_0013.mouseY = j.pageY;
					if (giffy_bp_0013.waitCnt == 0 && giffy_bp_0013.actionCount[giffy_bp_0013.curBallIdx] == 0) giffy_bp_0013.waitCnt = 2, giffy_bp_0013.actionCount[giffy_bp_0013.curBallIdx] = 1, giffy_bp_0013.curBallIdx = giffy_bp_0013.curBallIdx == 19 ? 0 : giffy_bp_0013.curBallIdx + 1
				});
				timerId = setInterval("giffy_bp_0013.action()", 50)
			},
			action: function() {
				for (i = 0; i < 20; i++) switch (giffy_bp_0013.actionCount[i]) {
					case 1:
						var j = giffy_bp_0013.ballImageResource[giffy_bp_0013.getRandomNum(1)];
						giffy_bp_0013.ball[i].css({
							background: "url(" + j.src + ") no-repeat",
							height: j.height,
							width: j.width
						});
						giffy_bp_0013.move(giffy_bp_0013.ball[i], {
							top: giffy_bp_0013.mouseY + 10,
							left: giffy_bp_0013.mouseX + 10
						});
						giffy_bp_0013.animateY(giffy_bp_0013.ball[i], giffy_bp_0013.mouseY, 100, "swing", function() {
							giffy_bp_0013.actionCount[$(this).attr("no")] = 2
						});
						giffy_bp_0013.setVisible(giffy_bp_0013.ball[i]);
						giffy_bp_0013.actionCount[i] = 0;
						break;
					case 2:
						giffy_bp_0013.setHidden(giffy_bp_0013.ball[i]);
						var l = giffy_bp_0013.ball[i].position();
						for (n = 0; n < 3; n++) giffy_bp_0013.move(giffy_bp_0013.subBall[i][n], l), giffy_bp_0013.animateRandomXY(giffy_bp_0013.subBall[i][n], l.left - 30, l.left + 30, l.top, l.top + 30, 200, "swing", function() {
							$(this).attr("subno") == 2 && (giffy_bp_0013.actionCount[$(this).attr("no")] = 3)
						}), j = giffy_bp_0013.subBallImageResource[giffy_bp_0013.getRandomNum(8)], giffy_bp_0013.subBall[i][n].css({
							background: "url(" + j.src + ") no-repeat",
							height: j.height,
							width: j.width
						}), N || giffy_bp_0013.setOpacity(giffy_bp_0013.subBall[i][n], 1), giffy_bp_0013.setVisible(giffy_bp_0013.subBall[i][n]);
						giffy_bp_0013.actionCount[i] = 0;
						break;
					case 3:
						for (n = 0; n < 3; n++) l = giffy_bp_0013.subBall[i][n].position(), N ? giffy_bp_0013.animateRandomXY(giffy_bp_0013.subBall[i][n], l.left, l.left, l.top + 10, l.top + 50, 1E3, "linear", function() {
							$(this).attr("subno") == 2 && (giffy_bp_0013.actionCount[$(this).attr("no")] = 4)
						}) : giffy_bp_0013.animateRandomXYFadeout(giffy_bp_0013.subBall[i][n], l.left, l.left, l.top + 10, l.top + 50, 1E3, "linear", function() {
							$(this).attr("subno") == 2 && (giffy_bp_0013.actionCount[$(this).attr("no")] = 4)
						});
						giffy_bp_0013.actionCount[i] =
							0;
						break;
					case 4:
						for (n = 0; n < 3; n++) giffy_bp_0013.setHidden(giffy_bp_0013.subBall[i][n]);
						giffy_bp_0013.actionCount[i] = 0
				}
				giffy_bp_0013.waitCnt > 0 && giffy_bp_0013.waitCnt--
			},
			getRandomNum: function(j) {
				return Math.floor(Math.random() * j)
			},
			move: function(j, l) {
				j.css({
					top: l.top,
					left: l.left
				})
			},
			moveViewTop: function(j) {
				j.css({
					top: giffy_bp_0013.getViewTop()
				})
			},
			moveViewBottom: function(j) {
				j.css({
					top: giffy_bp_0013.getViewBottom() - j.outerHeight()
				})
			},
			moveViewLeft: function(j) {
				j.css({
					left: giffy_bp_0013.getViewLeft()
				})
			},
			moveViewRight: function(j) {
				j.css({
					left: giffy_bp_0013.getViewRight() - j.outerWidth()
				})
			},
			moveViewTopLeft: function(j) {
				giffy_bp_0013.moveViewTop(j);
				giffy_bp_0013.moveViewLeft(j)
			},
			moveViewTopRight: function(j) {
				giffy_bp_0013.moveViewTop(j);
				giffy_bp_0013.moveViewRight(j)
			},
			moveViewBottomLeft: function(j) {
				giffy_bp_0013.moveViewBottom(j);
				giffy_bp_0013.moveViewLeft(j)
			},
			moveViewBottomRight: function(j) {
				giffy_bp_0013.moveViewBottom(j);
				giffy_bp_0013.moveViewRight(j)
			},
			moveRandomTop: function(j) {
				j.css({
					top: giffy_bp_0013.getViewTop() + giffy_bp_0013.getRandomNum(giffy_bp_0013.getViewHeight() - j.outerHeight())
				})
			},
			moveRandomLeft: function(j) {
				j.css({
					left: giffy_bp_0013.getViewLeft() + giffy_bp_0013.getRandomNum(giffy_bp_0013.getViewWidth() - j.outerWidth() - 100)
				})
			},animateY: function(j, l, q, r, u) {
				j.animate({
					top: l
				}, q, r, u)
			},
			animateRandomY: function(j, l, q, r, u, w) {
				giffy_bp_0013.animateY(j, l + giffy_bp_0013.getRandomNum(q - l), r, u, w)
			},
			animateX: function(j, l, q,
				r, u) {
				j.animate({
					left: l
				}, q, r, u)
			},
			animateRandomX: function(j, l, q, r, u, w) {
				giffy_bp_0013.animateX(j, l + giffy_bp_0013.getRandomNum(q - l), r, u, w)
			},
			animateXY: function(j, l, q, r, u, w) {
				j.animate({
					top: q,
					left: l
				}, r, u, w)
			},
			animateRandomXY: function(j, l, q, r, u, w, z, N) {
				giffy_bp_0013.animateXY(j, l + giffy_bp_0013.getRandomNum(q - l), r + giffy_bp_0013.getRandomNum(u - r), w, z, N)
			},
			animateXYFadeout: function(j, l, q, r, u, w) {
				j.animate({
					top: q,
					left: l,
					opacity: "0"
				}, r, u, w)
			},
			animateRandomXYFadeout: function(j, l, q, r, u, w, z, N) {
				giffy_bp_0013.animateXYFadeout(j,
					l + giffy_bp_0013.getRandomNum(q - l), r + giffy_bp_0013.getRandomNum(u - r), w, z, N)
			},
			setOpacity: function(j, l) {
				j.css({
					opacity: l
				})
			},
			setHidden: function(j) {
				j.css({
					visibility: "hidden"
				})
			},
			setVisible: function(j) {
				j.css({
					visibility: "visible"
				})
			}
		}
	});
	$(document).ready(function() {
		giffy_bp_0013.init()
	})
})();

Run code

Cut to clipboard

图片
mouse_star.rar

文章：常用代码2 发表时间：2018-07-26, 16:31:24

展开↯

#⁴⁶¹

作者：广西河池市宜州市

解决Gitlab的The remote end hung up unexpectedly错误
在.git\config配置文件中加：

[http] 
postBuffer = 524288000

Run code

Cut to clipboard

#,广西河池市宜州市,2018-07-23,16:07:49, .gitignore

#,广西河池市宜州市,2018-07-23,16:08:07,@1,

/databases/
/logfiles/
/新建文件夹/
/cache/
/others/
/wwwroot/u/
/wwwroot/simsun.ttc
/wwwroot/favicon.ico
/wwwroot/新建文件夹/
/wwwroot/images/
/team20180605.sql
/wwwroot20180605.rar
/upload/
/Uploads/
/images/
/Cache/
/布局/
/tx/
/config/config_db.php

Run code

Cut to clipboard

#,广西河池市宜州市,2018-07-23,17:20:26, github syncing 很慢

C:\windows\system32\drivers\etc
151.101.72.133	assets-cdn.github.com
151.101.72.133	github.global.ssl.fastly.net
52.74.223.119	github.com

http://tool.chinaz.com/dns

Run code

Cut to clipboard

清除本地DNS缓存

@echo off
ipconfig /flushdns

Run code

Cut to clipboard

#,广西河池市宜州市,2018-07-25,15:57:17,
git clone , git fetch, git pull和git rebase

Git Pull
pull时，它将会获取远程服务器(你请求的，无论什么分支)上的代码，并且立即合并到你的本地厂库，Pull是一个高等级的请求，默认会支持Fetch和merge的操作，如果不是为了使用上的方便，你可以完全不使用它。

$git checkout localbranch
$git pull origin master
$git branch
master 
*localbranch

Run code

Cut to clipboard

上面的命令会将远程服务器上的master分支合并到localbranch中。

Git Fetch
fetch和pull很相似，只是fetch不会做任何的合并操作。

$git checkout localbranch
$git fetch origin remotebranch
$git branch
master
*localbranch
remotebranch

Run code

Cut to clipboard

因此，fetch指是获取remotebranch,然后创建一个本地copy,你不应该直接对这个copy做任何的操作，而应该应该创建一个本地分支，然后在本地分支上进行工作。

Git Clone
clone将会克隆一个本地厂库，

$cd newfolder
$git clone git@github.com:whatever/something.git
$git branch
*master
remotebranch

Run code

Cut to clipboard

clone会为它被克隆的远程repo创建一个名为“origin”的local repo，并为远程repo的活动分支创建一个本地分支以及远程跟踪分支。

git rebase
这个命令相当的cool,你对当前分支所作的任何改变都被保存到一个临时区域，因此你的分支将会和改变之前一样干净。如果你用git pull -rebase,git将会获取远程的改变，遍历当前本地分支，然后替换你当前分支的所有改动。

如果你在使用过程中遇到了问题，使用

git branch -a

Run code

Cut to clipboard

,它会显示本地厂库的所有分支：本地的，远程的。这是一个很好的杀手锏，请记住，git bracches只是一个pointer。所以为了能够处理这些提交请求，你需要一个本地分支，通过本地分支你可以获取这些提交。

#,广西河池市宜州市,2018-07-25,16:23:28,

#,广西河池市宜州市,2018-07-25,17:09:27,

$ git push origin

上面命令表示，将当前分支推送到origin主机的对应分支。

如果当前分支只有一个追踪分支，那么主机名都可以省略。

$ git push 如果当前分支与多个主机存在追踪关系，那么这个时候-u选项会指定一个默认主机，这样后面就可以不加任何参数使用git push。

$ git push -u origin master 上面命令将本地的master分支推送到origin主机，同时指定origin为默认主机，后面就可以不加任何参数使用git push了。

不带任何参数的git push，默认只推送当前分支，这叫做simple方式。此外，还有一种matching方式，会推送所有有对应的远程分支的本地分支。Git 2.0版本之前，默认采用matching方法，现在改为默认采用simple方式。

文章：GitHub代码管理代码托管发表时间：2018-07-23, 16:07:07

展开↯

#⁴⁶²

作者：黑龙江省佳木斯市

你是个有良心的作者，赞一个

#,广西南宁市,2018-07-18,23:48:28,

文章：如何应对华盖创意(视觉中国)的恶意诉讼发表时间：2018-07-18, 23:46:50

展开↯

#⁴⁶³

作者：广西南宁市

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-07-18, 23:09:09

展开↯

#⁴⁶⁴

作者：广西河池市宜州市

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-07-18, 17:51:18

展开↯

#⁴⁶⁵

作者：广西河池市宜州市

win10启动疑难解答
Windows开机启动高级选项 win10进入高级选项
同时按住shit键并点击重启

文章：电脑常用软件收藏推荐收集【持续更新】发表时间：2018-07-18, 17:16:21

展开↯

#⁴⁶⁶

作者：广西河池市宜州市

国税局异步上传头像

	function uptx(){
			$('.up_buttom').removeAttr('onclick');
			$('.up_buttom').text('正在上传....');
			var formData = new FormData($('#myformup')[0]);
			$.ajax({
				type: "POST",
				url:'/index.php/Members/Uptx/index',
				//data:$('#myformup').serialize(),
				
				cache: false,
				data: new FormData($('#myformup')[0]),
				processData: false,
				contentType: false,
				
				error: function(request) {
					alert('服务器繁忙');
					location.reload();
					return false;
				
				
					//alert("提交失败");
				},
				success: function(data) {
					if(data=='upok'){
						alert('上传修改头像成功');
						location.reload();
						return false;
					}else{
						alert('上传失败');
						location.reload();
						return false;
					
					}
					
				}
			});
	}

Run code

Cut to clipboard

			success: function(data){
				//data=JSON.parse(data);
				//alert(file);
				var upToken=data.upToken;
				var nnaame=data.nnaame;

					var xhr = new XMLHttpRequest(),
					fd = new FormData;

					

					
					xhr.open('POST', 'https://up.qbox.me', true);  // 'url'
					//可以通过progress事件监听上传进度
					
					xhr.onload = function() {
					  // 上传完成
					  //alert(nnaame);
					  $('.watermark').hide();
						if(typestrsff=='video') codeanddd('contentadddd','[testmp4]https://out.img.pan.lizhenqiu.com/'+nnaame+'[/testmp4]');
						else if(typestrsff=='audio') codeanddd('contentadddd','[testmp3]https://out.img.pan.lizhenqiu.com/'+nnaame+'[/testmp3]');
						else if(typestrsff!='image' && nttyyynammmname) codeanddd('contentadddd','[testurl=https://out.img.pan.lizhenqiu.com/'+nnaame+'?download/'+nttyyynammmname+']'+nttyyynammmname+'[/testurl]');
						else codeanddd('contentadddd','[testimg]https://out.img.pan.lizhenqiu.com/'+nnaame+'[/testimg]');
						$('#myCanvasimgpuppmain').hide();
						submitinputtvllsscccc("上传成功！");
						$('#getimgupjinduidd').css({'height':'0px','width':'0px'});
					}
					// 
					
						xhr.upload.onprogress = function (evt) {
							if (evt.lengthComputable) {
							  var percentComplete = Math.round(evt.loaded * 100 / evt.total);
							  //document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
							  //console.log(percentComplete.toString() + '%');
							  $('#submitinputtvllss').text("正在上传.. "+percentComplete.toString() + '%');
							  $('#getimgupjinduidd').css({'height':'100%','width':+percentComplete.toString() + '%'});
							}
							else {
								//console.log('无法计算');
							  //document.getElementById('progressNumber').innerHTML = '无法计算';
							}
						  }
					
						xhr.onerror = function (e){
							/*document.getElementById("myformssssww").submit();
							setTimeout(function(){
								nnntimgetimg();
							},2500);
							return false;*/
							$('#submitinputtvllss').text('该浏览器不支持拖曳上传，请选择文件。');
							alert('该浏览器不支持拖曳上传，请选择文件。');path.click();return false;
						}
					
					
					fd.append('file', file); // 'file'
					fd.append('key', nnaame);
					fd.append('token', upToken);
					xhr.send(fd);
	
			}

Run code

Cut to clipboard

#,广西河池市宜州市,2018-07-18,16:40:17,

<!DOCTYPE html>
<html>
<head>
    <title>Upload Files using XMLHttpRequest - Minimal</title>
</head>
<body>
  <form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
    <div class="row">
      <label for="fileToUpload">Select a File to Upload</label><br>
      <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();">
    </div>
    <div id="fileName"></div>
    <div id="fileSize"></div>
    <div id="fileType"></div>
    <div class="row">
      <input type="button" onclick="uploadFile()" value="Upload">
    </div>
    <div id="progressNumber"></div>
  </form>
  
<script>
function fileSelected() {
  var file = document.getElementById('fileToUpload').files[0];
  if (file) {
    var fileSize = 0;
    if (file.size > 1024 * 1024){
      fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
    }else{
      fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
    }      
    document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
    document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
    document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
  }
}
</script>
  
  
  
  
  
  
  
  
</body>
</html>

Run code

Cut to clipboard

#,广西河池市宜州市,2018-07-18,16:43:21,

var fd = new FormData(document.getElementById('form1'));

Run code

Cut to clipboard

这个构造函数的优点是可以用所有表单填充FormData实例（不必手动完成）

#,广西河池市宜州市,2018-07-18,17:00:26, 数组巧去重new Set

let arr = [1, 2, 2, 3];
let set = new Set(arr);
let newArr = Array.from(set); // Array.from方法可以将 Set 结构转为数组。

console.log(newArr); // [1, 2, 3]

Run code

Cut to clipboard

文章：XMLHttpRequest上传文件实现进度条项目整理发表时间：2018-07-18, 16:38:10

展开↯

#⁴⁶⁷

作者：广西河池市宜州市

AJAX问题之XMLHttpRequest status = 0
为什么是xmlhttp.onreadystatechange = state_Change而不是xmlhttp.onreadystatechange = state_Change();

为的是把整个函数给onreadystatechange，而不是将函数最后处理完的值返回给onreadystatechange

Run code

Cut to clipboard

onreadystatechange是一个事件句柄，同样功能的还有onclick这些，就是有点击事件的时候会进行特定处理，具体看你的函数怎么写了。而onreadystatechange是由readyState触发，readyState存着XMLHttpRequest的状态，

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

readyState改变，调用onreadystatechange这个函数，注意，是这个函数，那我们是不是要赋值一个函数给他，而不是单纯地返回一个值。

#,广西河池市宜州市,2018-07-18,16:36:42, 七牛云存储 - JavaScript SDK 上传示例
XMLHttpRequest 跨域时产生了 OPTIONS 请求
XMLHttpRequest上传文件实现进度条

if (window.XMLHttpRequest) {     //   Mozilla   浏览器                                    //新建XMLHttpRequest对象  
    xmlhttp = new XMLHttpRequest();  
} else if (window.ActiveXObject) {   //   IE   浏览器     
    try {  
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  
    } catch (e) {  
        try {  
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
        } catch (e) { }  
    }  
}

Run code

Cut to clipboard

使用FormData向服务器发送不了数据
你真的会使用XMLHttpRequest吗？
AJAX POST&跨域解决方案 - CORS
进度事件(Progress Events)
OPTIONS 方法在跨域请求（CORS）中的应用
解决错误指定RequestHeader导致后台接受不到FormData数据的问题

xhr文件上传，进度感知
异步上传文件，在很多场景中都有应用。本文介绍一种通过xhr和formdata实现的方法。

FormData属于h5的内容所以，浏览器兼容不是很好，下面是一种polyfill，inspired by francois2metz/html5-formdata

(function(w) {
    if (w.FormData)
        return;
    function FormData() {
        this.boundary = "--------FormData" + Math.random();
        this._fields = [];
    }
    FormData.prototype.append = function(key, value) {
        this._fields.push([key, value]);
    }
    FormData.prototype.toString = function() {
        var boundary = this.boundary;
        var body = "";
        this._fields.forEach(function(field) {
            body += "--" + boundary + "\r\n";
            // file upload
            if (field[1].name) {
                var file = field[1];
                body += "Content-Disposition: form-data; name=\""+ field[0] +"\"; filename=\""+ file.name +"\"\r\n";
                body += "Content-Type: "+ file.type +"\r\n\r\n";
                body += file.getAsBinary() + "\r\n";
            } else {
                body += "Content-Disposition: form-data; name=\""+ field[0] +"\";\r\n\r\n";
                body += field[1] + "\r\n";
            }
        });
        body += "--" + boundary +"--";
        return body;
    }
    w.FormData = FormData;
    var _send = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.send = function(data) {
        if (data instanceof FormData) {
            xhr.setRequestHeader("Content-Type", "multipart/form-data;boundary="+ data.boundary);
            return xhr.sendAsBinary(data.toString());
        }
        return _send.call(this, data);
    };
})(window);

Run code

Cut to clipboard

像这样使用

var data = new FormData();
data.append('file', document.getElementById('file').files[0]);
xhr.open('POST', '/', true);
xhr.onprogress = (function(){
    var progress = 0;
    return function(evt){
        var p = ~~(evt.loaded*1000/evt.total)
        p /= 1000
        if(progress !=== p){
            progress = p
            console.log('progress: ', p)
        }
    }
})();

Run code

Cut to clipboard

关于兼容性，只要支持FieApi就没问题

HTML5利用FormData对象实现显示进度条的文件上传【译】
HTML5利用FormData对象实现显示进度条的文件上传【英】

文章：XMLHttpRequest上传文件实现进度条项目整理发表时间：2018-07-18, 16:28:11

展开↯

#⁴⁶⁸

作者：广西

#,广西,2018-07-18,10:58:11,

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-07-18, 10:51:21

展开↯

#⁴⁶⁹

作者：广西河池市宜州市

理论上说能透视的都是瞎子，因为全透光了，等于什么都看不到

#,广西河池市宜州市,2018-07-07,10:18:04, 会使用大量无意义的运算增加服务器负担

#,广西河池市宜州市,2018-07-07,10:43:48, 我们政治老师说要见义智为见义勇为容易被犯错

#,广西河池市宜州市,2018-07-07,11:03:45, 一个组织人越多，上面的人就越在乎面子

#,广西河池市宜州市,2018-07-09,09:40:23, 在数字货币挖矿界，算力是生存的根本

#,广西河池市宜州市,2018-07-09,09:48:36, 学术和学校只有脱离了政治和经济的范畴，才有创新的土壤。反观我们，正是走的另一条路

#,广西河池市宜州市,2018-07-09,11:20:43, 互联网缺乏理性的声音，因为理性的声音很难激起共鸣，为了流量，标题党和把经念歪成了政治正确，然后却会误导非常多的普通大众

#,广西,2018-07-09,12:34:43, 「豹变」，来自《易》中「九五，大人虎变，未占有孚。上六，君子豹变，小人革面。征凶，居贞吉」。陈丹青《退步集》对此的解释沿用了《易传》「君子豹变，其文蔚也」的说法。即豹子成年后才有华丽的皮毛，「君子」当与之同。

#,广西河池市宜州市,2018-07-11,10:23:23, 人活着，重要的是舒服，梦想终究是梦想，年纪大了要考虑成本的

#,广西河池市宜州市,2018-07-11,10:26:22, 鲁迅说过： “人类的悲欢并不相通，我只觉得他们吵闹。”

#,广西南宁市,2018-07-16,01:36:56, 顺，不妄喜；逆，不惶馁；安，不奢逸；危，不惊惧；胸有惊雷而面如平湖者，可拜上将军。

#,广西河池市宜州市,2018-07-17,14:43:16, 现实主义才是当下的良药

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-07-07, 09:53:23

展开↯

#⁴⁷⁰

作者：广西河池市宜州市

微信支付 time_expire时间过短，刷卡至少1分钟，其他5分钟
问题原因：服务器时间不对。
解决办法，更新服务器时间，或者在生成预支付订单号时，不填写time_expire字段因为这个字段不是必须填写的。

文章：常用代码2 发表时间：2018-07-17, 12:52:36

展开↯

#⁴⁷¹

作者：广西河池市宜州市

php 远程下载文件
php实现远程网络文件下载到服务器指定目录
php后台远程更新下载运行

<?php
function getFile($url, $save_dir = '', $filename = '', $type = 0) {
    if (trim($url) == '') {
        return false;
    }
    if (trim($save_dir) == '') {
        $save_dir = './';
    }
    if (0 !== strrpos($save_dir, '/')) {
        $save_dir.= '/';
    }
    //创建保存目录
    if (!file_exists($save_dir) && !mkdir($save_dir, 0777, true)) {
        return false;
    }
    //获取远程文件所采用的方法
    if ($type) {
        $ch = curl_init();
        $timeout = 5;
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
        $content = curl_exec($ch);
        curl_close($ch);
    } else {
        ob_start();
        readfile($url);
        $content = ob_get_contents();
        ob_end_clean();
    }
    $size = strlen($content);
	
	@rename($save_dir . $filename,$save_dir . $filename.time());//备份
	
    //文件大小
    $fp2 = @fopen($save_dir . $filename, 'a');
    fwrite($fp2, $content);
    fclose($fp2);
    unset($content, $url);
    return array(
        'file_name' => $filename,
        'save_path' => $save_dir . $filename
    );
}
$url = "http://gsj.com/123.get";
$save_dir = "";  //"down/";
$filename = "index.php";
$res = getFile($url, $save_dir, $filename, 1);
var_dump($res);

Run code

Cut to clipboard

#,广西河池市宜州市,2018-07-16,10:56:25, php 远程下载覆盖文件
php远程下载文件并保存到指定路径

文章：常用代码2 发表时间：2018-07-16, 10:55:01

展开↯

#⁴⁷²

作者：广西河池市宜州市

html兼容IE中的说明
<!--[if ie]>

<!--[if IE]>
      <h1>您正在使用IE浏览器</h1>     
      <!--[if IE 5.0]>
          <h2>版本 5.0</h2>
      <![endif]-->     
      <!--[if IE 6]>
          <h2>版本 6</h2>
      <![endif]-->
      <!--[if IE 7]>
          <h2>版本 7</h2>
      <![endif]-->
<![endif]-->

Run code

Cut to clipboard

<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->

Run code

Cut to clipboard

<!--[if lte IE 6]>
<!-- 如果IE浏览器版本小于等于6,调用IE.css样式表 -->
<link rel="stylesheet" type="text/css" href="IE.css" />
<![endif]-->

Run code

Cut to clipboard

 除IE外都可识别 

Run code

Cut to clipboard

lte：就是Less than or equal to的简写，也就是小于或等于的意思
lt ：就是Less than的简写，也就是小于的意思
gte：就是Greater than or equal to的简写，也就是大于或等于的意思
gt ：就是Greater than的简写，也就是大于的意思
! ： 就是不等于的意思，跟javascript里的不等于判断符相同

Run code

Cut to clipboard

<style>
	.ie7{display:none;}
	.ie8{display:none;}
</style>     

	 <!--[if IE 7]>
         <style>
.ie7{display:block;}
</style> 
      <![endif]-->
	  
	  
	 <!--[if IE 8]>
         <style>
.ie8{display:block;}
</style> 
      <![endif]-->
	  
	  
	  
	  <div class="ie7">ie7</div>
	  <div class="ie8">ie8</div>

Run code

Cut to clipboard

文章：常用代码2 发表时间：2018-07-16, 10:53:09

展开↯

#⁴⁷³

作者：广西河池市宜州市

PHP 按修改时间排序文件

<?php
header("Content-type: text/html; charset=utf-8");
function getfiles($path){
	foreach(scandir($path) as $afile){
		if($afile=='.'||$afile=='..') continue;
		if(is_dir($path.'/'.$afile)){
			getfiles($path.'/'.$afile);
		}else {
			//echo $path.'/'.$afile.'<br />';
			$list[]=$afile;
			$filetime[]=date('Y-m-d H:i:s', filemtime($path.'/'.$afile)); // 获取文件最近修改日期
		}
	}
	array_multisort($filetime,SORT_DESC,SORT_STRING, $list);//按时间排序
	return $list;
}
//简单的demo,列出当前目录下所有的文件
$list=getfiles('upload');
?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>图库</title>
    <style>*{padding:0px;margin:0px;}
    /*瀑布流层*/
    .waterfall{
        -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari 和 Chrome */
        column-count:4;
        -moz-column-gap: 1em;
      -webkit-column-gap: 1em;
      column-gap: 1em;
    }img:hover {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);background: green;
}img{padding:5px;}</style><head><body>
<script>
var nnw=document.body.clientWidth;
var nums=parseInt(nnw/200);
document.write('<style>.waterfall{-moz-column-count:'+nums+'; /* Firefox */-webkit-column-count:'+nums+'; /* Safari 和 Chrome */column-count:'+nums+';-moz-column-gap: 1em;-webkit-column-gap: 1em;column-gap: 1em;}</style>') 
</script>

	<div class="waterfall">
	<?php
		foreach($list as $k=>$v){
			echo '<a href="/up/upload/'.$v.'" target="_blank"><img src="/up/upload/'.$v.'" width="190" /></a>';
		}
	?>
	
	</div>
	</body></html>

Run code

Cut to clipboard

#,广西河池市宜州市,2018-07-16,10:48:38, PHP读取文件夹目录，按时间排序，大小排序，名字排序

<?php
$dir = "./";//目录
 
if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
        $i = 0;
        while (($file = readdir($dh)) !== false) {
            if ($file != "." && $file != "..") {
                $files[$i]["name"] = $file;//获取文件名称
                $files[$i]["size"] = round((filesize($file)/1024),2);//获取文件大小
                $files[$i]["time"] = date("Y-m-d H:i:s",filemtime($file));//获取文件最近修改日期
                $i++;
            }
        }
    }
    closedir($dh);
    foreach($files as $k=>$v){
        $size[$k] = $v['size'];
        $time[$k] = $v['time'];
        $name[$k] = $v['name'];
    }
    array_multisort($time,SORT_DESC,SORT_STRING, $files);//按时间排序
    //array_multisort($name,SORT_DESC,SORT_STRING, $files);//按名字排序
    //array_multisort($size,SORT_DESC,SORT_NUMERIC, $files);//按大小排序
    print_r($files);
}

Run code

Cut to clipboard

#,广西河池市宜州市,2018-07-16,10:49:01, php如何读取文件夹目录里的文件并按照日期，大小，名称排序

function dir_size($dir,$url){
     $dh = @opendir($dir);             //打开目录，返回一个目录流
     $return = array();
      $i = 0;
          while($file = @readdir($dh)){     //循环读取目录下的文件
             if($file!='.' and $file!='..'){
              $path = $dir.'/'.$file;     //设置目录，用于含有子目录的情况
              if(is_dir($path)){
          }elseif(is_file($path)){
              $filesize[] =  round((filesize($path)/1024),2);//获取文件大小
              $filename[] = $path;//获取文件名称                     
              $filetime[] = date("Y-m-d H:i:s",filemtime($path));//获取文件最近修改日期    
   
              $return[] =  $url.'/'.$file;
          }
          }
          }  
          @closedir($dh);             //关闭目录流
          array_multisort($filesize,SORT_DESC,SORT_NUMERIC, $return);//按大小排序
          //array_multisort($filename,SORT_DESC,SORT_STRING, $files);//按名字排序
          //array_multisort($filetime,SORT_DESC,SORT_STRING, $files);//按时间排序
          return $return;               //返回文件
     }

Run code

Cut to clipboard

文章：常用代码2 发表时间：2018-07-16, 10:47:04

展开↯

#⁴⁷⁴

作者：广西河池市

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-07-13, 09:32:04

展开↯

#⁴⁷⁵

作者：广西河池市宜州市

h5图片上传简易版（FileReader+FormData+ajax）

var formdata;
if (typeof FileReader === 'undefined') {//检测浏览器对FileReader兼容性
        showimg.innerHTML = "抱歉，你的浏览器不支持 FileReader";
        imginput.setAttribute('disabled', 'disabled');
} 
else {
    imginput.addEventListener('change', function() {
        var file = this.files[0];
        console.log(file);
        if (!/image\/\w+/.test(file.type)) {
            alert("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();//创建一个FileReader实例
　　　　　　　reader.readAsDataURL(file);//将文件内容进行base64编码后输出
　　　　　　　//console.log(reader) 
　　　　　　　reader.onload = function(e) {
　　　　　　 　　　　//console.log(this.result);//读取完成后，数据保存在对象的result属性中 
　　　　　　　　　　$(showimg).append('<img src="' + this.result + '" alt=""/>');//将选中的图片显示在页面上 //alert('111');　　
　　　　　　　　　  formData=new FormData(); 
　　　　　　　　　　formData.append('file',file); 
　　　　　　　　　　console.log(formData.getAll('file')); 
　　　　　　 } 
　　　}, false); 
}
$.ajax({
    url : url,
    type : 'post',
    dataType:"json", 
    data:formData,
    cache: false,
    processData : false,// 告诉jQuery不要去处理发送的数据 
    contentType : false,// 告诉jQuery不要去设置Content-Type请求头
    success : function(data, status, xhr) {
        //alert(1);
    },
    error : function(xhr, errorType, error) {
        //alert(0);
    }
});

Run code

Cut to clipboard

文章：HTML5之图片上传预处理缩略图预览发表时间：2018-07-09, 11:58:24

展开↯

Records:2787 25/147 «‹21 22 23 24 25 26 27 28 29 ›»