JavaScript實(shí)戰(zhàn)(原生range和自定義特效)簡(jiǎn)單實(shí)例

更新時(shí)間：2016年08月21日 13:33:21 投稿：jingxian

下面小編就為大家?guī)硪黄狫avaScript實(shí)戰(zhàn)(原生range和自定義特效)簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

今天我又碼了兩個(gè)特效：一個(gè)是用原生input[type=range]的，另一個(gè)完全自定義的；下面是完整代碼和演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    #tip{
      position: absolute;
      top: 30px;
      left: 0;
      right: 0;
      width: 200px;
      height: 160px;
      margin: auto;
      border: 1px solid gray;
      background-color: cornsilk;
    }
    #tip div{
      position: relative;
      width: 100%;
      height: 80px;
      border-bottom: 1px solid gray;
    }
    .out{
      position: relative;
      left: 16%;
      display: inline-block;
      border: 2px solid royalblue;
      margin-top: 20px;
      width: 130px;
      height: 20px;
      background-color: lightgoldenrodyellow;
    }
    .in{
      display: block;
      height: 20px;
      line-height: 20px;
      text-align: right;
      color: white;
      width: 50%;
      background-image: linear-gradient(to right,powderblue 0%,#336699 50%,red 100%);
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    input[type="range"] {
      position: relative;
      left: 19%;
      top: 5px;
      box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;
      background-color: lightskyblue;
      border-radius: 15px;
      width: 60%;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      height:15px;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      height: 20px;
      width: 10px;
      background-color: coral;
      border-radius: 15px;
      -webkit-box-shadow: 0 -1px 1px black inset;
      -moz-box-shadow: 0 -1px 1px black inset;
      box-shadow: 0 -1px 1px black inset;
    }
    input[type="range"]:before{
      content: attr(value);
      color: white;
      border-radius: 5px 0 0 5px;
      background-color: lightskyblue;
    }
    input[type="range"]:after{
      content: attr(max);
      color: white;
      border-radius:0 5px 5px 0;
      background-color: lightskyblue;
    }
    .b{
      display: inline-block;
      width: 22px;
      padding: 0;
    }
    #outer2{left: 5px}
    #btn1{
      position: relative;
      left: 5px;
    }
    #btn2{
      position: relative;
      left: 5px;
    }
  </style>
  <script>
    window.onload = function(){
      //原生組件range
      var inner = document.getElementById('inner1');
      var range = document.getElementById('range');
      range.onclick = function(){
          inner.innerHTML = range.value;
          inner.style.width = range.value+'%';
      };
      range.onmousemove = function(){
          inner.innerHTML = range.value;
          inner.style.width = range.value+'%';
      };
      //自定義組件
      var outer2 = document.getElementById('outer2');
      var inner2 = document.getElementById('inner2');
      var btn1 = document.getElementById('btn1');
      var btn2 = document.getElementById('btn2');
      var id,id1;
      var value = parseInt(inner2.innerHTML);
      var a = parseFloat(window.getComputedStyle(outer2,null).width)/100;
      //減---
      btn1.onmousedown = function(){
        id1 = setTimeout(function change(){
              if(value>0) {
                value--;
                inner2.innerHTML = value;
                inner2.style.width = (value) * a + 'px';
                id = setTimeout(function(){
                  clearTimeout(id);
                  change();
                },16.7);
              }else{clearTimeout(id);}
            },500);
      };
      btn1.onmouseup = function(){clearTimeout(id1);clearTimeout(id)};
      btn1.onclick = function(){
        console.log('a:'+a+','+'value:'+value);
        if(value>0){
          value--;
          inner2.innerHTML = value;
          inner2.style.width = (value)*a+'px';
        }
      };
      //加+++
      btn2.onmousedown = function(){
        id1 = setTimeout(function change(){
          if(value<100) {
            value++;
            inner2.innerHTML = value;
            inner2.style.width = value * a + 'px';
            id = setTimeout(function(){
              clearTimeout(id);
              change();
            },16.7);
          }else{clearTimeout(id);}
        },500);
      };
      btn2.onmouseup = function(){clearTimeout(id1);clearTimeout(id)};
      btn2.onclick = function(){
        if(value<100){
          value++;
          inner2.innerHTML = value;
          inner2.style.width = value*a+'px';
        }
      }
    }
  </script>
</head>
<body>
  <form id="tip">
    <div>
      <span id="outer1" class="out">
        <span id="inner1" class="in">50</span>
      </span>
      <input id="range" class="ran" type="range" min="0" max="100" step="1" value="50">
    </div>
    <div id="d2">
      <input id="btn1" class="b" type="button" value="<">
      <span id="outer2" class="out">
        <span id="inner2" class="in">50</span>
      </span>
      <input id="btn2" class="b" type="button" value=">">
    </div>
    按住按鈕0.5秒, 會(huì)持續(xù)變化!
  </form>
</body>
</html>

第一個(gè)的實(shí)現(xiàn)很簡(jiǎn)單，就不做解釋了，自己看代碼；

這里主要介紹第二個(gè)實(shí)例的實(shí)現(xiàn)：

在我們看到一個(gè)需求，或者別人的特效時(shí)，不急著去看別人的代碼，先想想，要是你，該怎么實(shí)現(xiàn)？先把思路整理出來

該特效的實(shí)現(xiàn)原理：

1. 一個(gè)span內(nèi)嵌套一個(gè)span；

•外面的span：只顯示寬、高、邊框，背景無

•里面的span：高度和外面一樣，寬度為默認(rèn)的50%，先設(shè)置好背景顏色為線性漸變

2. 按鈕的onclick事件比較簡(jiǎn)單，點(diǎn)一下，就改變里面的span的寬度和顯示數(shù)字

3. 當(dāng)按鈕的onmousedown時(shí)，啟動(dòng)計(jì)時(shí)器，等500ms后執(zhí)行函數(shù)change函數(shù)，而change函數(shù)是一個(gè)用setTimeout回調(diào)自身的函數(shù)，他會(huì)沒16.7ms回調(diào)一次，達(dá)到動(dòng)畫效果

難點(diǎn)解析：

1. 這一句 var a = parseFloat(window.getComputedStyle(outer2,null).width)/100;
用來獲得初始值，如果你用outer2.style.width
是得不到值得，當(dāng)然你也可以將a設(shè)個(gè)固定值，比如這里可以設(shè)為
var a = 1.3，
注意IE9以下不支持getComputedStyle方法，
IE的Element對(duì)象有currentStyle屬性；

2. 這一句
btn1.onmouseup = function(){clearTimeout(id1);
clearTimeout(id)};
很關(guān)鍵，沒了它，在onclick觸發(fā)之前，會(huì)先觸發(fā)onmosedown，在500ms后，開始執(zhí)行，之后一直執(zhí)行外層的計(jì)時(shí)器；

3. 其它的都不是難點(diǎn)；
這個(gè)實(shí)例其實(shí)擴(kuò)展到其它很多應(yīng)用，比如可以把中間的顯示部分替換為文章、圖片等等，再把按鈕換成自定義的，效果將會(huì)很酷的！

如果您覺得我有寫的不好的地方，歡迎指出！

以上這篇JavaScript實(shí)戰(zhàn)(原生range和自定義特效)簡(jiǎn)單實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: