日报_28

2020年5月31日 星期日

No matter how good something is, you can ruin it by overthinking it.

今天主要是对面试题进行了一个背诵，然后对这个组件进行了一个封装，当然呢在分装的过程中的呢也是问题百出，但是呢都通过上网查找百度，也都解决了，总结道了笔记中了，然后呢也是对JavaScript高级的红皮书进行了一个阅读，每天提高一点点；然后呢到傍晚把电商风云的记录片看完了。也综合总结一下。js小案例呢就是拖拽；

这不到半个月京东又开始618的活动了，这无不归功于电商的发展，也打破了我之前对电商认识的一个误区，常规的认识仅限于网上购物和利用网路平台进行宣传创造效益，而没有思考大型电子商务的核心，没有思考它能够兴盛的原因，我们只想过利用这个平台，没有想过这个平台背后包含的智慧，原理。在这个互联网时代，电商对我们的影响已经渗透生活方方面面。它的高速发展、分秒必争的行业氛围，创下了一次次高营业额的好成绩，就如天猫双11一天的成交金额已超过香港零售一个月的数目。从价格战，再到品牌栈，在电商的这个大圈子里，几大电商巨头谁与齐争锋，在这个互联网时代，电商对我们的影响已经渗透生活方方面面。它的高速发展、分秒必争的行业氛围，创下了一次次高营业额的好成绩，就如天猫双11一天的成交金额已超过香港零售一个月的数目。我一直相信比尔盖茨就说过的一句话：未来要么电子商务,要么无商可务,未来将是电子商务的天下！

js小案例

html

<div id="box">
    <h2><a href="javascript:;">点击回放拖动轨迹</a></h2>
    <p><strong>Drag:</strong><span></span></p>
    <p><strong>offsetTop:</strong><span></span></p>
    <p><strong>offsetLeft:</strong><span></span></p>
</div>

js

var oBox=document.getElementById("box");
	var oH2 = oBox.getElementsByTagName("h2")[0];
	var oA = oBox.getElementsByTagName("a")[0];
	var aSpan = oBox.getElementsByTagName("span");	
	var disX = disY = 0;
	var bDrag = false;
	var aPos = [{x:oBox.offsetLeft, y:oBox.offsetTop}]
	
	//鼠标按下, 激活拖拽
	oH2.onmousedown = function (event)
	{		
		var event = event || window.event;
		bDrag = true;
		disX = event.clientX - oBox.offsetLeft;
		disY = event.clientY - oBox.offsetTop;
		
		aPos.push({x:oBox.offsetLeft, y:oBox.offsetTop})
		
		this.setCapture && this.setCapture();
		
		return false
	};
	
	//拖拽开始
	document.onmousemove = function (event)
	{
		if (!bDrag) return;
		var event = event || window.event;
		var iL = event.clientX - disX;
		var iT = event.clientY - disY;
		var maxL = document.documentElement.clientWidth - oBox.offsetWidth;
		var maxT = document.documentElement.clientHeight - oBox.offsetHeight;
		
		iL = iL < 0 ? 0 : iL;
		iL = iL > maxL ? maxL : iL; 
		
		iT = iT < 0 ? 0 : iT;
		iT = iT > maxT ? maxT : iT;
		
		oBox.style.marginTop = oBox.style.marginLeft = 0;
		oBox.style.left = iL + "px";
		oBox.style.top = iT + "px";		

		aPos.push({x:iL, y:iT})
		
		status();
		
		return false
	};

	//鼠标释放, 结束拖拽
	document.onmouseup = window.onblur = oH2.onlosecapture = function ()
	{
		bDrag = false;				
		oH2.releaseCapture && oH2.releaseCapture();
		status()
	};
	
	//回放拖动轨迹
	oA.onclick = function ()
	{
		if (aPos.length == 1) return;
		var timer = setInterval(function ()
		{
			var oPos = aPos.pop();
			oPos ? (oBox.style.left = oPos.x + "px", oBox.style.top = oPos.y + "px", status()) : clearInterval(timer)
		}, 30);
		
		this.focus = false;//去除链接虚线
		
		return false
	};
	
	//阻止冒泡
	oA.onmousedown = function (event)
	{
		(event || window.event).cancelBubble = true
	};
	
	//监听状态函数
	function status ()
	{
		aSpan[0].innerHTML = bDrag;
		aSpan[1].innerHTML = oBox.offsetTop;
		aSpan[2].innerHTML = oBox.offsetLeft
	}
	
	//初始调用
	status()

css

html,
body {
  overflow: hidden;
}
body,
div,
h2,
p {
  margin: 0;
  padding: 0;
}
body {
  color: #fff;
  background: #000;
  font: 12px/2 Arial;
}
p {
  padding: 0 10px;
  margin-top: 10px;
}
span {
  color: #ff0;
  padding-left: 5px;
}
#box {
  position: absolute;
  width: 300px;
  height: 150px;
  background: #333;
  border: 2px solid #ccc;
  top: 50%;
  left: 50%;
  margin: -75px 0 0 -150px;
}
#box h2 {
  height: 25px;
  cursor: move;
  background: #222;
  border-bottom: 2px solid #ccc;
  text-align: right;
  padding: 0 10px;
}
#box h2 a {
  color: #fff;
  font: 12px/25px Arial;
  text-decoration: none;
  outline: none;
}