JavaScript實戰（原生range和自定義特效）

-Advertisement-

今天我又碼了兩個特效：一個是用原生input[type=range]的，另一個完全自定義的；下麵是完整代碼和演示： <!DOCTYPE html tip{ position: absolute; top: 30px; left: 0; right: 0; width: 200px; height: ...

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

<!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">
        
            <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">
        
        
            <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=">">
        
        按住按鈕0.5秒, 會持續變化!
    </form>
</body>
</html>

第一個的實現很簡單，就不做解釋了，自己看代碼；

這裡主要介紹第二個實例的實現：

在我們看到一個需求，或者別人的特效時，不急著去看別人的代碼，先想想，要是你，該怎麼實現？先把思路整理出來

該特效的實現原理：

一個span內嵌套一個span；
- 外面的span：只顯示寬、高、邊框，背景無
- 裡面的span：高度和外面一樣，寬度為預設的50%，先設置好背景顏色為線性漸變
按鈕的onclick事件比較簡單，點一下，就改變裡面的span的寬度和顯示數字
當按鈕的onmousedown時，啟動計時器，等500ms後執行函數change函數，而change函數是一個用setTimeout回調自身的函數，他會沒16.7ms回調一次，達到動畫效果

難點解析：

這一句var a = parseFloat(window.getComputedStyle(outer2,null).width)/100;用來獲得初始值，如果你用outer2.style.width是得不到值得，當然你也可以將a設個固定值，比如這裡可以設為var a = 1.3，註意IE9以下不支持getComputedStyle方法，IE的Element對象有currentStyle屬性；
這一句btn1.onmouseup = function(){clearTimeout(id1);clearTimeout(id)};很關鍵，沒了它，在onclick觸發之前，會先觸發onmosedown，在500ms後，開始執行，之後一直執行外層的計時器；
其它的都不是難點；

這個實例其實擴展到其它很多應用，比如可以把中間的顯示部分替換為文章、圖片等等，再把按鈕換成自定義的，效果將會很酷的！

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

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

電腦程式的思維邏輯 (32) - 剖析日期和時間

本節剖析Java API中的日期和時間相關類，電腦內部是如何表示時間的？Date類的含義是什麼？Calendar完成了什麼功能，能進行哪些操作？內部是如何實現的？體現了怎樣的設計模式？Date與字元串如何相互轉換？這些類有什麼不足？... ...
wpf框架模型分析

一、MVVM模式介紹：在網上看過很多的MVVM中各塊的介紹，感覺很混亂。找到如下的描述感覺很合理，也很好理解（https://msdn.microsoft.com/en-us/library/gg405484(v=pandp.40).aspx）。二、模式分析在項目中使用這個模型，感覺有2點需要 ...
我悟委托

作為初學者在這裡實不宜談博客，只想把自己學到的想到的總結一下，以便自己回顧知識，如能被大神無意撇到我的文章，能夠對於不足進行指導更是幸運，若給現在針對本個問題還處於迷茫的朋友帶來一絲借鑒也是開心！盲人點燈，多多指點 ...
toggleClass

toggleClass 用來給匹配元素切換類語法 "參考 http://www.w3schools.com/jquery/html_toggleclass.asp " 但是個人感覺應該是這樣的：同時指定了classname和function 只有classname生效參數說明 Paramete ...
js或css文件合併的三種方式推薦

在Web項目的開發中,js,css文件會隨著項目的開發變得越來越多,越來越大,這就給給性能方面帶來一些問題,如,頁面引入的的js,css越多的話,那麼對就增加了http請求數,解決該問題的一個好的方法就是合併js,css文件. ...
canvas游戲小試：畫一個按方向鍵移動的圓點

自己對canvas，但又有一顆做游戲的心TT。然後記錄一下對canvas的學習吧，用一個按方向鍵控制的小圓點來做練習。（編程時用了一些es6的語法）示例的html很簡單，只有一個canvas元素: 這裡可以看到我在canvas標簽里直接定義了寬和高，這和在css裡面定義是不同的，canvas元素其 ...
JavaScript Array數組方法詳解

Array類型是ECMAScript中最常用的引用類型。ECMAScript中的數據與其它大多數語言中的數組有著相當大的區別。雖然ECMAScript中的數據與其它語言中的數組一樣都是數據的有序列表，但不同的是，ECMAScript數組中的每一項可以保存任何類型的數據，無論是數值、字元串或者是對象。 ...
Javascript的重要數據類型-對象

這次的分享，主要還是想跟大家聊聊Javascript語言中很重要的概念之一，對象。為什麼說之一呢？因為Javascript其他重要概念還包括：作用域作用域鏈繼承閉包函數繼承數組 ...... 有機會會跟大家分享這些概念的。以下的介紹會分為如下：1：前言2：概述 2.1：對象創建 2.2： ...