js事件应用（带框拖拽、自定义滚动条）

偏执的太偏执、 2024-02-17 23:23 31阅读 0赞

案例1：带框拖拽

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			#div1 {height: 200px;width: 200px;background: red;position: absolute;}
    			.box{border: 1px black dashed; position: absolute;}
    		</style>
    		<script>
    			window.onclick = function(){
    				var oDiv = document.getElementById("div1");
    				
    				oDiv.onmousedown = function(ev){
    					var oEvent = ev || event;
    					
    					var disX = oEvent.clientX - oDiv.offsetLeft;
    					var disY= oEvent.clientY - oDiv.offsetTop;
    					
    					
    					//点击按下时创建box
    					var oBox = document.createElement("div");
    					oBox.className = 'box';
    					oBox.style.width = oDiv.offsetWidth - 2 + 'px'; //border本身也占大小
    					oBox.style.height = oDiv.offsetHeight - 2 + 'px';
    					
    					document.body.appendChild(oBox);
    					
    					oBox.style.left = oDiv.offsetLeft + 'px';
    					oBox.style.top = oDiv.offsetTop + 'px';
    					
    					
    					//这里不能用oDiv，因为宽度小，当鼠标移出时就会失去效果
    					document.onmousemove = function(ev){
    						var oEvent = ev || event;
    						var x = oEvent.clientX - disX;
    						var y = oEvent.clientY - disY;
    						
    						//解决div跑出界面的情况
    						if(x < 0){
    							x = 0;
    						}
    						else if(x > document.documentElement.clientWidth - oDiv.offsetWidth){
    							x = document.documentElement.clientWidth - oDiv.offsetWidth;
    						}
    						
    						if(y < 0){
    							y = 0;
    						}
    					    else if(y > document.documentElement.clientHeight - oDiv.offsetHeight){
    					    	y = document.documentElement.clientHeight - oDiv.offsetHeight;
    					    }
    					    
    					    oBox.style.left = x + 'px';
    					    oBox.style.top = y + 'px';
    					}
    					
    					
    					document.onmouseup = function(){
    					    document.onmousemove = null;
    						document.onmouseup = null;
    						
    						oDiv.style.left = oBox.offsetLeft + 'px';
    						oDiv.style.top = oBox.offsetTop + 'px';
    						document.body.removeChild(oBox);
    					}
    					
    					//解决FF问题
    					return false;
    				}
    			}
    		</script>
    	</head>
    	<body>
    	   <div id = "div1"></div>
    	</body>
    </html>

案例2：自定义滚动条

案例3：通过滚动条改变透明度

案例4;通过滚动条进行文字滑动

//通过文字将div支撑起来

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			#parent {height: 20px;width: 600px;background: grey;position: relative;margin: 20px auto;}
    			#div1 {height: 20px;width: 20px;background: red;position: absolute;}
    			#div2 {height: 400px;width: 300px;border: 1px solid black;position: relative; overflow: hidden;}
    			#div3 {left: 0px;top: 0px;position: absolute;}
    		</style>
    		<script>
    			window.onclick = function(){
    				var oDiv = document.getElementById("div1");
    				var oDiv2 =document.getElementById('div2');
    				var oDiv3 =document.getElementById('div3');
    				var Parent = document.getElementById("parent");
    				
    				oDiv.onmousedown = function(ev){
    					var oEvent = ev || event;
    					
    					var disX = oEvent.clientX - oDiv.offsetLeft;
    					
    					//这里不能用oDiv，因为宽度小，当鼠标移出时就会失去效果
    					document.onmousemove = function(ev){
    						var oEvent = ev || event;
    						var x = oEvent.clientX - disX;
    						
    						//解决div跑出界面的情况
    						if(x < 0){
    							x = 0;
    						}
    						else if(x > Parent.offsetWidth - oDiv.offsetWidth){
    							x = Parent.offsetWidth - oDiv.offsetWidth;
    						}
    						
    					    oDiv.style.left = x + 'px';
    					    
    					    var rato = x / (Parent.offsetWidth - oDiv.offsetWidth);
    					    oDiv3.style.top = -rato * (oDiv3.offsetHeight - oDiv2.offsetHeight) + 'px';
    					 //   document.title = rato;
    					}
    					
    					
    					document.onmouseup = function(){
    					    document.onmousemove = null;
    						document.onmouseup = null;
    					}
    					
    					//解决FF问题
    					return false;
    				}
    			}
    		</script>
    	</head>
    	<body>
    	   <div id = 'parent'>
    	       <div id = "div1"></div>
    	   </div>
    	   <div id = 'div2'>
    	   	<div id = 'div3'>
    	   		
    一、前言
    
    本文是一篇针对的是区块链的共识机制的序言，也可以说是“杂烩”。之后，还会详细地针对共识机制描述的博文。
    
    提及共识机制，我们不得不说到中本聪的发明——工作量证明（POW）。这种共识机制在去中心化的思想下解决了节点间相互信任的问题，使得区块链能在众多的节点上达到一种较为平衡的状态。区块链解决了在不可信信道上传输可信信息、价值转移的问题，而共识机制解决了区块链如何在分布式场景下达成一致性的问题，奠定了比特币系统的安全性。说到分布式一致性问题，其实由来已久。因为传统分布式系统的一致性算法是一个从上世纪70年代就开始研究的经典问题。Fischer, Lynch 和 Patterson在1985年发表《Impossibilityof Distributed Consensuswith One Faulty Process》，论文中提出了可以说是最重要的分布式系统定理：FLP不可能性；2000年，EricBrewer教授在PODC的研讨会上提出了一个猜想：一致性、可用性和分区容错性三者无法在分布式系统中被同时满足，并且最多只能满足其中两个；2002年，Lynch与其他人证明了Brewer猜想，从而把CAP上升为一个定理。这期间和之后，都涌现了一些很有名的分布式一致性算法，如LeslieLamport在1989年提出的Paxos；1999年Castro和Liskov提出的PBFT，这是第一个得到广泛应用的BFT算法，IBM的Hyperledge fabric就是基于PBFT共识机制的。
    
    所以现在对共识机制的牛叉的研究成果都来自那些分布式领域的大拿。
    
    
    二、FLP不可能性
    
    FLPImpossibility（FLP不可能性）是分布式领域中一个非常著名的结果，该结果在专业领域被称为“定理”，其地位之高可见一斑。FLP给出了一个令人吃惊的结论：在异步通信场景，即使只有一个进程失败，也没有任何算法能保证非失败进程达到一致性！
    
    因为同步通信中的一致性被证明是可以达到的，因此在之前一直有人尝试各种算法解决以异步环境的一致性问题，有个FLP的结果，这样的尝试终于有了答案。
    三、CAP理论
    
    在理论计算机科学中，CAP定理（CAP theorem），又被称作布鲁尔定理（Brewer's theorem），它指出对于一个分布式计算系统来说，不可能同时满足以下三点：
    
    1.  一致性（Consistency)：同一个数据在集群中的所有节点，同一时刻是否都是同样的值。
    
    2.  可用性（Availability）：集群中一部分节点故障后，集群整体是否还能处理客户端的更新请求。
    
    3.  分区容忍性（Partition tolerance）：是否允许数据的分区，分区的意思是指是否允许集群中的节点之间无法通信。
    
    
     
    四、拜占庭将军问题
    
    4.1什么是拜占庭将军问题
    
    拜占庭将军问题是一个共识问题: 首先由Leslie Lamport与另外两人在1982年提出，被称为The Byzantine Generals Problem或者Byzantine Failure。核心描述是军中可能有叛徒，却要保证进攻一致，由此引申到计算领域，发展成了一种容错理论。
    
    关于拜占庭将军问题，一个简易的非正式描述如下：
    
    拜占庭帝国想要进攻一个强大的敌人，为此派出了10支军队去包围这个敌人。这个敌人虽不比拜占庭帝国，但也足以抵御5支常规拜占庭军队的同时袭击。基于一些原因，这10支军队不能集合在一起单点突破，必须在分开的包围状态下同时攻击。他们任一支军队单独进攻都毫无胜算，除非有至少6支军队同时袭击才能攻下敌国。
    他们分散在敌国的四周，依靠通信兵相互通信来协商进攻意向及进攻时间。困扰这些将军的问题是，他们不确定他们中是否有叛徒，叛徒可能擅自变更进攻意向或者进攻时间。在这种状态下，拜占庭将军们能否找到一种分布式的协议来让他们能够远程协商，从而赢取战斗？这就是著名的拜占庭将军问题。
    
    应该明确的是，拜占庭将军问题中并不去考虑通信兵是否会被截获或无法传达信息等问题，即消息传递的信道绝无问。Lamport已经证明了在消息可能丢失的不可靠信道上试图通过消息传递的方式达到一致性是不可能的。所以，在研究拜占庭将军问题的时候，我们已经假定了信道是没有问题的，并在这个前提下，去做一致性和容错性相关研究。
    	   	</div>
    	   </div>
    	</body>
    </html>