JS組件開發---調色按鈕

時間 2019-11-06

原文原文鏈接

在學習到實踐的過程當中，我想應該須要有如下的步驟：
首先要有一個明確的目標，要分析實施的過程當中以自身已有的知識水平有可能出現的問題，而後列出依次要解決的問題，再依照問題找答案，把問題都解決就能夠出個測試版咯，固然，最後有能力能夠作代碼上的優化甚至性能優化方面的工做。
下面是我用javaScript寫調色按鈕的整個過程：css

首先我須要作的是一個調色按鈕：四個按鈕依次表明顏色rgba中的四個參數。
須要思考的問題是：一、鼠標事件拖放dom元素二、怎麼控制拖動的dom元素只能水平拖動三、怎麼把元素的拖動轉換成顏色值和透明度的改變html

問題最終解決：
一、鼠標拖放dom元素須要用到onmousedown、onmousemove、onmouseup的鼠標事件（順便提一下：onmousedown和mousedown的區別是onmousedown是js原生，而mousedown是封裝了onmousedown方法的jQuery方法）
二、讓子元素固定在父元素內移動便可控制子元素只在水平移動
三、經過拖動的佔整個進度條的權重能夠轉換成對應的顏色值以及透明度值（詳細狀況看代碼註釋）java

手敲一小時出來的代碼和效果圖
代碼：性能優化

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
body{font-family:"微軟雅黑";}
#parent1,#parent2,#parent3,#parent4{ position:relative; width:520px; height:50px; background:#ccc; margin-bottom:20px; }
#div1,#div2,#div3,#div4{ position:absolute; width:20px; height:50px; background:#99e;}
#div5{position:absolute; width:300px; height:300px;background:#000;}
label{margin-left: 525px;}
</style>

</head>

<body>
    <div id="parent1">       
       <div id="div1"></div>
       <label id="div1_info">R:0</label>
    </div>
    
    <div id="parent2">
       <div id="div2"></div>
       <label id="div2_info">G:0</label>
    </div>
    
    <div id="parent3">
       <div id="div3"></div>
       <label id="div3_info">B:0</label>
    </div>
    
    <div id="parent4">
       <div id="div4"></div>
       <label id="div4_info">opacity:1(default)</label>
    </div>
    
    <div id="div5"></div>
<script>
window.onload=function(ev){
    var oEvent = ev||event;   //兼容ie火狐事件對象
    var oDiv1 = document.getElementById("div1");
    var oParent1 = document.getElementById("parent1");
    var oDiv2 = document.getElementById("div2");
    var oParent2 = document.getElementById("parent2");
    var oDiv3 = document.getElementById("div3");
    var oParent3 = document.getElementById("parent3");
    var oDiv4 = document.getElementById("div4");
    var oParent4 = document.getElementById("parent4");
    var oDiv5 = document.getElementById("div5");
    //rgb對應的三個值
    var R = G = B = 0;
        //初始化鼠標點擊位置,鼠標移動多少對應dom元素就對應移動多少
        var disX=0;   
        var disY=0;
    oDiv1.onmousedown=function(ev){ 
     var oEvent=ev||event;
        //獲取鼠標相對於被移動元素的父元素的位置
         disX=oEvent.clientX-oDiv1.offsetLeft;  //獲取鼠標點擊位置,clientX鼠標相對於可視區域左上角的x座標
         disY=oEvent.clientY-oDiv1.offsetTop;   //clientY鼠標相對於可視區域左上角的Y座標
         document.onmousemove=function(ev){
                 var oEvent=ev||event;
                //定位div位置
                 var l=oEvent.clientX-disX;   //oEvent.clientX是div在x方向上被移動的距離
                 var t=oEvent.clientY-disY;
                //控制div不超出可視窗口範圍
                 if(l<0){//
                         l=0;
                         }
                 else if(l>oParent1.offsetWidth-oDiv1.offsetWidth){//若是向右移動的距離比父子元素寬度差還大表示向右越界了
                         
                         l=oParent1.offsetWidth-oDiv1.offsetWidth;
                         }
                if(t<0){
                        t=0;
                        }
                else if(t>oParent1.offsetHeight-oDiv1.offsetHeight){
                        
                        t=oParent1.offsetHeight-oDiv1.offsetHeight;
                        }
                //css對div定位
                 oDiv1.style.left=l+'px';
                 oDiv1.style.top=t+'px';
                 }
          document.onmouseup=function(){
                //鼠標彈起時釋放onmousemove和onmouseup事件
                  document.onmousemove=null;
                  document.onmouseup=null;
                  len = oDiv1.offsetLeft;//獲取相對父元素移動的距離
                  percent = len/500;
                  R = parseInt(percent*255);
                  //alert(R);
                  oDiv5.style.background = "rgb("+R+","+G+","+B+")";
                  document.getElementById("div1_info").innerHTML="R:"+R;
                }
         return false;   //解決低版本火狐拖拽空div時的bug
         }
         
    oDiv2.onmousedown=function(ev){ 
     var oEvent=ev||event;
        //獲取鼠標相對於被移動元素的父元素的位置
         disX=oEvent.clientX-oDiv2.offsetLeft;  //獲取鼠標點擊位置,clientX鼠標相對於可視區域左上角的x座標
         disY=oEvent.clientY-oDiv2.offsetTop;   //clientY鼠標相對於可視區域左上角的Y座標
         document.onmousemove=function(ev){
                 var oEvent=ev||event;
                //定位div位置
                 var l=oEvent.clientX-disX;   //oEvent.clientX是div在x方向上被移動的距離
                 var t=oEvent.clientY-disY;
                //控制div不超出可視窗口範圍
                 if(l<0){//
                         l=0;
                         }
                 else if(l>oParent2.offsetWidth-oDiv2.offsetWidth){//若是向右移動的距離比父子元素寬度差還大表示向右越界了
                         
                         l=oParent2.offsetWidth-oDiv2.offsetWidth;
                         }
                if(t<0){
                        t=0;
                        }
                else if(t>oParent2.offsetHeight-oDiv2.offsetHeight){
                        
                        t=oParent2.offsetHeight-oDiv2.offsetHeight;
                        }
                //css對div定位
                 oDiv2.style.left=l+'px';
                 oDiv2.style.top=t+'px';
                 }
          document.onmouseup=function(){
                //鼠標彈起時釋放onmousemove和onmouseup事件
                  document.onmousemove=null;
                  document.onmouseup=null;
                  len = oDiv2.offsetLeft;//獲取相對父元素移動的距離
                  percent = len/500;
                  G = parseInt(percent*255);
                  //alert(G);
                  oDiv5.style.background = "rgb("+R+","+G+","+B+")";
                  document.getElementById("div2_info").innerHTML="G:"+G;
                }
         return false;   //解決低版本火狐拖拽空div時的bug
         }
         
    oDiv3.onmousedown=function(ev){ 
     var oEvent=ev||event;
        //獲取鼠標相對於被移動元素的父元素的位置
         disX=oEvent.clientX-oDiv3.offsetLeft;  //獲取鼠標點擊位置,clientX鼠標相對於可視區域左上角的x座標
         disY=oEvent.clientY-oDiv3.offsetTop;   //clientY鼠標相對於可視區域左上角的Y座標
         document.onmousemove=function(ev){
                 var oEvent=ev||event;
                //定位div位置
                 var l=oEvent.clientX-disX;   //oEvent.clientX是div在x方向上被移動的距離
                 var t=oEvent.clientY-disY;
                //控制div不超出可視窗口範圍
                 if(l<0){//
                         l=0;
                         }
                 else if(l>oParent3.offsetWidth-oDiv3.offsetWidth){//若是向右移動的距離比父子元素寬度差還大表示向右越界了
                         
                         l=oParent3.offsetWidth-oDiv3.offsetWidth;
                         }
                if(t<0){
                        t=0;
                        }
                else if(t>oParent3.offsetHeight-oDiv3.offsetHeight){
                        
                        t=oParent3.offsetHeight-oDiv3.offsetHeight;
                        }
                //css對div定位
                 oDiv3.style.left=l+'px';
                 oDiv3.style.top=t+'px';
                 }
          document.onmouseup=function(){
                //鼠標彈起時釋放onmousemove和onmouseup事件
                  document.onmousemove=null;
                  document.onmouseup=null;
                  len = oDiv3.offsetLeft;//獲取相對父元素移動的距離
                  percent = len/500;
                  B = parseInt(percent*255);
                  //alert(B);
                  oDiv5.style.background = "rgb("+R+","+G+","+B+")";
                  document.getElementById("div3_info").innerHTML="B:"+B;
                }
         return false;   //解決低版本火狐拖拽空div時的bug
         }
         
    oDiv4.onmousedown=function(ev){ 
     var oEvent=ev||event;
        //獲取鼠標相對於被移動元素的父元素的位置
         disX=oEvent.clientX-oDiv4.offsetLeft;  //獲取鼠標點擊位置,clientX鼠標相對於可視區域左上角的x座標
         disY=oEvent.clientY-oDiv4.offsetTop;   //clientY鼠標相對於可視區域左上角的Y座標
         document.onmousemove=function(ev){
                 var oEvent=ev||event;
                //定位div位置
                 var l=oEvent.clientX-disX;   //oEvent.clientX是div在x方向上被移動的距離
                 var t=oEvent.clientY-disY;
                //控制div不超出可視窗口範圍
                 if(l<0){//
                         l=0;
                         }
                 else if(l>oParent4.offsetWidth-oDiv4.offsetWidth){//若是向右移動的距離比父子元素寬度差還大表示向右越界了
                         
                         l=oParent4.offsetWidth-oDiv4.offsetWidth;
                         }
                if(t<0){
                        t=0;
                        }
                else if(t>oParent4.offsetHeight-oDiv4.offsetHeight){
                        
                        t=oParent4.offsetHeight-oDiv4.offsetHeight;
                        }
                //css對div定位
                 oDiv4.style.left=l+'px';
                 oDiv4.style.top=t+'px';
                 }
          document.onmouseup=function(){
                //鼠標彈起時釋放onmousemove和onmouseup事件
                  document.onmousemove=null;
                  document.onmouseup=null;
                  len = oDiv4.offsetLeft;//獲取相對父元素移動的距離
                  percent = len/500;
                  oDiv5.style.opacity = percent;
                  //oDiv5.style.background = "rgb("+R+","+G+","+B+")";
                  document.getElementById("div4_info").innerHTML="A:"+percent;
                }
         return false;   //解決低版本火狐拖拽空div時的bug
         }

        }
</script>
</body>
</html>

下面是效果圖：
R/G/B/A分別表明rgba的四個參數，其中透明度的默認值時1

主要完成了功能dom