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

最下面的是效果显示的div性能

原本想详细步骤完整地写出来，不过我想这个也不难，又耗费时间，因此草草收场。js代码有很大一部分能够复用的，也没有作优化。暂时先这样，有时间再修改学习

1. JS按钮触发事件
2. QT开发（七）——QT按钮组件
3. vue 开发一个按钮组件
4. js按钮点击事件
5. android 圆角按钮和按钮颜色
6. finereport 添加按钮以及按钮事件 -- （1.重置按钮事件js）
7. Js按钮Hover
8. Java eleven按钮组件
9. JAVA按钮组件（1）
10. flutter中的按钮组件
更多相关文章...
• jQuery Mobile 按钮 - jQuery Mobile 教程
• ionic 按钮 - ionic 教程
• PHP开发工具
• 三篇文章了解 TiDB 技术内幕 —— 谈调度