快捷導(dǎo)航

javascript字體顏色控件的開發(fā) JS實(shí)現(xiàn)字體控制

更新時(shí)間：2017年11月27日 10:52:07 投稿：laozhang

小編給大家?guī)硪粋€(gè)用javascript編寫的能控制字體大小個(gè)顏色等基本信息的控件寫法，喜歡的嘗試編寫一下。

我們在用JS寫程序的時(shí)候，經(jīng)常會(huì)遇到像在程序中直接控制字體的大小顏色等基本信息，尤其的在后臺(tái)方便，小編測試用javascript寫了一個(gè)這個(gè)控件，喜歡的拿走吧。

以上就是用JS寫的運(yùn)行效果，一下我們來看看代碼具體實(shí)現(xiàn)方式：

知識(shí)點(diǎn)：for循環(huán)語句，字符串方法，進(jìn)制轉(zhuǎn)換，this指向問題，變量，數(shù)組方法，基本事件處理等。

<!doctype html><!--聲明html版本編寫指令 H5-->
<html>
  <head>
    <!--聲明頁面編碼 uft-8 國際編碼-->
    <meta charset="UTF-8">
    <!--網(wǎng)站三要素 關(guān)鍵字 頁面描述 標(biāo)題-->
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style type="text/css">
    *{margin:0px;padding:0px;font-family:"微軟雅黑";}
  #box{width:400px;
    height:450px;
    background:#000;
    margin:50px auto;
    border:5px
solid #000;
    border-radius:5px;
    }
  #show{width:100%;
     height:190px;
     background:#00ccff;
     line-height:200px;
     font-size:8px;
     font-weight:bold;
     text-align:center;
     border-radius:5px;
    }
  #font ul{margin-left:10px;
      margin-top:30px;}
  #font ul li{width:380px;
        height:50px;
        list-style-type:none;
        color:#ddd;}
  #font ul li span{display:block;
          width:50px;
          height:50px;
          line-height:50px;
          text-align:right;
          float:left;
          }
  #font ul li .roll{width:290px;
          height:50px;
          float:left;
          line-height:50px;
          padding-left:30px;
          }
  #font ul li .roll .move{width:200px;
              height:12px;
              display:inline-block;
              background:#fff;
              margin-left:15px;
              margin-right:15px;
              border-radius:10px;
              background-size:cover;
              border:1px solid #fff;
              position:relative;
              }
  #font ul li .roll .move .prog{position:absolute;
                top:0px;
                width:0px;
                height:12px;
                border-radius:10px 0 0 10px;
                background:url("images/slider-bar.png") bottom;}
  #font ul li .roll .move .prog .but{width:22px;
                   height:22px;
                   position:absolute;
                   top:-3px;
                   background:url("images/dot-bg.png") no-repeat;
                   cursor:pointer;
                   left:0px;}
    </style>
  </head>
  <body>
  <div id="box">
    <div id="show">云煙好帥啊</div>
    <div id="font">
      <ul>
        <li>
          <span>字號(hào)</span>
          <div class="roll">
            8
              <div class="move">
                <div class="prog">
                  <div class="but"></div>
                </div>
              </div>
            40px
          </div>
        </li>
        <li>
          <span>顏色R</span>
          <div class="roll">
            0
              <div class="move">
                <div class="prog">
                  <div class="but"></div>
                </div>
              </div>
            255
          </div>
        </li>
        <li>
          <span>G</span>
          <div class="roll">0
              <div class="move">
                <div class="prog">
                  <div class="but"></div>
                </div>
              </div>
            255
          </div>
        </li>
        <li>
          <span>B</span>
          <div class="roll">
          0
<div class="move">
                <div class="prog">
                  <div class="but"></div>
                </div>
              </div>
            255
          </div>
        </li>
      </ul>
    </div>
  </div>
  </body>
  <script type="text/javascript">
  /*
    1.JS主要針對頁面當(dāng)中的HTML元素以及樣式進(jìn)行修改，從而得到特效
    2.我們一般用JS寫特效，要知道觸發(fā)特效的條件是什么
    3.促發(fā)這個(gè)條件的對象是誰
    4.寫這個(gè)事件里面發(fā)生的事情
    5.獲取鼠標(biāo)的移動(dòng)水平方向的距離
    6.this代表當(dāng)前執(zhí)行這個(gè)事件的對象
    (這個(gè)事件是誰做的 那么這個(gè)事件當(dāng)中的this就是誰)
  */
  var oBut =document.getElementsByClassName("but");//通過元素的類名 是以一個(gè)數(shù)組的形式保存
  var oFont =document.getElementById("show");//通過ID名獲取元素
  var oProg =document.getElementsByClassName("prog");
  var width = [0,0,0,0];
  var rgb = ["00","00","00"];
  for (var i=0;i<oBut.length;i++)//重復(fù)執(zhí)行某一個(gè)語句（循環(huán)體）限制條件
  {
    oBut[i].index=i;//自定義一個(gè)index屬性保存i
    oBut[i].onmousedown =function(e){//鼠標(biāo)點(diǎn)擊下去
      //event事件對象 clientX clientY
      var e = e || window.event;//做IE兼容
      this.x =e.clientX;//當(dāng)前對象的屬性去保存這個(gè)值(自定義一個(gè)x屬性)
      var thisIndex = this;//定義一個(gè)變量保存this指向?qū)ο?
      var lastLeft = width[this.index];
      //console.log("鼠標(biāo)點(diǎn)擊下去");
      document.onmousemove =function(e){//鼠標(biāo)移動(dòng)事件
        //console.log("鼠標(biāo)移動(dòng)事件");
        var e = e || window.event;//做IE兼容
        width[thisIndex.index] =e.clientX-thisIndex.x+lastLeft;
        if (width[thisIndex.index]>180)width[thisIndex.index]=180;
        if (width[thisIndex.index]<0)width[thisIndex.index]=0;     
        oBut[thisIndex.index].style.left =width[thisIndex.index]+"px";
        oProg[thisIndex.index].style.width =width[thisIndex.index]+"px";
        if (thisIndex.index ==0)
        {
oFont.style.fontSize =width[thisIndex.index]/180*40+8+"px";
          //駝峰命名法
        }else{
          var num = parseInt(width[thisIndex.index]/180*255);
          /*if (num<16)
          {
            numStr ="0"+num.toString(16);
          }else{
            numStr = num.toString(16);
          }*/
rgb[thisIndex.index-1] =num<16?"0"+num.toString(16):num.toString(16);
oFont.style.color ="#"+rgb[0]+rgb[1]+rgb[2];
        }
      }
document.onmouseup =function(){//鼠標(biāo)松開事件
//console.log("鼠標(biāo)松開事件");
this.onmousemove =null;//終止移動(dòng)事件
this.onmouseup =null;//終止鼠標(biāo)松開事件
      }
    }
  }
</script>
</html>