原生JS,让我抓狂让我欣喜---渐变色选分值

作者: web蜗牛 | 来源:发表于2017-05-31 23:10 被阅读0次

原生JS,让我抓狂让我欣喜---渐变色选分值
你让我欣喜，让我抓狂
总是让我抓狂
分类让我抓狂
捐赠让我欣喜
一个人的旅行
那些让我抓狂的人
儿子有时让我抓狂
爱犬总是让我欣喜
互加让我欣喜、让我成长、激励我前行

由于秉承我司一向自己动手丰衣足食的信念，我用纯原生JS完成了一组在渐变色块儿中随手势滑动定分值的效果，已经分别处理好移动端和PC端操作事件.......喏，个人表达能力有限，上图看效果先 ~

icon_move.jpg

这组效果需要实现以下一个功能：
1、布局吧，还是说说吧具体见上图(还是懒得说 hiahiahiahia)。
2、首先加载渐变色块要考虑到一共多少块，每块变化的颜色值（RGB）
3、当鼠标/手指按下或滑动到其中一块，这块之前的色块都要渐变成一组新的颜色。
4、获取鼠标/手指抬起时的分值。

二话不说，先看html和css部分代码，(起名能力有限，见谅~)：

<body>
  <div id="movescore" class="box"></div>
  <div  style=" left:45%;  position:absolute; top:70%;  " id="_div">
    <input type="button" value="下一题" id="next" style="width:80px; height:40px;     background:skyblue;" />
  </div>
 </body>

页面中只有容器和一个按钮，so,其他重要的元素就要通过JS来创建了：

window.onload=function(){
    page_load("movescore",10);
  }

这个page_load是什么呢，就是加载静态页面的函数，由于个人工作原因，现在习惯性的把一些以后会复用的静态布局整理成JS函数工具，

//加载页面
  function page_load(box_id,td_num){
    var oBox=document.getElementById(box_id);
    
    oBox.innerHTML='<div class="score" id="movescore_score">0分</div>'+
                    '<table class="list_style" id="movescore_number_list"                     border=0 width=100% cellspacing=0 cellpadding=0 ></table>'+
                    '<ul class="list_style" id="movescore_color_list"></ul>'+
                    '<div class="move_btn" id="move_area" ><span id="movescore_movebtn" class="movebtn"></span></div>'+
                    '<div style="margin-top:20px; " id="info">注：分值越高表示满意度越高。</div>'+
                    '<input type="hidden" id="movescore_hidden_res" value="0分"/>';

    var g = for_color('187||157||157',-20,td_num,1,'');
    var _g = for_color('255||255||255',-20,td_num,2,'change');
    var answer=0;
    
    var score_num=document.getElementById(box_id+"_score");

    var list=document.getElementById(box_id+'_color_list');
    var listnumber=document.getElementById(box_id+'_number_list');   
    var oTr=document.createElement('tr');
        listnumber.appendChild(oTr);
            for(var i=0;i<td_num;i++){
                var oLi=document.createElement('li');
                oLi.id='x_'+i;
                oLi.setAttribute("class","li_style");
                oLi.style.width=Number(100/td_num)+'%';
                oLi.style.background=g[i];
                list.appendChild(oLi);

                var oTd=document.createElement('td');
                oTd.align='center';
                oTd.width=Number(100/td_num)+'%';
                oTd.innerHTML=Number(i+1)+'分';
                oTr.appendChild(oTd);
            }
        //加载操作功能：
        move_iconaction(box_id,g,_g,score_num);
  }

接下来看这几个函数了：
1、for_color():循环遍历加载渐变色

    function for_color(sColor,step_value,step,t,_change){
            //参数info:
            //sColor第一个页面的初始颜色的起始浅色 例如：'187||157||157'
            //step_value同色系渐变的步长,默认为-20
            //step要渐变的单元格个数
            //t：（1：初始颜色）（2：覆盖颜色）
            //_change:('change':需要随机选择初始颜色);('':固定起始颜色,就是传入的颜色)
            if(_change=='change'){
                sColor=ran_color();
            }else{
                sColor=sColor;
            }

          if (t == 1){
            var colors=sColor.split('||');
          }else if(t == 2){
            var _colors=sColor.split('||');
            var _colors1=(-10+Number(_colors[0]))+'||'+(-5+Number(_colors[1]))+'||'+(12+Number(_colors[2]));
            var colors=_colors1.split('||');
          }else{
            var colors='255||255||255'.split('||');
          }
            //存要渐变的颜色组
          var colorArr=[];
          for(i=0;i<step;i++){
             var each_color='rgb('+(Number(colors[0])+step_value*i)+','+(Number(colors[1])+step_value*i)+','+(Number(colors[2])+step_value*i)+')';
             colorArr.push(each_color);
          }
          return colorArr;
    }

2、change_color():操作时渐变色效果

        function change_color(obj,init_color,second_color,_id,_score){
            for(var j=0;j<obj.length;j++){
                obj[j].style.background=init_color[j];
            }
            for(var k=0;k < _id;k++){   
                obj[k].style.background=second_color[k];
            }
            var res=_id;
            _score.innerHTML=res+'分';
        }

3、move_limit():1-10限制滑动范围

    function move_limit(ev_x,disX,old_left,inputid,move_icon,aLi,_score){
            var _left=ev_x-disX-old_left;
            if(Number(_left ) <= 0){
                    _left = 0;
            }else if(Number(_left) >=Number(document.getElementById(inputid+"_color_list").offsetWidth-move_icon.offsetWidth/2) ){
                            _left =Number(document.getElementById(inputid+"_color_list").offsetWidth-move_icon.offsetWidth/2)
                }
            return _left;
    }

4、move_iconaction():滑动按钮的操作事件

    function move_iconaction(inputid,g,_g,_score){
            var aLi=document.getElementById(inputid+"_color_list").children;
            var move_icon=document.getElementById(inputid+"_movebtn");
            var old_left=move_icon.offsetLeft;
            if(browser()==1){
            //PC端
            //鼠标按下
            move_icon.onmousedown=function(ev){
                var ev=ev ||  window.event;
                var disX=ev.clientX-move_icon.offsetLeft;
                var n1=parseInt((ev.clientX-old_left-disX+move_icon.offsetWidth/2)/aLi[0].offsetWidth)+1;
                change_color(aLi,g,_g,n1,_score);
                document.getElementById(inputid+"_hidden_res").value=n1+'分';
                ev.preventDefault(); 
                //鼠标滑动
                document.onmousemove=function(ev){
                    var ev=ev ||  window.event;
                    var _x=ev.clientX;
                    var _left=move_limit(_x,disX,old_left,inputid,move_icon,aLi,_score);//限制滑动范围
                    move_icon.style.left=_left+'px';
                    var a=_left+move_icon.offsetWidth/2-3;
                    var b=aLi[0].offsetWidth;
                    var n2=parseInt(a/b+1);
                    change_color(aLi,g,_g,n2,_score);
                    document.getElementById(inputid+"_hidden_res").value=n2+'分';
                    ev.preventDefault();    
                }
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                    document.releaseCapture&&document.releaseCapture();
                }
            }
        }else{
            //移动端：
            move_icon.addEventListener('touchstart',function(ev){
                   fnStart(inputid,this,ev,aLi,old_left,g,_g,_score);
            },false);
        }
        
        document.getElementById("_div").onclick=function(){
            alert(document.getElementById(inputid+"_hidden_res").value);
        }
    }

5、fnStart():移动端点击和滑动事件

        function fnStart(inputid,_this,ev,aLi,old_left,sc,ec,_score){
            //手指按下
            var x=ev.targetTouches[0].pageX;
            var dis_x=x-_this.offsetLeft;   
            var n_1= parseInt((x-dis_x-old_left+_this.offsetWidth/2)/aLi[0].offsetWidth+1);
            change_color(aLi,sc,ec,n_1,_score);
            document.getElementById(inputid+"_hidden_res").value=n_1+'分';
            ev.preventDefault();    
            
            //手指滑动
            _this.addEventListener('touchmove',function(ev){
                var ev=ev|| window.event;
                var x=ev.targetTouches[0].pageX;        
                var _left=move_limit(x,dis_x,old_left,inputid,_this,aLi,_score);//限制滑动范围
                _this.style.left=_left+'px';        
                var a=_left+_this.offsetWidth/2-3;
                var b=aLi[0].offsetWidth;
                var n2=parseInt(a/b+1);
                change_color(aLi,sc,ec,n2,_score);
                document.getElementById(inputid+"_hidden_res").value=n2+'分';
                ev.preventDefault();
             },false);
        }

6、常见获取随机数和检测浏览器设备的工具：

/*******获取换页时初始颜色的起始颜色的随机数********/
        function ran_color(){
            var r=parseInt(Math.random()*(255-200)+200);
            var g=parseInt(Math.random()*(255-200)+200);
            var b=parseInt(Math.random()*(255-200)+200);
            return r+'||'+g+'||'+b;
        }
    
/****分辨PC和移动端****/
        function browser(){
            try {
                document.createEvent("TouchEvent");
                // alert('移动端支持TouchEvent事件！');
                return 2;
            } catch (e) {
                return 1;
            }
        }

到此为止，这个货就搞完了，虽然原生JS hin浪费时间，但是不得不承认很锻炼人，目前由于个人封装能力有限，有些地方还有点拙劣和繁琐，欢迎各位童鞋在评论中指出或联系本人，不胜感激。

原生JS,让我抓狂让我欣喜---渐变色选分值
由于秉承我司一向自己动手丰衣足食的信念，我用纯原生JS完成了一组在渐变色块儿中随手势滑动定分值的效果，已经分别处理...
你让我欣喜，让我抓狂
儿子，过了年你就满三岁了。从你呱呱坠地，蹒跚学步，到呀呀学语，到现在的你，经历了一个又一个质的飞跃，妈妈很庆幸一...
总是让我抓狂
下午放学你就开始做作业，这个表现棒棒哒！吃过晚饭做速算盒子竞有一半不对，我压住内心的不快，耐心的讲解了一遍，你...
分类让我抓狂
现状我对自己的分类总是感到不满意，b站的收藏视频，知乎的文章收藏，网易云的歌单收藏，每次看，我都感觉不过是一堆凌...
捐赠让我欣喜
今天上午最大的收获是我们四个人一起以爱心之家的名义向浙江省慈善义工总会捐赠一万元！我们的绍兴爱心之家在七八年前很...
一个人的旅行
来到“微笑国度”已经五个月了。慢慢地习惯这里的生活，酸辣的食物让我甚是欣喜，调皮的学生也让我甚是抓狂。贪恋...
那些让我抓狂的人
那些让我抓狂的人:孩子别误会了，我没孩子。是我工作中接触的孩子，嗯，我在托班工作，孩子年龄在3岁左右。最近他们...
儿子有时让我抓狂
我的儿子叫开心，帅气聪明、活泼开朗，可是只要一写作业，我们就进入抓狂模式。因为他没有时间概念、总是愣神，哪怕是...
爱犬总是让我欣喜
这是我家小白（主人太懒），为啥叫小白呢？（主人真的很懒）小白来到我家已经有四年了。按照年纪来算的话，他可能有三十...
互加让我欣喜、让我成长、激励我前行
时光匆匆，转眼开学在即。在这个暑假里，我每天沉浸在互加计划平台安排的各项学习中，忙碌着、充实着、享受着…… 开学的...